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的一个浮动框(扩展性比较好 )
Aug 27 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
JS实现php的伪分页
2008/05/25 PHP
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
聊聊Python中的pypy
2018/01/12 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
电子专业求职信
2014/06/19 职场文书
保留意见审计报告
2015/06/05 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python