有空间感的图片环形滚动代码

代码简介：

图片围成环形来回滚动的图片特效，有立体感，而且设计的也挺不错，演示中除了部分图片，为了让页面加载更快，如果你想用的话，你可以无限制添加下去，只要你的网页很快哦。

代码内容：

View Code

<html>
<head>
  <title>有空间感的图片环形滚动代码 - www.webdm.cn</title>
<style>
html,body{background:#990000;margin:0px; }
#pics_3d{
    position:absolute;
    height:300px;
    width:100%;
    background:#000;
    top:120px;
    border-bottom:20px solid #420000;
    border-top:20px solid #420000;
}
img{
    position:absolute;
    background:#eee;
    left:0;top:0;
    border:5px solid #00CCFF;
}
</style>
</head>
<body>
<div id="pics_3d">
      <img src="http://www.webdm.cn/images/wall5.jpg" />
      <img src="http://www.webdm.cn/images/wall6.jpg" />
      <img src="http://www.webdm.cn/images/wall7.jpg" />
</div>
</body>
<script >
Item=function(UI){
    this.angle=0;
    this.UI=UI;
    this.update();
};
Item.ini={

axle_w:400,
    axle_h:10,
    cen_x:500,
    cen_y:260

};
Item.prototype.update=function(){

var J=this.UI.style,C=Item.ini,W=C.axle_w,H=C.axle_h,X=C.cen_x,Y=C.cen_y;
    var angle=this.angle/180*Math.PI;
    var left=Math.cos(angle)*W+X;
    var top=Math.sin(angle)*H+Y;
    var A=this.angle>270?this.angle-360:this.angle;
    var size=360-Math.abs(90-A)*3;
    this.UI.width=Math.max(size,120);
    var opacity=Math.max(10,size-180);
    J.filter='alpha(opacity='+opacity+')';
    J.opacity=opacity/100;
    J.left=(left-this.UI.offsetWidth/2)+'px';
    top=(top-this.UI.offsetHeight)+'px';
    J.top=top;
    J.zIndex=parseInt(size*100);

};
Nav_3D={

items:[],
    dir:1,
    index:0,
    hover:false,
    add:function(item){
        this.items.push(item);
        item.index=this.items.length-1;
        item.UI.onclick=function (){
            var J=item.angle,M=Nav_3D;
            if(M.uping)return;
            if(J==90){
                return alert('goto new url..')
            };
            M.wheel_90(item);
            M.index=item.index;
        };
        item.UI.onmouseover=function (){
            if(item.angle==90){
                Nav_3D.hover=true;
                clearTimeout(Nav_3D.autoTimer);
            };
        };
        item.UI.onmouseout=function (){
            if(item.angle==90){
                Nav_3D.hover=false;
                Nav_3D.auto();
            };
        };
        return this;
    },
    wheel_90:function(hot){
        if(this.uping)return;
        this.uping=true;
        var This=this;
        this.timer=setInterval(function (){
            clearTimeout(This.autoTimer);
            var A=hot.angle;
            This.dir=A<270&&A>90?-1:1;
            if(A==90){
                clearInterval(This.timer);
                This.uping=false;
                This.onEnd(hot);
            }
            if(A>270)A-=360;
            var set=Math.ceil(Math.abs((90-A)*0.1));
            for (var i=0;i<This.items.length;i++ ) {
                var J=This.items[i];
                J.angle+= (set*This.dir);
                J.update();
                if(J.angle>360)J.angle-=360;
                if(J.angle<0)J.angle +=360;
            };
        },15);
    },

ready:function(){
        var J=this.items,step=parseInt(360/J.length);
        for (var i=0;i<J.length;i++) {J[i].angle=i*step+90;}
        this.wheel_90(this.items[0]);
        Nav_3D.prevHot=this.items[0].UI;
        Nav_3D.setHot();
    },

setHot:function(isHot){
        if(!this.prevHot)return;
        with(this.prevHot.style){
            borderColor=isHot!==false?'#CC0000':'#00CCFF';
            cursor=isHot!==false?'default':"pointer";
        };
        return this;
    },

    auto:function(){
        this.index--;
        if(this.index<0)this.index=this.items.length-1;
        var J=this.items[this.index];
        this.setHot(false).prevHot=J.UI;
        this.setHot();
        this.wheel_90(J);
    },

onEnd:function(hot){
        if(this.hover){
            return setTimeout(function(){Nav_3D.onEnd();},100);
        }
        this.autoTimer=setTimeout(function(){Nav_3D.auto();},1500);
    }

};
var imgs=document.getElementById("pics_3d").getElementsByTagName("IMG");
for (var i=0;i<imgs.length;i++ ) {
Nav_3D.add(new Item(imgs[i]))
}
Nav_3D.ready();

</script>
</html>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
代码来自：http://www.webdm.cn/webcode/021c961c-98d1-44b0-a6e6-1c9034755587.html

转载于:https://www.cnblogs.com/webdm/archive/2011/08/29/2157427.html

有空间感的图片环形滚动代码相关推荐

php图片左右滚动代码怎么写,css图片滚动代码怎么写？轮播图横向滚动展示
在日常工作中网页上的轮播图展示必不可少,那么对于刚入门的小白而言本篇文章关于css图片滚动代码的介绍更是浅显易懂.希望本篇文章对大家有所帮助. css图片滚动代码示例具体如下: css图片滚动代码示例 ...
html5图片向上滚动代码,图片上下滚动代码使用方法
图片上下滚动源代码: var speed=60 demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2 function Marquee(){ //当滚动至de ...
新闻分页循环图片左右滚动代码html,jQuery响应式触屏图片左右滚动代码owl.carousel...
这是一款基于owl.carousel.js和jquery-1.9.1.min.js实现的响应式左右滚动代码,自适应屏幕大小,响应式设计,完美兼容PC端和手机移动设备,支持触屏滑动效果,支持点击按钮切换 ...
dw自动滚动图片_DW图片无缝滚动代码
DIV 的图片无缝滚动 , DIV 图片上无缝滚动 , DIV 图片下无缝滚动 , DIV 图片左无缝滚动 , DIV 图片右无缝滚动 1. 先了解一下对象的几个的属性: innerHTML: 设置或 ...
【js特效】图片循环滚动代码
1.效果图如下: 2.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
html中图片连续滚动代码,[转载]网页设计中的图片连续滚动效果——代码
style="overflow:hidden;width:500px;"> border="0"> id="butong_net_left ...
html图片自动向左滚动代码,图片无缝滚动代码(向左/向下/向上)
想必大家都注意到的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放de ...
图片循环滚动代码(无缝滚动)
向上:程序代码 <div id=demo style="overflow:hidden; width:128px; height:300px;"> <div id ...
html网页图片自动滚动代码,实现网页图片循环滚动的代码上/下/左/右(html or asp)...
向上: href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/" ...

有空间感的图片环形滚动代码

有空间感的图片环形滚动代码相关推荐

最新文章

热门文章