当前位置：A5下载 > 编程开发 > 网站开发 > JS实现的3D拖拽翻页效果代码

JS实现的3D拖拽翻页效果代码

时间：2015-11-01 11:32作者：fang人气：269

本文实例讲述了JS实现的3D拖拽翻页效果。分享给大家供大家参考，具体如下：

以前看到一个很火的帖子，拖拽实现的翻页效果，非常的有创意，自己也很喜欢，于是乎就萌发了用自己的方法模仿的想法。感谢原创作者的创意，结果一样，但过程不一样哦。奉上代码，供大家参考。
运行效果截图如下：

JS实现的3D拖拽翻页效果代码

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

*{margin:0;padding:0;}

body{font-size:12px; overflow:hidden;}

img{border:0;}

li{list-style:none;}

#drag{

width:682px;

color:#fff;

position:relative;

margin:50px auto 0 auto;

font-family:"Microsoft YaHei", "宋体";

}

#drag ul{

}

#drag ul li{

text-align:right;

height:30px;

line-height:30px;

overflow:hidden;

vertical-align:middle;

font-size:14px;

border-bottom:1px dashed #fff;

}

#drag ul li span{

float:right;

}

#drag ul li a{

float:left;

color:#fff;

text-decoration:none;

}

#drag div{

width:600px;

height:350px;

padding:40px;

background:#77521d;

cursor:e-resize;

border:1px solid #999;

position:absolute;

left:0;

top:0;

}

#drag div p{

width:100%;

padding-bottom:20px;

text-align:center;

position:absolute;

bottom:0;

left:0;

}

</style>

window.onload=function()

{

var oDrag=document.getElementById('drag');

var aDiv=oDrag.getElementsByTagName('div');

var aLink=oDrag.getElementsByTagName('a');

var i=0;

for(i=0;i<aDiv.length;i++)

{

aDiv[i].style.zIndex=(i+1);

aDiv[i].innerHTML+='第 '+(i+1)+'/'+aDiv.length+' 页提示：左右拖拽翻页';

aDiv[i].onmousedown=drag;

}

for(i=0;i<aLink.length;i++)

{

aLink[i].onmousedown=function(ev)

{

var oEvent=ev||event;

oEvent.stopPropagation?oEvent.stopPropagation():oEvent.cancelBubble=true;

};

}

};

function drag(ev)

{

var obj=this;

var mouseStart=[];

var objStart=[];

var oEvent=ev||event;

mouseStart.x=oEvent.clientX;

objStart.x=this.offsetLeft;

document.onmousemove=function(ev)

{

var oEvent=ev||event;

var l=oEvent.clientX-mouseStart.x+objStart.x;

var t=oEvent.clientY-mouseStart.y+objStart.y;

obj.style.left=l+'px';

return false;

};

document.onmouseup=function()

{

document.onmousemove=document.onmouseup=null;

startMove(obj);

};

return false;

}

function startMove(obj)

{

var oDrag=document.getElementById('drag');

var aDiv=oDrag.getElementsByTagName('div');

var iSpeed=0;

obj.timer=setInterval(function(){

obj.onmousedown=null;

obj.offsetLeft>=0?iSpeed+=10:iSpeed-=10;

var l=obj.offsetLeft+iSpeed;

if(l>obj.offsetWidth)

{

l=obj.offsetWidth;

moveDirection(iSpeed);

}

else if(l<-obj.offsetWidth)

{

l=-obj.offsetWidth;

moveDirection(iSpeed);

}

obj.style.left=l+'px';

},30);

function moveDirection(iSpeed)

{

for(i=0;i<aDiv.length;i++)

{

aDiv[i].style.zIndex=parseInt(aDiv[i].style.zIndex)+1;

if(aDiv[i]==obj)

{

obj.style.zIndex=parseInt(obj.style.zIndex)-aDiv.length;

}

clearInterval(obj.timer);

t=setInterval(function(){

obj.onmousedown=null;

var l=obj.offsetLeft-iSpeed;

if((iSpeed<0 && l>0) || (iSpeed>0 && l<0))

{

l=0;

clearInterval(t);

obj.onmousedown=drag;

}

obj.style.left=l+'px';

},30);

}

</script>

</head>

<body>

<div>

<ul>

<li>2009-4-9 12:35<a target="_blank" href="#">亚细亚的孤儿</a></li>

</ul>

</div>

<div>

<ul>

<li>2009-4-9 12:35<a target="_blank" href="#">未来的主人翁</a></li>

<li>2009-4-9 12:35<a target="_blank" href="#">如今才是唯一</a></li>

</ul>

</div>

<div>

<ul>

<li>2009-4-9 12:35<a target="_blank" href="#">光阴的故事</a></li>

<li>2009-4-9 12:35<a target="_blank" href="#">现象七十二变</a></li>

<li>2009-4-9 12:35<a target="_blank" href="#">穿过你的黑发我的手</a></li>

</ul>

</div>

<div>

<ul>

<li>2009-4-9 12:35<a target="_blank" href="#">台北红玫瑰</a></li>

<li>2009-4-9 12:35<a target="_blank" href="#">我所不能了解的事</a></li>

</ul>

</div>

</body>

</html>

希望本文所述对大家JavaScript程序设计有所帮助。

标签实现,拖拽,翻页,效果,代码,本文,实例,讲述了,实现,拖拽

A5站长下载站

JS实现的3D拖拽翻页效果代码

相关推荐

相关下载

网友评论

热门阅览

最新排行