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 相关文章推荐
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
JQuery for与each性能比较分析
May 14 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
理解javascript中的严格模式
Feb 01 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 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安全配置
2006/10/09 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
JS回调函数深入理解
2019/10/16 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
python可视化实现代码
2019/01/15 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python pillow库的基础使用教程
2021/01/13 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
施工资料员岗位职责
2014/01/06 职场文书
电影开国大典观后感
2015/06/04 职场文书
作文之亲情600字
2019/09/23 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL