一个非常酷的鼠标拖曳翻页效果。

最新推荐文章于 2023-07-09 12:09:52 发布
最新推荐文章于 2023-07-09 12:09:52 发布
阅读量252 收藏
点赞数
分类专栏： JavaScript 文章标签： function web开发 border float class div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu_zhongjie/article/details/4496379
版权

<html>
<head>
<title>阿里西西_Web开发</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.οnlοad=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].οnmοusedοwn=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].οnmοusemοve=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].οnmοuseup=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.alixixi.com">阿里西西</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">啊！停不住的爱人</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">宁静温泉</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">你的样子</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">恋曲1980</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">恋曲1990</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">恋曲2000</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">亚细亚的孤儿</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">伴侣</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">童年</a></li>
 </ul>
</div>
<div>
 <ul>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">Web开发之家</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">爱人同志</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">思念</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">母亲</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">是否</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">牧童</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">青春舞曲</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">蒲公英</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">未来的主人翁</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">如今才是唯一</a></li>
 </ul>
</div>
<div>
 <ul>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">Alixixi.com</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">弹唱词</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">飞车</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">东方之珠</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">滚滚红尘</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">光阴的故事</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">之乎者也</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">现象七十二变</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">乡愁四韵</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">穿过你的黑发我的手</a></li>
 </ul>
</div>
<div>
 <ul>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">欢迎访问阿里西西</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">歌</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">黄色面孔</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">台北红玫瑰</a></li>
  <li><span>2009-4-9 12:35</span><a href="http://www.alixixi.com">我所不能了解的事</a></li>
 </ul>
</div>
</body>
</html>

