Kod kesan seret dan lepas halaman 3D yang dilaksanakan oleh kemahiran JS

Kod kesan seret dan lepas halaman 3D yang dilaksanakan oleh kemahiran JS_javascript

WBOY

Lepaskan： 2016-05-16 15:34:19

asal

1264 orang telah melayarinya

Contoh dalam artikel ini menerangkan kesan seret dan lepas halaman 3D yang dilaksanakan oleh JS. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Saya melihat siaran yang sangat popular sebelum ini, dan kesan perubahan halaman yang dicapai dengan menyeret adalah sangat kreatif, dan saya sangat menyukainya, jadi saya mendapat idea untuk menirunya dengan cara saya sendiri. Terima kasih kepada penulis asal kerana kreativitinya, hasilnya sama, tetapi prosesnya berbeza. Kod disediakan untuk rujukan anda.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-3d-drag-page-style-codes/

Kod khusus adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖拽翻页</title>
<style type="text/css">
*{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>
<script type="text/javascript">
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+='<p>第 '+(i+1)+'/'+aDiv.length+' 页 提示：左右拖拽翻页</p>';
  aDiv[i].onmousedown=drag;
 }
 for(i=0;i<aLink.length;i++)
 {
  aLink[i].onmousedown=function(ev)
  {
   var oEvent=ev||event;
   oEvent.stopPropagation&#63;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&#63;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 id="drag">
 <div>
  <ul>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">东方之珠</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">啊！爱人</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">宁静温泉</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">你的样子</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">恋曲1980</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">恋曲1990</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">恋曲2000</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">亚细亚的孤儿</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">伴侣</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">童年</a></li>
  </ul>
 </div>
 <div>
  <ul>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">爱的箴言</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">爱人同志</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">思念</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">母亲</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">是否</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">牧童</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">青春舞曲</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">蒲公英</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">未来的主人翁</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">如今才是唯一</a></li>
  </ul>
 </div>
 <div>
  <ul>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">暗恋</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">弹唱词</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">飞车</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">东方之珠</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">滚滚红尘</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">光阴的故事</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">之乎者也</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">现象七十二变</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">乡愁四韵</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">穿过你的黑发我的手</a></li>
  </ul>
 </div>
 <div>
  <ul>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">大兵歌</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">歌</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">黄色面孔</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">台北红玫瑰</a></li>
   <li><span>2009-4-9 12:35</span><a target="_blank" href="#">我所不能了解的事</a></li>
  </ul>
 </div>
</div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.