首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

休闲生活文化

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jquery的内容循环滚动小模块（仿新浪微博未登录首页滚动微博显示）
Mar 28 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
通过webpack引入第三方库的方法
Jul 20 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
vuex(1) Vue(10) OutputStream(1) Set接口(1) axios(1) Vue3(1) HashSet集合(1) persistedstate(1) Storage(1) InputStream(1)
You might like
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
PHP 数组实例说明
2008/08/18 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
php获取指定(访客)IP所有信息（地址、邮政编码、国家、经纬度等）的方法
2015/07/06 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
javascript 类型判断代码分析
2010/03/28 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
python中正则的使用指南
2016/12/04 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Python中的支持向量机SVM的使用（附实例代码）
2019/06/26 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
如何用python处理excel表格
2020/06/09 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
使用索引有什么好处
2016/07/27 面试题
实习单位推荐信范文
2013/11/27 职场文书
中秋客户感谢信
2015/01/22 职场文书
考试作弊检讨书
2015/01/27 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
Python实现视频自动打码的示例代码
2022/04/08 Python
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers