javascript实现炫酷的拖动分页


Posted in Javascript onMay 11, 2015

javascript实现炫酷的拖动分页

js

<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)?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>

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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
JSQL 批量图片切换的实现代码
May 05 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
JS+CSS实现的拖动分页效果实例
May 11 #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
You might like
php的ajax简单实例
2014/02/27 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
详解Python中DOM方法的动态性
2015/04/11 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
机电专业毕业生求职信
2013/10/27 职场文书
机械设计及其自动化专业推荐信
2013/10/31 职场文书
理工大学毕业生自荐信
2013/11/01 职场文书
信息技术专业个人自我评价
2013/12/11 职场文书
药学专业大专生的自我评价
2013/12/12 职场文书
临床护士自荐信
2014/01/31 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
产品推广策划方案
2014/05/10 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
财务统计员岗位职责
2015/04/14 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
高三物理教学反思
2016/02/20 职场文书