首頁 > 開發者 > JavaScript
今天看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.onmouseover=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.onmouseout=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.onload=function (){ var lis=document.getElementsByTagName('LI'); for(var i=lis.length;i--;) new bendImg(lis[i]);}//]]></script></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
