当前位置: 首页 > 图文教程 > 网页特效 > 图片特效 > 网页图片旋转的网页特效代码
No. « ‹ 1 2 »
关键字
模拟网页中图片旋转的网页特效代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> tt </title> <style type="text/css"> body{background:black} #p1{position:absolute;height:75px;top:200px;} </style> <script type="text/javascript"> var left=200; var img=document.getElementById('p1'); var imgWidth=286; var pi=Math.PI; var x=0,temp=0; function init(){ document.getElementById('p1').style.left=left+'px'; var set=setInterval('goOn()',40); } function goOn(){ temp=Math.cos(x); document.getElementById('p1').style.width=Math.abs(imgWidth*temp)+'px'; document.getElementById('p1').style.left=(left+(imgWidth-Math.abs(imgWidth*temp/2)))+'px'; if(temp<0){ document.getElementById('p1').style.filter='FlipH(enabled:true)'; }else{ document.getElementById('p1').style.filter='FlipH(enabled:false)'; } x+=pi/90; } </script> </head> <body > <div id="imground"> <img id="p1" src="/upload/tech/20091010/20091010012846_1679091c5a880faf6fb5e6087eb1b2dc.gif" alt="软晨学习网"/> </div> <script type="text/javascript">init();</script> </body> </html>
[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]
登陆 还没注册？
繁體中文
图片特效 中的 网页图片旋转的网页特效代码
评论 (0) 