推荐10 个很棒的 jQuery 特效代码

1.图片预加载

（function（$） { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function（） {var args_len = arguments.length;for （var i = args_len; i--;） { var cacheImage = document.createElement（"img"）; cacheImage.src = arguments[i]; cache.push（cacheImage）;} } jQuery.preLoadImages（"image1.gif", "/path/to/image2.png"）;

2. 在新窗口打开链接（target=”blank”）

$（"a[@rel$="external"]"）.click（function（）{ this.target = "_blank";}）; /*Usage:<a href="http://www.catswhocode.com" rel="external">catswhocode.com</a>*/

3.当支持 JavaScript 时为 body 增加 class
/* 该代码只有1行，但是最简单的用来检测浏览器是否支持 JavaScript 的方法，如果支持 JavaScript 就在 body 元素增加一个 hasJS 的 class */

$（"body"）.addClass（"hasJS"）;

4.平滑滚动页面到某个锚点

$（document）.ready（function（） {$（"a.topLink"）.click（function（） {$（"html, body"）.animate（{scrollTop: $（$（this）.attr（"href"））.offset（）.top + "px"}, {duration: 500,easing: "swing"}）;return false;}）;}）;

5. 鼠标滑动时的渐入和渐出

$（document）.ready（function（）{$（".thumbs img"）.fadeTo（"slow", 0.6）; // This sets the opacity of the thumbs to fade down to 60% when the page loads $（".thumbs img"）.hover（function（）{$（this）.fadeTo（"slow", 1.0）; // This should set the opacity to 100% on hover},function（）{$（this）.fadeTo（"slow", 0.6）; // This should set the opacity back to 60% on mouseout}）;}）;

6. 制作等高的列

var max_height = 0;$（"div.col"）.each（function（）{if （$（this）.height（） > max_height） { max_height = $（this）.height（）; }}）;$（"div.col"）.height（max_height）;

7. 在一些老的浏览器上启用 HTML5 的支持

（function（）{if（！/*@cc_on！@*/0）return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split（","）,i=e.length;while（i--）{document.createElement（e[i]）}}）（）

//然后在head中引入该js
<！--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<！[endif]-->
8.测试浏览器是否支持某些 CSS3 属性

var supports = （function（） {var div = document.createElement（"div"）, vendors = "Khtml Ms O Moz Webkit".split（" "）, len = vendors.length; return function（prop） { if （ prop in div.style ） return true;prop = prop.replace（/^[a-z]/, function（val） { return val.toUpperCase（）; }）;while（len--） { if （ vendors[len] + prop in div.style ） {// browser supports box-shadow. Do what you need.// Or use a bang （！） to test if the browser doesn"t.return true; } } return false;};}）（）; if （ supports（"textShadow"） ） {document.documentElement.className += " textShadow";

9. 获取 URL 中传递的参数

$.urlParam = function（name）{var results = new RegExp（"[\?&]" + name + "=（[^&#]*）"）.exec（window.location.href）;if （！results） { return 0; }return results[1] || 0;}

10. 禁用表单的回车键提交

$（"#form"）.keypress（function（e） { if （e.which == 13） {return false; }}）;