html鼠标拖动翻页 JS实现的3D拖拽翻页效果代码

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

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

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

拖拽翻页

*{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;

}

window.οnlοad=function()

{

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

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

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

var i=0;

for(i=0;i

{

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

aDiv[i].innerHTML+='

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

';

aDiv[i].οnmοusedοwn=drag;

}

for(i=0;i

{

aLink[i].οnmοusedοwn=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.οnmοusemοve=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.οnmοuseup=function()

{

document.οnmοusemοve=document.οnmοuseup=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.οnmοusedοwn=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

{

l=-obj.offsetWidth;

moveDirection(iSpeed);

}

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

},30);

function moveDirection(iSpeed)

{

for(i=0;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.οnmοusedοwn=null;

var l=obj.offsetLeft-iSpeed;

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

{

l=0;

clearInterval(t);

obj.οnmοusedοwn=drag;

}

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

},30);

}

}

-4-9 12:35东方之珠-4-9 12:35啊！爱人-4-9 12:35宁静温泉-4-9 12:35你的样子-4-9 12:35恋曲1980-4-9 12:35恋曲1990-4-9 12:35恋曲2000-4-9 12:35亚细亚的孤儿-4-9 12:35伴侣-4-9 12:35童年 -4-9 12:35爱的箴言-4-9 12:35爱人同志-4-9 12:35思念-4-9 12:35母亲-4-9 12:35是否-4-9 12:35牧童-4-9 12:35青春舞曲-4-9 12:35蒲公英-4-9 12:35未来的主人翁-4-9 12:35如今才是唯一 -4-9 12:35暗恋-4-9 12:35弹唱词-4-9 12:35飞车-4-9 12:35东方之珠-4-9 12:35滚滚红尘-4-9 12:35光阴的故事-4-9 12:35之乎者也-4-9 12:35现象七十二变-4-9 12:35乡愁四韵-4-9 12:35穿过你的黑发我的手 -4-9 12:35大兵歌-4-9 12:35歌-4-9 12:35黄色面孔-4-9 12:35台北红玫瑰-4-9 12:35我所不能了解的事

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