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

大中小文章来源：万象互联更新时间：2011-8-18 14:30:33

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

<!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="http://www.webjx.com/images/logo.gif" alt="万象互联网络资讯网"/> </div> <script type="text/javascript">init();</script> </body> </html>

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

版权说明:本站原创文章,由万象互联 SEO优化发表.
本文地址:https://www.hulian.top/zixun/post/4051.html

分享到：QQ空间新浪微博腾讯微博微信百度贴吧百度空间搜狐微博