Heim >Web-Frontend >js-Tutorial >JavaScript implementiert coole Drag-Paging_Javascript-Fähigkeiten

JavaScript implementiert coole Drag-Paging_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:59:501411Durchsuche

Javascript implementiert cooles Drag-Paging

<html>
<head>
<title>拖动分页</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<style>
body{
border:0px;
margin:0px;
overflow:hidden;
background-color:transparent;
}
.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)&#63;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)&#63;e.pageX:e.x;
this.style.left=ex-(mx-lm)+350;
if(this.offsetLeft<75){
var cu=(this.i==0)&#63;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)&#63;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>

html:

<div>
<ul>
<li><span>2009-4-29 02:16</span><a href=#>东方之珠</a></li>
<li><span>2009-4-29 02:16</span><a href=#>啊！爱人</a></li>
<li><span>2009-4-29 02:16</span><a href=#>宁静温泉</a></li>
<li><span>2009-4-29 02:16</span><a href=#>你的样子</a></li>
<li><span>2009-4-29 02:16</span><a href=#>恋曲1980</a></li>
<li><span>2009-4-29 02:16</span><a href=#>恋曲1980</a></li>
<li><span>2009-4-29 02:16</span><a href=#>恋曲2000</a></li>
<li><span>2009-4-29 02:16</span><a href=#>亚细亚的孤儿</a></li>
<li><span>2009-4-29 02:16</span><a href=#>童年</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-29 02:16</span><a href=#>弹唱词</a></li>
<li><span>2009-4-29 02:16</span><a href=#>飞车</a></li>
<li><span>2009-4-29 02:16</span><a href=#>东方之珠</a></li>
<li><span>2009-4-29 02:16</span><a href=#>滚滚红尘</a></li>
<li><span>2009-4-29 02:16</span><a href=#>光阴的故事</a></li>
<li><span>2009-4-29 02:16</span><a href=#>之乎者也</a></li>
<li><span>2009-4-29 02:16</span><a href=#>现象七十二变</a></li>
<li><span>2009-4-29 02:16</span><a href=#>乡愁四韵</a></li>
<li><span>2009-4-29 02:16</span><a href=#>穿过你的黑发我的手</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-29 02:16</span><a href=#>大兵歌</a></li>
<li><span>2009-4-29 02:16</span><a href=#>黄色面孔</a></li>
<li><span>2009-4-29 02:16</span><a href=#>台北红玫瑰</a></li>
</ul>
</div>
</body>
</html>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js-Methode zum Implementieren einer Eingabeaufforderungsebene, wenn sich die Maus über den Link text_javascript skills bewegtNächster Artikel：js-Methode zum Implementieren einer Eingabeaufforderungsebene, wenn sich die Maus über den Link text_javascript skills bewegt

In Verbindung stehende Artikel

Mehr sehen