2011

Jul

15

jQuery EasyDrag轻松实现DIV的拖动
文章分类:XHTML相关

最近需要做一个浮动层的拖动,本来准备手动用js写的,却意外发现了一个jquery的拖动插件EasyDrag,只需简短的一两行代码就可以在主流浏览器上面轻松的拖动。

1、将id为div1的div实现拖动:

$(document).ready(
	function(){
		$("#div1").easydrag();
	}
);

2、EasyDrag还可以指定可拖动的区域,比如只能通过标题拖动整个div:

......

2011

Jun

23

jQuery实现自定义select样式
文章分类:XHTML相关

最近美工做了个效果图,为了追求一点效果,可难到我了。

其实也只是一点小小的效果,自定义select边框与下拉箭头嘛。自定义select边框对于火狐与IE8及IE9是很容易的,就IE6与IE7有点问题,但经过多番折腾,基本上也搞定了。可是经过google大师的点化,发现无法自定义右侧的箭头,只能靠模拟select来实现。

......

2011

Mar

04

一个很不错的jQuery弹出窗口插件Facebox
文章分类:XHTML相关

今天工作中要做弹出窗口,最简单的就是隐藏与显示div,效果太生硬,给人的感觉太平淡。于是在网上找插件,发现了一款不错的jQuery弹出窗口插件:Facebox。

Facebox是一个jQuery为基础的lightbox,可显示图像、div、或者远程页面,它的使用简单,效果也不错:淡入淡出,网速慢的时候还会显示加载中。

由于有多个文件,上传演示不方便,就只截了个效果图。

......

2011

Feb

17

实用的jQuery表格样式(隔行换色和鼠标经过高亮并显示隐藏内容)
文章分类:XHTML相关

后台中经常会用到表格隔行换色、鼠标经过高亮显示当前行、鼠标经过显示该行的编辑和删除链接,相信童鞋们都用过这些效果,用jQuery实现这些效果灰常的简单:

一、隔行换色:

JavaScript代码
  1. $("tr:odd").addClass("tr_bg");  

 就是说将表格的偶数行添加名为tr_bg的样式,当然,tr_bg的样式就是用来表示背景色的。

......

2011

Jan

27

jQuery滑动图片效果
文章分类:XHTML相关

前几天踏雪残情写了一篇文章JS按钮滑动切换内容,刚好今天项目要用这个效果,不过只是单纯的图片切换。本来准备在他的源代码上修改的,但发现纯js写的太复杂了,于是在网上找了这个效果,用jquery写的,简洁很多。

JavaScript代码
  1. $(document).ready(function(){  
  2.     $(".imgnav a").click(function(){  
  3.         var num=($(this).attr('rel')-1)*(-900);  
  4.         $(".imgshowbox").animate({left:num},500);  
  5.         $(".imgnav a").removeClass('active');  
  6.         $(this).addClass("active");  
  7.     });  
  8. });  
XML/HTML代码
  1. <div class="container">  
  2.     <div class="imgbox">  
  3.         <div class="imgshowbox">  
  4.             <img src="http://iamlze.cn/demo/imageslider/1.png" id="img_1" title="" alt="" />  
  5.             <img src="http://iamlze.cn/demo/imageslider/2.png" id="img_2" title="" alt="" />  
  6.             <img src="http://iamlze.cn/demo/imageslider/3.png" id="img_3" title="" alt="" />  
  7.             <img src="http://iamlze.cn/demo/imageslider/4.png" id="img_4" title="" alt="" />  
  8.         </div>  
  9.     </div>  
  10.     <div class="c"></div>  
  11.     <ul class="imgnav">  
  12.         <li><a href="#" class="active" rel="1"></a></li>  
  13.         <li><a href="#" rel="2"></a></li>  
  14.         <li><a href="#" rel="3"></a></li>  
  15.         <li><a href="#" rel="4"></a></li>  
  16.     </ul>  
  17. </div>  

点击此处查看演示。

2011

Jan

20

20个最新的jQuery效果.
文章分类:XHTML相关

1. Custom Animation Banner with jQuery

通过使用 jQuery Easing和jQuery 2D Transform插件,创建自定义animation banner。

View Demo(查看示例)

......

2011

Jan

12

jQuery显示与隐藏div的特效
文章分类:XHTML相关

项目中用js改变样式就像平时吃饭喝水一样不可缺少,隐藏与显示div更是使用频繁,你会不会经常对突然显示与隐藏而不满意呢?来看看下面这段代码:

