再发一个简单的实现缓冲动画效果

[作者:zcfg|时间:2008-06-16| 收藏投稿 ]【大中小】

再发一个简单的实现缓冲动画效果

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> div{ width:180px; height:150px; overflow:hidden; } div.wrap{ border:1px solid #AAA; } a{ float:left; display:inline; width:20px; height:20px; margin:2px 2px 0 0; color:#666; font:400 12px/20px Verdana; text-align:center; text-decoration:none; border:1px solid #666; } a.current{ color:red; border:1px solid red; } </style> <script type="text/javascript"> (function(){ var tid; //本为ani私有变量，为防止动画出现抖动而将其改为全局变量 //调用这个函数即可轻松实现动画效果 function ani(obj,what,value,callback){ //长CSS属性必须写成"margin-Top"的形式 clearTimeout(tid); var ctrVal = getStyle(obj,what)||0; var stp = (value-ctrVal)/5; var _what = what.replace(/-/,""); if(Math.abs(stp)>=1){ obj.style[_what] = ctrVal + stp + "px"; tid = setTimeout(function(){ ani(obj,what,value,callback); } ,40); } else{ if(Math.abs(stp)>0.2){ obj.style[_what]=ctrVal + (stp>0?1:-1) + "px"; tid=setTimeout(function(){ ani(obj,what,value,callback); } ,40); } else{ obj.style[_what]=value+"px"; if((typeof callback).toLowerCase() =="function") callback(); } } } function getStyle(obj,styleName) //获取样式 cross browsers { var o = (typeof obj).toLowerCase()=='object'?obj:document.getElementById(obj); if(o.currentStyle){ styleName = styleName.replace(/-/g,""); var y = o.currentStyle[styleName]; } else if(window.getComputedStyle) var y = document.defaultView.getComputedStyle(o,null).getPropertyValue(styleName); return parseInt(y); } function cb(){ // callback函数此例无用测试用的 alert("callback"); } //以下就是ani函数使用的发散了不是本帖重点为方便记事本里敲的代码比较乱:-P var ancs = document.getElementsByTagName('a'); function doA(){ var o = document.getElementById('o'); for(var j=0;j<ancs.length;j++){ ancs[j].className=""; } k = parseInt(this.innerHTML); clearTimeout(aPtid); ani(o,'margin-Top',-150*(k-1)); this.className="current"; } function init(){ var o = document.getElementById('o'); for(var i=0;i<ancs.length;i++){ ancs[i].onmouseover=doA; ancs[i].onmouseout=function(){ aPtid=setTimeout(autoPlay,3000); }; } autoPlay(); } var k=0,aPtid; function autoPlay(){ if(k<4){ ancs[k++].onmouseover(); aPtid=setTimeout(arguments.callee,3000); } else{ k=0; arguments.callee(); } } window.onload=init; })(); </script> </head> <body> <div class="wrap"> <div id="o"><img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CNeapoG8zve4sQEQtAEYlgEyCFqKfevzXbF_" _fcksavedurl="http://pagead2.googlesyndication.com/pagead/imgad?id=CNeapoG8zve4sQEQtAEYlgEyCFqKfevzXbF_" /></div> <div><img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CLyUoayH2L24kgEQtAEYlgEyCNf9owYB4qDM" _fcksavedurl="http://pagead2.googlesyndication.com/pagead/imgad?id=CLyUoayH2L24kgEQtAEYlgEyCNf9owYB4qDM" /></div> <div><img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CLCEy9jcveLC9gEQtAEYlgEyCGa1OmhQGncN" _fcksavedurl="http://pagead2.googlesyndication.com/pagead/imgad?id=CLCEy9jcveLC9gEQtAEYlgEyCGa1OmhQGncN" /></div> <div><img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CLeh4_-FyPfbNRC0ARiWATIIwyNlaGnWrPw" _fcksavedurl="http://pagead2.googlesyndication.com/pagead/imgad?id=CLeh4_-FyPfbNRC0ARiWATIIwyNlaGnWrPw" /></div> </div> <a href="#" _fcksavedurl="#">1</a> <a href="#" _fcksavedurl="#">2</a> <a href="#" _fcksavedurl="#">3</a> <a href="#" _fcksavedurl="#">4</a> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

优点：不足1k的代码即可实现缓冲动画效果，跨浏览器
缺点：一次只能应用于单个属性(width/left/margin-Top)
ie6/ie7/ff/op下均ok,safari下未测试，应该也没问题。想实现多维度的动画(如width/height同时变化)，调用两次即可。

Tags：缓冲 动画效果

顶一下

上一篇：一个实用的小图弹大图的js图片展示效果

下一篇：JS特效之可维护的幻灯片效果