Example of drag paging effect implemented by JS CSS_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Example of drag paging effect implemented by JS CSS_javascript skills

May 16, 2016 pm 03:59 PM

css js Pagination drag

The example in this article describes the method of using JS CSS to achieve the drag paging effect. Share it with everyone for your reference. The specific implementation method is as follows:

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;拖动分页&lt;/title&gt;
&lt;meta http-equiv=Content-Type content="text/html; charset=utf-8"&gt;
&lt;style&gt;
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;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body onselectstart="return false;"&gt;
&lt;script&gt;
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&gt;0){
page[0].style.zIndex=2;
}
for(i=0;i&lt;page.length;i++){
page[i].className="page";
page[i].innerHTML+="&lt;span class=\"tip\"&gt;第 "+(i+1)+"/"+page.length+" 页 提示：左右拖拽翻页&lt;/span&gt;";
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&lt;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&gt;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&lt;75){
if( (obj.offsetLeft + 350 - 20) &gt; -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&gt;75){
if( (obj.offsetLeft + 350 + 20) &lt; 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&lt;75){
if( (obj.offsetLeft + 350 + 20) &lt; 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&gt;75){
if( (obj.offsetLeft + 350 - 20) &gt; 425 ){
obj.style.left=obj.offsetLeft + 350 - 20;
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}else{
obj.style.left=425;
en=false;
}
}
}
&lt;/script&gt;
&lt;div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;东方之珠&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;啊！爱人&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;宁静温泉&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;你的样子&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;恋曲1980&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;恋曲1980&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;恋曲2000&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;亚细亚的孤儿&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;童年&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;弹唱词&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;飞车&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;东方之珠&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;滚滚红尘&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;光阴的故事&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;之乎者也&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;现象七十二变&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;乡愁四韵&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;穿过你的黑发我的手&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;大兵歌&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;黄色面孔&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;2009-4-29 02:16&lt;/span&gt;&lt;a href=#&gt;台北红玫瑰&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn