JS+CSS实现的拖动分页效果实例


Posted in Javascript onMay 11, 2015

本文实例讲述了JS+CSS实现拖动分页效果的方法。分享给大家供大家参考。具体实现方法如下:

<html>
<head>
<title>拖动分页</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<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)?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-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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
取得父标签
Nov 14 Javascript
jQuery MD5加密实现代码
Mar 15 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
浅谈jQuery构造函数分析
May 11 #Javascript
在JavaScript中正确引用bind方法的应用
May 11 #Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 #Javascript
javascript实现验证IP地址等相关信息代码
May 10 #Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 #Javascript
javascript实现获取字符串hash值
May 10 #Javascript
Javascript实现计算个人所得税
May 10 #Javascript
You might like
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
原生js实现日历效果
2020/03/02 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
python列表操作实例
2015/01/14 Python
在Python的循环体中使用else语句的方法
2015/03/30 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Python星号*与**用法分析
2018/02/02 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
Python面向对象程序设计示例小结
2019/01/30 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
CNC数控操作工岗位职责
2013/11/19 职场文书
公司司机岗位职责
2014/02/07 职场文书
英语国培研修感言
2014/02/13 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书