|
图片预加载
|
02 | var cache = []; |
03 | // Arguments are image paths relative to the current page. |
04 | $.preLoadImages = function() { |
05 | var args_len = arguments.length; |
06 | for (var i = args_len; i--;) { |
07 | var cacheImage = document.createElement('img'); |
08 | cacheImage.src = arguments[i]; |
09 | cache.push(cacheImage); |
10 | } |
11 | } |
12 |
13 | jQuery.preLoadImages("image1.gif", "/path/to/image2.png"); |
2. [代码]在新窗口打开链接 (target=”blank”) 跳至[1][2][3][4][5][6][7][8][9][10][全屏预览]
1 | $('a[@rel$='external']').click(function(){ |
2 | this.target = "_blank"; |
3 | }); |
4 |
5 | /* |
6 | Usage: |
7 | <a href="http://www.catswhocode.com" rel="external">catswhocode.com</a> |
8 | */ |
3. [代码]当支持 JavaScript 时为 body 增加 class 跳至[1][2][3][4][5][6][7][8][9][10][全屏预览]
1 | /* 该代码只有1行，但是最简单的用来检测浏览器是否支持 JavaScript 的方法，如果支持 JavaScript 就在 body 元素增加一个 hasJS 的 class */ |
2 | $('body').addClass('hasJS'); |
4. [代码]平滑滚动页面到某个锚点 跳至[1][2][3][4][5][6][7][8][9][10][全屏预览]
01 | $(document).ready(function() { |
02 | $("a.topLink").click(function() { |
03 | $("html, body").animate({ |
04 | scrollTop: $($(this).attr("href")).offset().top + "px" |
05 | }, { |
06 | duration: 500, |
07 | easing: "swing" |
08 | }); |
09 | return false; |
10 | }); |
11 | }); |
5. [代码]鼠标滑动时的渐入和渐出 跳至[1][2][3][4][5][6][7][8][9][10][全屏预览]
1 | $(document).ready(function(){ |
2 | $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads |
3 |
4 | $(".thumbs img").hover(function(){ |
5 | $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover |
6 | },function(){ |
7 | $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout |
8 | }); |
9 | }); |
6. [代码]制作等高的列 跳至[1][2][3][4][5][6][7][8][9][10][全屏预览]
1 | var max_height = 0; |
2 | $("div.col").each(function(){ |
3 | if ($(this).height() > max_height) { max_height = $(this).height(); } |
4 | }); |
5 | $("div.col").height(max_height); |
7. [代码]在一些老的浏览器上启用 HTML5 的支持 跳至[1][2][3][4][5][6][7][8][9][10][全屏预览]
01 | (function(){ |
02 | if(!/*@cc_on!@*/0) |
03 | return; |
04 | 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])} |
05 | })() |
06 |
07 | //然后在head中引入该js |
08 | <!--[if lt IE 9]> |
09 | <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> |
10 | <![endif]--> |
8. [代码]测试浏览器是否支持某些 CSS3 属性 跳至[1][2][3][4][5][6][7][8][9][10][全屏预览]
01 | var supports = (function() { |
02 | var div = document.createElement('div'), |
03 | vendors = 'Khtml Ms O Moz Webkit'.split(' '), |
04 | len = vendors.length; |
05 |
06 | return function(prop) { |
07 | if ( prop in div.style ) return true; |
08 |
09 | prop = prop.replace(/^[a-z]/, function(val) { |
10 | return val.toUpperCase(); |
11 | }); |
12 |
13 | while(len--) { |
14 | if ( vendors[len] + prop in div.style ) { |
15 | // browser supports box-shadow. Do what you need. |
16 | // Or use a bang (!) to test if the browser doesn't. |
17 | return true; |
18 | } |
19 | } |
20 | return false; |
21 | }; |
22 | })(); |
23 |
24 | if ( supports('textShadow') ) { |
25 | document.documentElement.className += ' textShadow'; |
扫一扫
82
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