JavaScript代码
  1. /* 
  2.  *显示 
  3.  *.show(speed, [callback]);以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。有speed参数和可选callback参数,speed表示显示的时间毫秒,后面的是可选函数. 
  4.  *$("#www").show(1000,function(){alert("回调函数");});这样1秒后第一个层显示全部,然后弹出"回调函数" 对话框.speed,三种预定速度之一的字符串("slow", "normal", or "fast")分别是600ms,400ms和200ms 
  5. */  
  6. function show(){  
  7.     $("#divObj").show();  
  8. }  
  9.   
  10. /*.hide(speed, [callback]);以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数,参考上面的*/  
  11. function hiden(){  
  12.     $("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast  
  13. }  
  14.   
  15. function fadeIn(){  
  16.     $("#divObj").fadeIn(2000);//淡入,参数可以无,参数说明同上  
  17. }  
  18. function fadeOut(){  
  19.     $("#divObj").fadeOut(2000);//淡出,参数可以无,参数说明同上  
  20. }  
  21.   
  22. /*.slideDown(speed, [callback]);窗帘效果展开;通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。回调函数是可选的,speed也有上面的三种预定速度,也可以是数值.*/  
  23. function slideDown(){  
  24.     $("#divObj").slideDown();  
  25. }  
  26.   
  27. /*.slideUp(speed, [callback]);窗帘效果折叠;通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数 同上不过是用来隐藏的*/  
  28. function slideUp(){  
  29.     $("#divObj").slideUp();  
  30. }  
  31.   
  32. /* 
  33.  *窗帘效果的切换,参数可以无,参数说明同上,如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。 
  34.  *toggle(speed, [callback]);一样的多了speed和callback函数.跟toogle()一样,不过多了时间和回调函数 
  35. */  
  36. function slideToggle(){  
  37.     $("#divObj").slideToggle(2000);  
  38. }  
  39.   
  40. /* 
  41.  *显示隐藏切换,参数可以无,参数说明同上; 
  42.  *.toggle(switch);根据switch参数切换元素的可见状态(ture为可见,false为隐藏)。switch可以用function()返回函数决定 
  43.  *.slideToggle(speed, [callback]);设置时间来通过高度变化,切换触发显示隐藏.参数同上. 
  44. */  
  45. function toggle(){  
  46.     $("#divObj").toggle(2000);  
  47. }  
XML/HTML代码
  1. <h3>div里内容的显示隐藏特效</h3>  
  2. <input type="button" value="显示" onclick="show()"/>  
  3. <input type="button" value="隐藏" onclick="hiden()"/>  
  4. <input type="button" value="淡入" onclick="fadeIn()"/>  
  5. <input type="button" value="淡出" onclick="fadeOut()"/>  
  6. <input type="button" value="窗帘效果展开" onclick="slideDown()"/>  
  7. <input type="button" value="窗帘效果折叠" onclick="slideUp()"/>  
  8. <input type="button" value="窗帘效果的切换" onclick="slideToggle()"/>  
  9. <input type="button" value="隐藏显示效果切换" onclick="toggle()"/>  
  10. <div id="divObj" style="display:none">  
  11.     1.测试例子<br/>  
  12.     2.测试例子<br/>  
  13.     3.测试例子<br/>  
  14.     4.测试例子<br/>  
  15.     5.测试例子<br/>  
  16.     6.测试例子<br/>  
  17.     7.测试例子<br/>  
  18.     8.测试例子<br/>  
  19.     9.测试例子<br/>  
  20.     0.测试例子<br/>  
  21. </div>  

不多说,点击此处查看演示!

2010

Dec

30

javaScript与jquery实现锚点平滑移动
文章分类:XHTML相关

最近做项目时需要用到锚点平滑移动的效果,在网上找了两个列子,还不错。

一、用jquery实现的,代码如下:

XML/HTML代码
  1. <script type="text/javascript">  
  2.     $(function() {  
  3.         $("a").click(function() {//给所有的a标记添加单击事件;  
  4.             var href = $(this).attr("href");//例如:当点击"滑到底部" 时,获取它的href属性为"#bottom",就会跳转到id为bottom的容器处;  
  5.             var pos = $(href).offset().top;//$(href)就相当于找到$("#bottom")(最下面的标记),找到他距离顶部的距离;  
  6.             $("html,body").animate({ scrollTop: pos }, 3000);//3秒钟  
  7.             return false;  
  8.         });  
  9.     });  
  10. </script>  
  11. <div id="top">平滑跳转到底部:<a href="#bottom">滑到底部</a></div>  
  12. <img width="300" height="3281" src="http://ss4.sinaimg.cn/bmiddle/6200b7a8t8b6743480673&690" />  
  13. <div id="bottom">平滑回到顶部:<a href="#top">回到顶部链接</a></div>  

1、点击此处查看演示效果;
2、优点:代码简洁;
3、缺点:只能用鼠标点击事件触发。

......

2010

Oct

11

给Adobe Dreamweaver CS5安装jQuery语法提示插件
文章分类:开发相关

最近在做项目时经常会用到jQuery,无意中获得了Dreamweaver的jQuery语法提示插件,在项目开发时带来了很多方便。下面来介绍一下。

其实该Dreamweaver CS5绿色版的jquery代码提示插件是提取于原版之中的,所以简单实用,无需安装,只需要覆盖相应的目录里即可。

点击此处下载插件,然后进行安装:

......

2010

May

05

jQuery“没有权限”的解决方法
文章分类:开发相关

最近在做Widget项目,主要是三星和诺基亚手机上的应用程序。因为手机应用程序的客户端只能动态显示内容,所以只能用Ajax请求服务器和用JavaScript动态显示。此时加载jQuery可以省不少事儿。

在用Ajax请求服务器时,代码如下:

$.ajax(  
    {  
        type: "POST",  
        url: "http://www.wuleilei.com/Widget/WidgetServer/Chat/index.php/Index/doChat",  
        processData: false,  
        timeout: 20000,  
        error: function(){alert("unknow");},  
        data: "uid=" + uid + "&content=" + content,  
        success: function(msg)  
            {  
            }  
    }  
    )//end $.ajax

用火狐调试了半天,没反应。于是,用IE看错误提示,如图:

......

页数1/2 12

闲言碎语

又梦见了,忘记真的很难。 (2月8日)

晚上和爸妈吃个饭。 (2月6日)

装修好累哟 (2月4日)

文章分类

最近文章

iOS开发之回调delegate的方法...

iOS开发之使用AES加密(兼容Obj...

事情好多哦

iOS开发之获取本机IP地址的方法

简单记录PC上安装苹果系统

最近评论

日志归档

友情链接

其它功能

随机标签