特漂亮的JS图片排列旋转效果代码

更新时间：2007年12月28日 11:51:17 作者：

特漂亮的JS图片排列旋转效果代码

了下代码,感觉用数组模拟有些僵硬,自己重新写了一个,请大家来pp!

<style type="text/css"> body{background:black} .point{position:absolute;height:75px;border:1px silver solid} #round{position:absolute;background:red;width:200px;height:200px;} </style> <script>     var r=200,dv=0.01,w=100,x=400;y=100,pn=8     var pi=3.1415926575,d=pi/2;     var pd=Math.asin(w/2/r);ed=pi*2/pn;smove=true     function window.onload(){         var o=document.getElementById("imground");         var arrimg=o.getElementsByTagName("img");         for (n=0;n<arrimg.length;n++){             arrimg[n].onmouseout=function(){smove=true;}             arrimg[n].onmouseover=function(){smove=false;}             arrimg[n].onmousedown=function(){dv=dv*2}         }         setInterval(roundMove,20);     }     function roundMove(){         for (n=1;n<=8;n++){             var o=document.getElementById("p"+n)             var ta=Math.sin(d+ed*n);             var strFilter;             if (ta<0)    o.style.left=Math.cos(d+ed*n-pd)*r+x;             else o.style.left=Math.cos(d+ed*n+pd)*r+x;             o.style.top=ta*10+10+y;             o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*r;             o.style.zIndex=ta*10;             if (o.style.zIndex<0) strFilter="FlipH(enabled:true)"             else strFilter="FlipH(enabled:false)";             if (ta<0) ta=(ta+1)*80+20; else ta=100;             strFilter=strFilter+" alpha(opacity="+ta+")";             o.style.opacity=ta/100;             o.style.filter=strFilter;         }         if (smove) d=d+dv;     } </script> <div id="imground"> <img class="point" id="p1" src="/upload/20071228115115772.jpg"/> <img class="point" id="p2" src="/upload/20071228115115527.jpg"/> <img class="point" id="p3" src="/upload/20071228115115831.jpg"/> <img class="point" id="p4" src="/upload/20071228115115794.jpg"/> <img class="point" id="p5" src="/upload/20071228115116920.jpg"/> <img class="point" id="p6" src="/upload/20071228115115772.jpg"/> <img class="point" id="p7" src="/upload/20071228115115527.jpg"/> <img class="point" id="p8" src="/upload/20071228115115831.jpg"/> </div>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

相关文章

用javascript实现的图片马赛克后显示并切换加文字功能
用javascript实现的图片马赛克后显示并切换加文字功能...
2007-04-04
简单的实现点击箭头图片切换的js代码
这个是一个简单的点击箭头图片切换的例子。JS部分采用过的是jQuery
2012-11-11
javascript双向放大缩小广告代码
比较罕见的javascript双向放大缩小图片效果代码，鼠标上下移动即可看到效果
2008-05-05
JS实现鼠标移动到缩略图显示大图的图片放大效果
一个网页上用的图片提示效果，当把鼠标移动到图片缩略图的时候，会显示图片大图，似乎在网上这是个很常见的效果，实现方法也比较多，有人用CSS，有人用JavaScript，有人用jQuery，总之，选择自己习惯的方式去实现，就是最棒的。
2012-12-12
javascript 不间断的图片滚动并可点击
不间断的图片滚动效果实现代码。
2010-01-01
图片自动播放也可通过按钮控制显示
图片自动播放也可通过按钮控制显示...
2007-02-02
javascript 指定区域内图片等比例缩放实现代码脚本之家整合版
javascript 区域内图片等比例缩放实现代码脚本之家整合版，兼容ie跟firefox。
2009-10-10
兼容ie、firefox的图片自动缩放的css跟js代码分享
这个功能主要是解决内容页中的图片过大撑出，导致页面比较难看，就需要这样的代码，需要的朋友可以参考下
2012-01-01
图片上传之前检查大小、尺寸、格式并预览的js代码
就是在客户端判断上传图片的大小，尺寸，并生成预览图，用JavaScript实现的啊
2008-10-10
多图幻灯Wipe擦洗效果
多图幻灯Wipe擦洗效果...
2006-12-12

最新评论