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

现在的位置: 首页 > 综合 > 正文

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

2012年12月23日 ⁄ 综合 ⁄ 共 403字 ⁄ 字号小中大 ⁄ 评论关闭

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

<br />
<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>
<p><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="http://files.jb51.net/upload/20071228115115772.jpg"><img class="point" id="p2" src="http://files.jb51.net/upload/20071228115115527.jpg"><img class="point" id="p3" src="http://files.jb51.net/upload/20071228115115831.jpg"><img class="point" id="p4" src="http://files.jb51.net/upload/20071228115115794.jpg"><img class="point" id="p5" src="http://files.jb51.net/upload/20071228115116920.jpg"><img class="point" id="p6" src="http://files.jb51.net/upload/20071228115115772.jpg"><img class="point" id="p7" src="http://files.jb51.net/upload/20071228115115527.jpg"><img class="point" id="p8" src="http://files.jb51.net/upload/20071228115115831.jpg"></div>
<p>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

【上篇】（OnClientClick 和 OnClick 新页面回传值）（gridview中获取控件获取值）
【下篇】ORA-01034: ORACLE not available

作者: stature

该日志由 stature 于11年前发表在综合分类下，最后更新于 2012年12月23日.
转载请注明: 特漂亮的JS图片排列旋转效果代码 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

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

作者: stature

书签

最新文章New

本站推荐

返回首页