学习啦>学习电脑>电脑硬件知识>键盘鼠标>《js实现鼠标拖拽翻页效果》正文

js实现鼠标拖拽翻页效果

时间:2016-12-01 18:12:17本文内容及图片来源于读者投稿,如有侵权请联系xuexila888@qq.com 沈迪豪 我要投稿

  学习前端的同学你们知道怎么实现js鼠标拖拽翻页效果吗?不知道的话跟着学习啦小编一起来学习了解js鼠标拖拽翻页效果的方法。

  js鼠标拖拽翻页效果的方法

  <html>

  <head>

  <title>blog</title>

  <meta http-equiv=content-type content="text/html; charset=gb2312">

  <style>

  body{

  border:0px;

  margin:0px;

  overflow:hidden;

  background-color:transparent;

  font-family:宋体;

  }

  .page{

  position:absolute;

  width:700px;

  border:1px solid #999;

  background-color:#000;

  left:425px;

  margin-left:-350px;

  cursor:default;

  z-index:0;

  }

  ul{

  height:320px;

  list-style:none;

  margin:40px 50px 0px;

  padding:0px;

  }

  li{

  width:100%;

  height:30px;

  line-height:30px;

  font-size:14px;

  text-align:left;

  border-bottom:1px dashed #999;

  }

  a{

  text-decoration:none;

  color:#999;

  }

  a:hover{

  font-weight:bold;

  }

  li span{

  float:right;

  color:#999;

  }

  .tip{

  display:block;

  width:100%;

  font-size:12px;

  color:#999;

  text-align:center;

  margin:10px 0px 20px;

  }

  </style>

  </head>

  <body onselectstart="return false;">

  <script>

  function id(obj){

  return document.getElementById(obj);

  }

  var page;

  var lm,mx;

  var md=false;

  var sh=0;

  var en=false;

  window.onload=function(){

  page=document.getElementsByTagName("div");

  if(page.length>0){

  page[0].style.zIndex=2;

  }

  for(i=0;i<page.length;i++){

  page[i].className="page";

  page[i].innerHTML+="<span class=tip>第 "+(i+1)+"/"+page.length+" 页 提示:左右拖拽翻页</span>";

  page[i].id="page"+i;

  page[i].i=i;

  page[i].onmousedown=function(e){

  if(!en){

  if(!e){e=e||window.event;}

  lm=this.offsetLeft;

  mx=(e.pageX)?e.pageX:e.x;

  this.style.cursor="w-resize";

  md=true;

  if(document.all){

  this.setCapture();

  }else{

  window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

  }

  }

  }

  page[i].onmousemove=function(e){

  if(md){

  en=true;

  if(!e){e=e||window.event;}

  var ex=(e.pageX)?e.pageX:e.x;

  this.style.left=ex-(mx-lm)+350;

  if(this.offsetLeft<75){

  var cu=(this.i==0)?page.length-1:this.i-1;

  page[sh].style.zIndex=0;

  page[cu].style.zIndex=1;

  this.style.zIndex=2;

  sh=cu;

  }

  if(this.offsetLeft>75){

  var cu=(this.i==page.length-1)?0:this.i+1;

  page[sh].style.zIndex=0;

  page[cu].style.zIndex=1;

  this.style.zIndex=2;

  sh=cu;

  }

  }

  }

  page[i].onmouseup=function(){

  this.style.cursor="default";

  md=false;

  if(document.all){

  this.releaseCapture();

  }else{

  window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);

  }

  flyout(this);

  }

  }

  }

  function flyout(obj){

  if(obj.offsetLeft<75){

  if( (obj.offsetLeft + 350 - 20) > -275 ){

  obj.style.left=obj.offsetLeft + 350 - 20;

  window.setTimeout("flyout(id('"+obj.id+"'));",0);

  }else{

  obj.style.left=-275;

  obj.style.zIndex=0;

  flyin(id(obj.id));

  }

  }

  if(obj.offsetLeft>75){

  if( (obj.offsetLeft + 350 + 20) < 1125 ){

  obj.style.left=obj.offsetLeft + 350 + 20;

  window.setTimeout("flyout(id('"+obj.id+"'));",0);

  }else{

  obj.style.left=1125;

  obj.style.zIndex=0;

  flyin(id(obj.id));

  }

  }

  }

  function flyin(obj){

  if(obj.offsetLeft<75){

  if( (obj.offsetLeft + 350 + 20) < 425 ){

  obj.style.left=obj.offsetLeft + 350 + 20;

  window.setTimeout("flyin(id('"+obj.id+"'));",0);

  }else{

  obj.style.left=425;

  en=false;

  }

  }

  if(obj.offsetLeft>75){

  if( (obj.offsetLeft + 350 - 20) > 425 ){

  obj.style.left=obj.offsetLeft + 350 - 20;

  window.setTimeout("flyin(id('"+obj.id+"'));",0);

  }else{

  obj.style.left=425;

  en=false;

  }

  }

  }

  </script>

  <div>

  <ul>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>东方之珠</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>啊!停不住的爱人</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>宁静温泉</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>你的样子</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>恋曲1980</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>恋曲1990</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>恋曲2000</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>亚细亚的孤儿</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>伴侣</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>童年</a></li>

  </ul>

  </div>

  <div>

  <ul>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>爱的箴言</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>爱人同志</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>思念</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>母亲</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>是否</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>牧童</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>青春舞曲</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>蒲公英</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>未来的主人翁</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>如今才是唯一</a></li>

  </ul>

  </div>

  <div>

  <ul>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>暗恋</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>弹唱词</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>飞车</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>东方之珠</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>滚滚红尘</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>光阴的故事</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>之乎者也</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>现象七十二变</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>乡愁四韵</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>穿过你的黑发我的手</a></li>

  </ul>

  </div>

  <div>

  <ul>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>大兵歌</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>歌</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>黄色面孔</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>台北红玫瑰</a></li>

  <li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>我所不能了解的事</a></li>

  </ul>

  </div>

  </body>

  </html>

js实现鼠标拖拽翻页效果相关文章:

1.怎么用js实现简单鼠标跟随效果

2.怎么实现js跨浏览器获取鼠标按键的值

3.怎么用JS实现鼠标单击与双击事件共存

4.使用js实现鼠标点击变色

5.js实现鼠标移到图片显示文字

6.怎么实现js统计鼠标点击次数

Copyright @ 2006 - 2018 学习啦 All Rights Reserved

学习啦 版权所有 粤ICP备15032933号-1

我们采用的作品包括内容和图片全部来源于网络用户和读者投稿,我们不确定投稿用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的权利,请联系:xuexila888@qq.com,我站将及时删除。

学习啦 学习啦

回到顶部