网页图片旋转的网页特效代码_建站学-个人建站指南,网页制作,网站设计,网站制作教程

模拟网页中图片旋转的网页特效代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> 建站学--www.jzxue.com </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="http://www.jzxue.com/image/logo.gif" alt="建站学"/> </div> <script type="text/javascript">init();</script> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

(责任编辑：admin)

搜索

热门标签:

网页图片旋转的网页特效代码