当前位置：首页 → 问答吧 → jquery的图片折角动画效果

jquery的图片折角动画效果

时间：2010-05-06

来源：互联网

从一国外网站上抠下来的，效果如图：

<!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> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>图片折角动画效果</title> <script type="text/javascript" src="http://www.xiaotangdoudou.com/upload/file/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://www.xiaotangdoudou.com/upload/file/easing.js"></script> <style> .thumb { DISPLAY: block; BACKGROUND: #e1e1e1; FLOAT: left; POSITION: relative; margin:5px; } .thumb IMG { FLOAT: left; border:0; } .thumb .curl { MIN-WIDTH: 2px! important; DISPLAY: block; RIGHT: 0px; VISIBILITY: visible! important; WIDTH: 2px; POSITION: absolute; TOP: 0px; HEIGHT: auto; xleft: 0 } </style> <script type="text/javascript"> $(function(){ $('.thumb').append('<img src="http://www.xiaotangdoudou.com/upload/file/curl.png" alt="" width="2" class="curl" />'); $('a.thumb').hover(function() { $('.curl', this).stop().animate({ 'width': 62 }, 400, 'easeOutQuad'); },function() { $('.curl', this).stop().animate({ 'width': 2 }, 300, 'easeInQuad'); }); } ) </script> </head> <body> <a class="thumb" href="http://www.xiaotangdoudou.com" target="_blank"><img src="http://www.xiaotangdoudou.com/upload/file/20100506093446711.gif" /></a> <a class="thumb" href="http://www.xiaotangdoudou.com" target="_blank"><img src="http://www.xiaotangdoudou.com/upload/file/20100506093808222.gif" /></a> </body> </html>
提示：您可以先修改部分代码再运行

加载的jquery可能需要刷新一次页面才能看到效果！

[ 本帖最后由 i12fly 于 2010-5-6 11:43 编辑 ]

作者: i12fly 发布时间: 2010-05-06

还不错

作者: anleeit 发布时间: 2010-05-06

很慢？

作者: 章之小依发布时间: 2010-05-06

<!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>code.js.cn</title> <base href='http://home.blueidea.com/attachment/201004/'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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> <ul class="picView"> <li><img src="12/507825_1271081332qTlY_t.jpg" alt="" /></li> <li><img src="12/577_12710356465P9r_t.jpg" alt="" /></li> <li><img src="12/537527_1271039895e2gZ_t.jpg" alt="" /></li> <li><img src="9/506384_1270823835AS3g_t.jpg" alt="" /></li> <li><img src="12/577_12710356616L67_t.jpg" alt="" /></li> <li><img src="13/499621_1271148644KrWM_t.jpg" alt="" /></li> <li><img src="9/506384_1270823833Kkk2_t.jpg" alt="" /></li> <li><img src="10/474793_1270899891HjXj_t.jpg" alt="" /></li> </ul> </body> <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.xiaotangdoudou.com/upload/file/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> </html>
提示：您可以先修改部分代码再运行

作者: kfguoguo 发布时间: 2010-05-06

楼上高手

作者: i12fly 发布时间: 2010-05-06

这位爷绝对不止8-10k

作者: hotcrab2008 发布时间: 2010-05-06