js特效来回旋转的图片 <!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>js特效来回旋转的图片</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/<a href=http://111cn.cn/cssdiv/css.html target=_blank >css</a>"> body{background:black} #p1{position:absolute;height:75px;top:200px;} </style> <script type="text/<a href=http://111cn.cn/js_a/js.html target=_blank >javascript</a>"> var left=200; var img=document.getElementById('p1'); var imgWidth=300; var pi=Math.PI; var x=0,temp=0; function init(){ document.getElementById('p1').style.left=left+'px'; var set=setInterval('goOn()',50); } 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> <!--把下面代码加到<body>与</body>之间--> <div id="imground"><img alt="js特效来回旋转的图片" id="p1" src="/get_pic/20090930091739862.gif"></div> <script type="text/javascript">init();</script> </body> </html>
|
|