TaoGOGO

欢迎您光临，这就是TaoGOGO的网络小窝！
php中header函数的参数说明集锦»
«我用Google Voice啦——可以免费打电话、发短信

左右拖动鼠标实现翻页的js

比较炫而且实用的JavaScript代码，可以实现用鼠标左右拖曳而翻页，兼容ie、火狐、opera，大家可以试试看。

效果如图：

-----------------------------------代码开始---------------------------------------- 

<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.taogogo.info>东方之珠</a></li>

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

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

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

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

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

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

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

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

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

 </ul>

</div>

<div>

 <ul>

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

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

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

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

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

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

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

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

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

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

 </ul>

</div>


<div>

 <ul>

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

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

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

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

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

 </ul>

</div>

</body>

</html>

 

-----------------------------------代码结束----------------------------------------

 

想收藏或者和大家分享这篇好文章→ 分享家:Addthis中国

相关阅读：

Tags: js 网页特效 |Comments:(13)|read:(403)

This entry was posted on October 12th, 2009 and is filed under web前端开发 .You can follow any responses to this entry through the rss2 feed.You can leave a response, or trackback from your own site.

13 to "左右拖动鼠标实现翻页的js"

  1. kangzj
    回复 # 77020
    2009-10-12 at 22:41

    这个肯定很炫，可以用在WordPress吗？

  2. Qing
    回复 # 78009
    2009-10-13 at 08:35

    js吗，放那都能用啊

  3. taogogo
    回复 # 77021
    2009-10-13 at 09:24

    这个不是真正意义上的翻页:-)用在不刷新的页面上比较好:-)可以用在AJAX评论翻页

  4. yanpeng
    回复 # 78010
    2009-10-13 at 17:27

    昨天到今天上午，ghs被盾了，貌似现在恢复了

  5. xuan
    回复 # 78011
    2009-10-13 at 18:25


    纯支持

  6. TaoGOGO
    回复 # 77023
    2009-10-14 at 12:29

    @xuan 多谢支持…
    @yanpeng 都快习惯了……o(∩_∩)o...

  7. 蛋王
    回复 # 77024
    2009-10-14 at 15:19

    以前见过，哈，纯路过了。。

  8. TaoGOGO
    回复 # 78013
    2009-10-15 at 09:32

    @蛋王 多谢路过……

  9. 博客杂志
    回复 # 78014
    2009-10-15 at 15:21

    你写的这文章很好。今天到访。，望回访。：》

  10. 90后的贼
    回复 # 77025
    2009-10-15 at 17:27

    纯做个沙发

  11. TaoGOGO
    回复 # 78015
    2009-10-15 at 23:00

    @博客杂志 繁体……以为是留言机呢
    @90后的贼 只剩下马扎了

  12. houkai
    回复 # 79004
    2009-10-20 at 17:41

    好东西 先收藏
    appspot 是不是时好时坏？！！

    应该gwf在屏蔽一些文章 如果谁打开一下 几分钟整个appspot就会打不开！！

  13. TaoGOGO
    回复 # 80006
    2009-10-21 at 12:20

    @houkai 现在我只用域名访问啊，还不了解是什么原因。反正我的一篇文章打开后整个博客会有一分钟无法访问的

 

Leave a Reply




请输入计算结果：8+1

:) lol 8) mrgreen evil arrow :( more »

Tao公告

一定要努力啊，要做生活的强者！不要懈怠！@2009.12.22

搜索

G Show!

最近留言

文章分类

标签云

[js] [php] [css] [linux] [flash] [js代码] [mysql] [免费] [ajax] [免费空间] [心情] [apache] [div] [html] [map] [图标消失] [域名] [搞笑] [爱情] [设计] [css sprites] [css特效] [dos] [dos命令] [email]

热门排行

Friend Connect


友情链接