google首页按钮效果
之前韩国首页首先推出这个导航就引起了讨论。实际上，这种效果非常简单，只是我们缺乏思维而已。
原理是通过背景+偏移来做到动画的，用setTimeout和backgroundPosition就可以实现动画了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/> <title>Untitled Document</title> <style type="text/css"> span { width: 52px; height: 37px; display: block; background: url(button.gif) no-repeat 0px 0px; } </style> <script type="text/javascript"> function dsp(n, playing){ if (n <= 6 && n >= 0) { var button = document.getElementById("button"); var width = 52; var offsetWidth = -width * n; button.style.backgroundPosition = offsetWidth + "px 0px"; n = playing ? n + 1 : n - 1; setTimeout("dsp(" + n + "," + playing + ")", 45); } } </script> </head> <body> <spanonmouseout="dsp(6);" id="button">&nbsp;</span> </body></html>
为什么要使用这种方法？
因为，这样可以减少HTTP链接，加快浏览速度，减少服务器负担。
所以对于，GOOGLE这种级别的访问，是非常有用的，不是为了酷..
2008-12-28 添加 jQuery版
/** * jQuery wko.DynImg * * version 0.1 (2008/8/15) * * @author Willko Cheng <willko@foxmail.com> * */(function($){ $.fn.extend({ DynImg: function(options){ options = $.extend({ step: 0, width: 0, timeout: 60 }, options); return this.each(function(){ var over, out; var overHandler = function(e, me){ var me = me || $(this); clearTimeout(out); var position = me.css("backgroundPosition").split(' '); var x = parseInt(position); var y = parseInt(position); if (x >= -options.step * options.width) { me.css({ backgroundPosition: x + -options.width + "px " + y + "px" }); over = setTimeout(function(){ overHandler(e, me) }, options.timeout); } }; var outHandler = function(e, me){ var me = me || $(this); clearTimeout(over); var position = me.css("backgroundPosition").split(' '); var x = parseInt(position); var y = parseInt(position); if (x <= -options.width) { me.css({ backgroundPosition: x + options.width + "px " + y + "px" }); out = setTimeout(function(){ outHandler(e, me) }, options.timeout); } }; $(this).hover(overHandler, outHandler); }); } });})(jQuery);
用法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/> <title>Untitled Document</title> <script type="text/javascript" src="jquery.pack.js"> </script> <script type="text/javascript" src="wko.DynImg.js"> </script> <style type="text/css"> .toolbar { margin: 0; padding: 0; list-style-type: none; } .toolbar a{ display: block; height: 37px; width: 50px; background: url(toolbar_animation_20080807.png) no-repeat; } </style> </head> <body> <ul class="toolbar"> <li><a href="" style="background-position: 0px -35px"></a></li> </ul> <script type="text/javascript"> $(function(){ $(".toolbar a").DynImg({step: 3, width: 52}); }); </script> </body></html>
参数step为动画长度，width为图片相隔长度
页:
[1]