js实现图片翻转显示效果

作者:sky 点击:1667 评论:0 发布时间:周四, 04/24/2014 - 03:03 所属分类:图像特效

图片自动旋转显示网页特效，通过js来实现这个图片翻转显示功能，可根据自己的需求来自定义图片属性，适用于图片展示效果。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /> <title>网页特效网页图片旋转效果站长特效网欢迎您。</title> <style type="text/css"> body{background:black} #www_zzjs_net{position:absolute;height:300px;top:200px;} </style> <script type="text/javascript"> var left=100; var img=document.getElementById('www_zzjs_net'); var imgWidth=400; var pi=Math.PI; var x=0,temp=0; function init(){ document.getElementById('www_zzjs_net').style.left=left+'px'; var set=setInterval('goOn()',40); }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 function goOn(){ temp=Math.cos(x); document.getElementById('www_zzjs_net').style.width=Math.abs(imgWidth*temp)+'px'; document.getElementById('www_zzjs_net').style.left=(left+(imgWidth-Math.abs(imgWidth*temp/2)))+'px'; if(temp<0){ document.getElementById('www_zzjs_net').style.filter='FlipH(enabled:true)'; }else{ document.getElementById('www_zzjs_net').style.filter='FlipH(enabled:false)'; }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 x+=pi/90; } </script> </head> <body > <a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <div id="zzjs_net"> <img id="www_zzjs_net" src="/ad/1.gif" alt="网页教学网"/> </div> <script type="text/javascript">init();</script> </body> </html>

提示：你可以先修改部分代码再运行。

顶一下

(4)

66.67%

踩一下

(2)

33.33%

标签: