一个简单的实现缓冲动画效果
- 作者：佚名 来源：互联网 文章点击数：
优点：不足1k的代码即可实现缓冲动画效果，跨浏览器
缺点：一次只能应用于单个属性(width/left/margin-Top)
ie6/ie7/ff/op下均ok,safari下未测试，应该也没问题。想实现多维度的动画(如width/height同时变化)，调用两次即可。
<!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>
- 上一篇：一个实用的小图弹大图的js图片展示效果
- 下一篇：一个div展开与关闭效果
- 相关文章
| ·Web应用常见代码：背投广告 | 06-28 |
| ·仿taobao商品查询展示效果 | 06-18 |
| ·用css在IE6下实现最小宽度(min-width) | 06-17 |
| ·挺酷的漂浮代码 | 06-16 |
| ·仿土豆视频滚动菜单(带缓动效果) | 06-12 |
| ·来自腾讯搜搜问问的经典图文轮换效果 | 06-10 |
| ·无刷新滑动门 | 05-29 |
| ·点击文字让层移动的菜单 | 05-27 |
