教程集 > 脚本编程 > javascript > 正文 javascript div 可拖曳翻页效果

javascript div 可拖曳翻页效果

发布时间：2017-04-18 编辑：jiaochengji.com

教程集为您提供javascript div 可拖曳翻页效果等资源，欢迎您收藏本站，我们将为您提供最新的javascript div 可拖曳翻页效果资源

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

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> html,body{ width:100%; height:100%; border:0px; margin:0px; overflow:hidden; } #menu{ width:1000px; height:500px; overflow:hidden; background:lightblue; } .page{ position:absolute; width:300px; height:400px; left:350px; top:50px; background:#FFF; border:1px solid #999; } ul{ list-style:none; height:320px; margin:20px; padding:0px; background:#EEE; } li{ font-size:12px; height:20px; line-height:20px; border-bottom:1px dashed #999; } li span{ float:right; } li a{ color:#000; text-decoration:none; } li a:hover{ text-decoration:underline; } .tip{ display:block; height:20px; margin:0px 20px; line-height:20px; text-align:center; font-size:12px; background:#999; } </style> <script type="text/javascript"> function id(obj){ return document.getElementById(obj); } var page; var mx; var md=false; var sh=0; var en=false; window.onload=function(){ page=id("menu").getElementsByTagName("div"); if(page.length>0){ page[0].style.zIndex=2; } for(i=0;i<page.length;i ){ page[i].innerHTML =" 50 ){ obj.style.left=obj.offsetLeft - 10 "px"; window.setTimeout("flyout(id('" obj.id "'));",0); }else{ obj.style.left= 50 "px"; obj.style.zIndex=0; flyin(id(obj.id)); } } if(obj.offsetLeft > 350){ if((obj.offsetLeft 10) < 650){ obj.style.left=obj.offsetLeft 10 "px"; window.setTimeout("flyout(id('" obj.id "'));",0); }else{ obj.style.left= 650 "px"; obj.style.zIndex=0; flyin(id(obj.id)); } } } function flyin(obj){ if(obj.offsetLeft<350){ if((obj.offsetLeft 10) < 350){ obj.style.left=obj.offsetLeft 10 "px"; window.setTimeout("flyin(id('" obj.id "'));",0); }else{ obj.style.left= 350 "px"; en=false; } } if(obj.offsetLeft>350){ if((obj.offsetLeft - 10) > 350){ obj.style.left=obj.offsetLeft - 10 "px"; window.setTimeout("flyin(id('" obj.id "'));",0); }else{ obj.style.left=350 "px"; en=false; } } } </script> </head> <body>

<ul> <li>09-11-25伴侣</li> <li>09-11-25美丽岛</li> <li style="background:coral;">09-11-25舞女</li> <li>09-11-25手牵手</li> <li>09-11-25初恋的少年家</li> </ul>

<ul> <li>09-11-25网页制作教程</li> <li>09-11-25网路</li> <li>09-11-25倾城之雨</li> <li>09-11-25往事2000</li> <li>09-11-25绿色恐怖分子</li> </ul>

<ul> <li>09-11-25时光在慢慢消失</li> <li>09-11-25宁静温泉</li> <li>09-11-25变天着花</li> <li>09-11-25阿辉饲了一只狗</li> <li>09-11-25真的假的</li> <li>09-11-25南台湾仔共</li> </ul>

</body> </html></textarea>

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

您可能感兴趣的文章：
jquery 关键字“拖曳搜索”之“拖曳”以及图片“提示自适应放大”效果的实现
 javascript div 可拖曳翻页效果
 Jquery 快速构建可拖曳的购物车DragDrop
详解HTML5拖放功能实例
 jquery简单的拖动效果实现原理及示例
 jQuery便条插件 jStickyNote
jQuery模式对话框 mopBox
页面内容翻页效果 Flippage
HTML5中如何实现图片的拖放
 photoshop快速选择工具选用技巧分享

上一篇：javascript 表格排序代码下一篇：js选中多选框checkbox后改变相应选项的颜色

[关闭]

javascript div 可拖曳翻页效果

最近更新

浏览排行