今天看joomla后台，当鼠标放在一个图标上时，背景图有一个动态的卷角效果，感觉蛮灵动的，于是在网上搜了下，
找到一个javascript版本的，可惜javascript水平有限，没全看懂，先记下来，以后慢慢研究。
先上效果图：
原图：
折角图：
实现代码：
<!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>
<title>不错的图片折角动画效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.picView li{
position:relative;
overflow:hidden;
list-style:none;
float:left;
display:inline;
margin:2px;
cursor:pointer;
}
.picView li .bend{
position:absolute;
top:0;
right:0;
}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<ul class="picView">
<li><a href="#" target="_blank"><img src="http://www.zzsky.cn/effect/images/201005062030/20100506093446711.gif" border="0"></a></li>
<li><a href="#" target="_blank"><img src="http://www.zzsky.cn/effect/images/201005062030/20100506093808222.gif" border="0"></a></li>
</ul>
<script type="text/javascript">
//<![CDATA[
function bendImg(wrap){
wrap=typeof wrap=="string"?document.getElementById(wrap):wrap;
var _bendImg=this, bend=document.createElement('IMG');
wrap.appendChild(bend);
bend.src=this.src;
bend.className='bend';
bend.width=2;
wrap.οnmοuseοver=function (){
this.fxTimer=_bendImg.fx(bend.width,70,function (x){
bend.width=x
},0,0,function(x){return -(Math.pow((x-1), 4) -1)},this)
};
wrap.οnmοuseοut=function (){
this.fxTimer=_bendImg.fx(bend.width,0,function (x){
bend.width=x
},0,0,0,this)
}
};
bendImg.prototype={
src:'http://www.zzsky.cn/effect/images/201005062030/curl.png',
fx:function fx(f,t,fn,E,T,F,el){
clearInterval(el.fxTimer);
var D=Date,d=+new D,e,T=T||480,E=E||D,
F=F||function(x){return Math.pow(x,2)};
return e=setInterval(function (){
var z=Math.min(1,(new D-d)/T);
if(z==1||false===fn(+f+(t-f)*F(z),z))E(clearTimeout(e))
},10)
}
};
window.οnlοad=function (){
var lis=document.getElementsByTagName('LI');
for(var i=lis.length;i--;)
new bendImg(lis[i]);
}
//]]>
</script>
</body>
</html>
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
