1顶

非常酷的鼠标拖拽翻页效果

稿源：互联网 2022-06-18 02:34:32 点击： 1863 撤稿纠错

非常酷的鼠标拖拽翻页效果，值得收藏。

以下讨论的是和相关的非常酷的鼠标拖拽翻页效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html>
<head>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>非常酷的鼠标拖拽翻页效果，zzjs整理收集，站长特效网欢迎您。</title>
<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;">
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<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+="第 "+(i+1)+"/"+page.length+" 页 提示：左右拖拽翻页";
 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);
 }
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 }
 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;
 }
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 }
 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));
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 }
}
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;
 }
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 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>2009-4-9 12:35<a href="http://www.zzjs.net">站长特效网</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">啊！停不住的爱人</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">宁静温泉</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">你的样子</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net/?cat=3">恋曲1980</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">恋曲1990</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net/?cat=3">恋曲2000</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">亚细亚的孤儿</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">伴侣</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">童年</a></li>
 </ul>
</div>
<div>
 <ul>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">站长特效网</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">爱人同志</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">思念</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">母亲</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">是否</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net/?cat=5">牧童</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">青春舞曲</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">蒲公英</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">未来的主人翁</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">如今才是唯一</a></li>
 </ul>
</div>
<div>
 <ul>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">zzjs.net</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">弹唱词</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">飞车</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net/?cat=1">东方之珠</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net/?cat=3">滚滚红尘</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">光阴的故事</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net/?cat=3">之乎者也</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">现象七十二变</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">乡愁四韵</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">穿过你的黑发我的手</a></li>
 </ul>
</div>
<div>
 <ul>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">站长特效网</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">歌</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net/?cat=3">黄色面孔</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">台北红玫瑰</a></li>
 <li>2009-4-9 12:35<a href="http://www.zzjs.net">我所不能了解的事</a></li>
 </ul>
</div>
</body>
</html>

关于非常酷的鼠标拖拽翻页效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016297362345.shtml方便下次再访问哦。

·上一篇： 屏蔽鼠标右键js脚本
·下一篇： 一个简单的鼠标经过变色效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

非常酷的鼠标拖拽翻页效果

文章分类LIST >>返回首页

最新游戏

最新新闻