liu_zhongjie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
h5滚动时侧滑出现_HTML5移动端触摸事件以及滑动翻页效果
weixin_29137489的博客
01-15 805
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息...
Javascript实现拖拽效果
qq_61716556的博客
05-09 943
我们执行拖拽操作时， 1.按住某元素 2.移动鼠标 3.移动鼠标到相应位置后松开鼠标 基于以上操作，页面拖拽效果需要三个事件 onmousedown onmousemove onmouseup 在onmousedown事件中，我们需要定义函数表明，该元素被按住，即将进行移动操作，需要计算x坐标值，并触发后续的onmousemove事件。 在onmousemove事件中，我们需要计算元素坐标位置，根据鼠标移动改变元素位置，准备执行鼠标松开时的事件函数。 在onmouseup事件中，我们需要以
让键盘代替鼠标
aqns80581的博客
11-17 439
自己看:在“开始”菜单上选择“设置”，“控制面板”，在“控制面板”上双击“辅助选项”图标，单击“鼠标器”标签，然后单击“使用鼠标键”。这样就可以用键盘来控制鼠标的光标，模拟鼠标的鼠标键都指键盘右侧的小键盘（数字键盘），使用时要使NumLock 键处于有效状态。以下就是鼠标键： 移动 8、2、4、6、7、9、1、3键，八个方位 长距离移动 Ctrl+以上八个键 ...
Qt/C++原创项目作品精选（祖传原创/性能凶残/界面精美）
最新发布
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
07-09 1万+
从事Qt开发十年有余，一开始是做C#.NET开发的，因为项目需要，转行做嵌入式linux开发，在嵌入式linux上做可视化界面开发一般首选Qt，当然现在可选的方案很多比如安卓，但是十多年前那时候板子性能低，安卓在这个上面跑的话卡成屎，当时的内存大概是128MB左右，Qt也是主要用QWidget，刚出来的qml在这个上面跑个最简单的示例也是卡成屎，这也造成了本人一直对qml的印象不大好，非常依赖GPU硬件。
鼠标术语详解
编程爱好者
02-22 3836
产品类型其实鼠标并不象其它配件那样对此有严格的区别，基本上什么类型的电脑主机都能使用相同的鼠标实现最基本的鼠标功能。但是各种电脑主机因为其用途不同对鼠标也就有着不同方面的基本要求，    例如笔记本主要要求鼠标外型小巧，方便携带；游戏型鼠标要求鼠标具有高性能，也就是要有比较高的分辨率和刷新率，在游戏中快速或加速移动鼠标时的准确定位，并且要有良好的人体工学设计以满足长时间使用的需求。  
鼠标键盘
蹒跚学步的人的专栏
06-06 604
在“开始”菜单上选择“设置”，“控制面板”，在“控制面板”上双击“辅助选项”图标，单击“鼠标器”标签，然后单击“使用”。这样就可以用键盘来控制鼠标的光标，模拟鼠标的鼠标键都指键盘右侧的小键盘（数字键盘），使用时要使NumLock 键处于有效状态。以下就是鼠标键： 移动 8、2、4、6、7、9、1、3键，八个方位 长距离移动 Ctrl+以上八个键 选鼠标左键 / 选鼠标右键 — 单击 5 双击 +
电脑常用快捷键大全（含Visual Studio快捷键操作）
流楚丶格念的博客
02-18 5411
目录 一、系统快捷键 二、常用系统命令 三、QQ快捷键 四、IE浏览器快捷键使用大全 五、Word 中的快捷键 六、Excel 中的快捷键 七、PowerPoint 中的快捷键 八、Visual Studio 九、Eclipse 十、Photoshop 十一、批处理指令 十二、安装操作系统 （此快捷操作对我们程序员十分重要，所以放在前面） 八、Visual Studio 8.1、项目相关的快捷键 ...
Linux就是这个范儿之第一次亲密接触(3)
xiaolu的专栏
03-29 729
1.4 返璞归真的命令行 有一种说法，现代计算机不是靠电力驱动，而是靠“鼠标”。多少应用程序的界面需要移动和点击鼠标来执行的。计算机本来的用意是把人类从反复单调的工作中解放出来，但适得其反，摆在我们身边的残酷现实是我们每个人每天不得不移动和点击鼠标，确保养家糊口的工作能够顺利正确地完成。 别叹气，存在另一个世界，那就是命令行，让你暂时远离鼠标。对那些苦哈哈的程序猿来讲，这也许是
XP的140个技巧（转）
cuankuangzhong6373的博客
05-28 473
1. 重装Windows XP不需再激活 　　如果你需要重装Windows XP，通常必须重新激活。事实上只要在第一次激活时，备份好WindowsSystem32目录中的Wpa.dbl文件，就不用再进行激活的工作了。在重装Win...
一个简单的鼠标拖曳图层效果
04-09
一个简单的鼠标拖曳图层效果，简单JS代码实现的鼠标拖曳图层效果，比较精简，大家参考一下。
JS实现可展开折叠层的鼠标拖曳效果
10-23
主要介绍了JS实现可展开折叠层的鼠标拖曳效果,具有展开折叠层及实时显示鼠标坐标位置的功能,具有一定参考借鉴价值,需要的朋友可以参考下
过滤事件_鼠标拖曳显示波形
04-02
过滤事件_鼠标拖曳显示波形.rar 介绍了关于过滤事件_鼠标拖曳显示波形的详细说明，提供其它知识的技术资料的下载。
动态注册事件_鼠标拖曳
04-02
动态注册事件_鼠标拖曳.rar 介绍了关于动态注册事件_鼠标拖曳的详细说明，提供其它知识的技术资料的下载。
拖曳翻页代码
03-14
拖曳翻页代码，本人已经测试过，代码简洁、易懂
script刷新页面,刷新代码,页面自动刷新代码
liu_zhongjie的专栏
11-19 3903
 页面自动刷新代码大全，基本上所有要求自动刷新页面的代码都有，大家可以自由发挥做出完美的页面。 1)10表示间隔10秒刷新一次2)window.location.reload(true);如果是你要刷新某一个iframe就把window给换成frame的名字或ID号3)window.navigate("本页面url");4>function abc(){window.loc
js获取屏幕尺寸、网页可见区域、网页正文、屏幕分辨率
liu_zhongjie的专栏
11-27 887
<!-- var newasp_fontsize=9; var newasp_lineheight=12; //--> 8){NewsContentLabel.style.fontSize=(--newasp_fontsize)+"pt";NewsCo
JS幻灯图片效果
liu_zhongjie的专栏
05-11 691
幻灯图片切换var n=0;说明:默认系统对function不执行,除非触发了一个事件.因此以下function不执行,找到不是function的语句先 function Mea(value){ n=value; plays(value); }4.Mea(value)也就相当于Mea(1),value=1,然后 plays(value);也就是 plays(1);找出pla
JavaScript图片特效
liu_zhongjie的专栏
08-31 632
http://www.w3.org/TR/html4/strict.dtd">JavaScript图片特效 html {  overflow: hidden; } body {  position: absolute;  margin: 0px;  padding: 0px;  background: #111;  width: 100%;  height: 100%; } #screen {  
js对话框鼠标拖曳效果
05-26
可以通过以下步骤实现JS对话框鼠标拖曳效果： 1. 定义一个变量`dragging`，用于表示当前是否正在拖动对话框。 2. 监听对话框的mousedown事件，当鼠标按下时，设置`dragging`为`true`，并记录下鼠标位置和对话框...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值