鼠标左右拖曳翻页看书特效

作者：秋了秋发表时间：2014年09月16日

非常棒的翻页特效，只要开动点脑筋，可以把这一特效应用到很多网页上去，极具震撼读者眼球。

演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS打造的拖拽翻页效果</title> <style type="text/css"> *{margin:0;padding:0;} body{font-size:12px; overflow:hidden;} img{border:0;} li{list-style:none;} #drag{ width:682px; color:#fff; position:relative; margin:50px auto 0 auto; font-family:"Microsoft YaHei", "宋体"; } #drag ul{ } #drag ul li{ text-align:right; height:30px; line-height:30px; overflow:hidden; vertical-align:middle; font-size:14px; border-bottom:1px dashed #fff; } #drag ul li span{ float:right; } #drag ul li a{ float:left; color:#fff; text-decoration:none; } #drag div{ width:600px; height:350px; padding:40px; background:#77521d; cursor:e-resize; border:1px solid #999; position:absolute; left:0; top:0; } #drag div p{ width:100%; padding-bottom:20px; text-align:center; position:absolute; bottom:0; left:0; } </style> <script type="text/javascript"> window.onload=function() { var oDrag=document.getElementById('drag'); var aDiv=oDrag.getElementsByTagName('div'); var aLink=oDrag.getElementsByTagName('a'); var i=0; for(i=0;i<aDiv.length;i++) { aDiv[i].style.zIndex=(i+1); aDiv[i].innerHTML+='第 '+(i+1)+'/'+aDiv.length+' 页提示：左右拖拽翻页'; aDiv[i].onmousedown=drag; } for(i=0;i<aLink.length;i++) { aLink[i].onmousedown=function(ev) { var oEvent=ev||event; oEvent.stopPropagation?oEvent.stopPropagation():oEvent.cancelBubble=true; }; } }; function drag(ev) { var obj=this; var mouseStart=[]; var objStart=[]; var oEvent=ev||event; mouseStart.x=oEvent.clientX; objStart.x=this.offsetLeft; document.onmousemove=function(ev) { var oEvent=ev||event; var l=oEvent.clientX-mouseStart.x+objStart.x; var t=oEvent.clientY-mouseStart.y+objStart.y; obj.style.left=l+'px'; return false; }; document.onmouseup=function() { document.onmousemove=document.onmouseup=null; startMove(obj); }; return false; } function startMove(obj) { var oDrag=document.getElementById('drag'); var aDiv=oDrag.getElementsByTagName('div'); var iSpeed=0; obj.timer=setInterval(function(){ obj.onmousedown=null; obj.offsetLeft>=0?iSpeed+=10:iSpeed-=10; var l=obj.offsetLeft+iSpeed; if(l>obj.offsetWidth) { l=obj.offsetWidth; moveDirection(iSpeed); } else if(l<-obj.offsetWidth) { l=-obj.offsetWidth; moveDirection(iSpeed); } obj.style.left=l+'px'; },30); function moveDirection(iSpeed) { for(i=0;i<aDiv.length;i++) { aDiv[i].style.zIndex=parseInt(aDiv[i].style.zIndex)+1; if(aDiv[i]==obj) { obj.style.zIndex=parseInt(obj.style.zIndex)-aDiv.length; } } clearInterval(obj.timer); t=setInterval(function(){ obj.onmousedown=null; var l=obj.offsetLeft-iSpeed; if((iSpeed<0 && l>0) || (iSpeed>0 && l<0)) { l=0; clearInterval(t); obj.onmousedown=drag; } obj.style.left=l+'px'; },30); } } </script> </head> <body> <div id="drag"> <div> <ul> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">可关闭的右下角弹出广告特效代码</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">非常漂亮的网页秒表计时器</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">一款适用于放网站侧边栏的特效日历</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">日期选择表格快捷填充器特效</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">CSS3荷叶窗式切换的幻灯片特效</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">纯代码给wordpress制作二级多级菜单特效</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">js实现图片360度旋转特效</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">简洁纯css实现Lightbox特效</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">SEO不是全部，不要过度迷信SEO</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">资源分享俱乐部QQ群184139138</a></li> </ul> </div> <div> <ul> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">小评：（转载）不要把人生浪费在所谓的“正事”上</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">你是个成熟的人吗？-成熟的悟性标准</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">我不喜欢和别人比，也不喜欢别人拿我来比</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">非常轻巧的wordpress自适应双栏theme主题</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">一款免费高清屏幕游戏录像软件下载</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">为什么一些国外的网站被中国墙了</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">AutoCAD2007制图官方破解中文版免费下载</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">网站logo设计软件绿色版收费破解版下载</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">wordpress粉红双栏高仿腾讯EDC主题</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">wordpress小清新半透明响应式个人博客Alone主题源码</a></li> </ul> </div> <div> <ul> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">免费自适应teahouse宽屏优秀wordpress主题模板</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">善用site域名了解网站在百度的沙盒情况</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">看看害人的心灵鸡汤都是谁写的</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">为什么博客不更新的时候收录却大大提升</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">搜狗是一个“不一般”的搜索引擎</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">二级域名与思维开发 </a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">使元素在浏览器中通过div+css水平、垂直居中</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">本站正式开启手机端主题</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">wordpress安全防范之改密神器</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">emlog评论一键通，一键填写评论信息</a></li> </ul> </div> <div> <ul> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">彻底解决wordpress首页分页，文章分页标题重复</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">网页设计中需把握用户的时间心理效应</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">你网站的robots工作做足够了吗</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">如果我欠了你五块钱，请你告诉我</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">wordpress原生态分页添加第一页和最后一页</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">小评：（转载）不要把人生浪费在所谓的“正事”上</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">你是个成熟的人吗？-成熟的悟性标准</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">我不喜欢和别人比，也不喜欢别人拿我来比</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">非常轻巧的wordpress自适应双栏theme主题</a></li> <li>2014-4-9 12:35<a target="_blank" href="//netblog.cn/blog/116.html">一款免费高清屏幕游戏录像软件下载</a></li> </ul> </div> </div> </body> </html>

提示：可以先修改部分代码再运行

文章作者： “秋了秋”个人博客，本站鼓励原创。

转载请注明本文地址：http://netblog.cn/blog/117.html

目录: 网页特效标签: 左右拖曳翻页特效 16681次阅读

鼠标左右拖曳翻页看书特效

作者：秋了秋 发表时间：2014年09月16日

作者：秋了秋发表时间：2014年09月16日