<html>网页图片旋转特效
2013-09-22 20:24:25 +0800
代码复制
<div class="wo-entry-section"> <style type="text/css"> #p1{height:90px;} </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> <div id="imground"> <img id="p1" src="http://35230.wodemo.com/entry/176382/49a6af58595cb57f2296fc8bae5eb288/njjj. jpg" alt="旋转图片"/> </div> <script type="text/javascript">init();</script>
代码演示
«Newer
Older»
----Comments(2)----
@rimu
|
@
at 2013-09-22 23:09:
可以，感觉不错！
万老板 (@wjt)
|
@
at 2013-09-22 21:49:
Comment:
Name:
Back to home
Subscribe
|
Register
|
Login
|
N
