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

Jun

14

JavaScript获取网页中HTML元素的几种方法
文章分类:XHTML相关

呵呵,最近加入了.net项目,开始学习和使用.net啦,换个口味,有些兴奋。

这个项目中大量用到javascript和ajax,页面上的主要元素都是用ajax请求和javascript动态显示(和我的博客的留言板比较像哈~),以前对javascript也只是一知半解哈,正好乘此机会补习补习O(∩_∩)O~

1、getElementById()

......

2011

Mar

26

仿WordPress的3D旋转标签云
文章分类:XHTML相关

呵呵,折腾博客,想搞个像wordpress那样的3D旋转标签云效果,不出所然,在网上找到了同样效果的代码,灰常不错。先看张效果图:

使用起来灰常的简单,代码就不贴了,点击此处查看演示。

......

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

Feb

11

兼容IE与火狐的javascript回车提交表单
文章分类:XHTML相关

如果是form用submit提交表单,则回车后即可提交,但项目中很多时候都不需要form,这是则需要回车出发提交事件,来个简单的例子:

XML/HTML代码
  1. <p><input type="text"  onkeydown="return enterSubmit(event)" /></p>  
  2. <p><input type="button" value="提交" id="btn" onclick="login()" /></p>  
JavaScript代码
  1. function enterSubmit(evt){  
  2.     evt = (evt) ? evt : ((window.event) ? window.event : "")  
  3.     var key = evt.keyCode?evt.keyCode:evt.which;  
  4.     if(key == 13){  
  5.         document.getElementById("btn").click();  
  6.         return false;  
  7.     }  
  8. }  
  9. function login(){  
  10.     alert("提交成功!");  
  11. }  

点击此处查看示例。

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>  

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

页数1/3 123

闲言碎语

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

装修好累哟 (2月4日)

《斯巴达克斯:复仇》 (2月3日)

文章分类

最近文章

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

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

事情好多哦

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

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

最近评论

日志归档

友情链接

其它功能

随机标签