资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
js仿土豆视频滚动菜单
<!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>管理资源吧 www.glzy8.com 仿土豆视频滚动菜单</title> <style> ul{margin:0;padding:0;list-style:none;width:100000px} li{margin:0;padding:0;width:100px;height:100px;display:block;float:left;margin-right:5px;background:#009900} #img_bag{width:640px;height:100px;background:#FF9900;margin:0 auto;} #img_bag a{float:left;width:20px;display:block;height:20px;font-weight:bold;} #img_bag #img{width:600px;height:100px;background:#ccc;overflow:hidden;float:left} #scrollBar{width:600px;height:20px;background:#FF0000;margin:0 auto;position:relative} #scroll{width:30px;height:20px;background:#000;cursor:pointer;position:absolute;} </style> </head> <body> <div id="img_bag"> <a href="javascript:void(0)" _ewebeditor_ta_href="javascript%3Avoid(0)" onmousedown="moveLeft()"><<</a> <div id="img"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <a href="javascript:void(0)" _ewebeditor_ta_href="javascript%3Avoid(0)" onmousedown="moveRight()">>></a> </div> <div style="clear:both;"></div> <div id="scrollBar"> <div id="scroll" style="left:0"></div> </div> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%20%0D%0Afunction%20%24(obj)%7Breturn%20document.getElementById(obj)%7D%20%20%0D%0Avar%20maxWidth%3D%24(%22img%22).getElementsByTagName(%22ul%22)%5B0%5D.getElementsByTagName(%22li%22).length*105%3B%20%20%0D%0Avar%20isScroll%3Dfalse%3B%20%20%0D%0Avar%20modiLeft%3B%20%20%0D%0A%24(%22scroll%22).onmousedown%3Dfunction(evt)%7B%20%20%0D%0AisScroll%3Dtrue%3B%20%20%0D%0Aevt%3D(evt)%3Fevt%3A((window.event)%3Fwindow.event%3Anull)%3B%20%20%0D%0Aif(evt.offsetX)%7B%20%20%0D%0AmodiLeft%3DparseInt(evt.offsetX)%20%20%0D%0A%7D%20%20%0D%0Aelse%7BmodiLeft%3DparseInt(evt.layerX)%7D%20%20%0D%0A%7D%20%20%0D%0Adocument.onmouseup%3Dfunction()%7B%20%20%0D%0AisScroll%3Dfalse%3B%20%20%0D%0A%7D%20%20%0D%0Adocument.onmousemove%3Dfunction(evt)%7B%20%20%0D%0Aevt%3D(evt)%3Fevt%3A((window.event)%3Fwindow.event%3Anull)%3B%20%20%0D%0Aif(evt%26%26isScroll)%7B%20%20%0D%0A%24(%22scroll%22).style.left%3DparseInt(evt.clientX)-parseInt(%24(%22scrollBar%22).offsetLeft)-modiLeft%2B%22px%22%3B%20%20%0D%0Aif(parseInt(%24(%22scroll%22).style.left)%3C0)%7B%24(%22scroll%22).style.left%3D0%2B%22px%22%7D%20%20%0D%0Aif(parseInt(%24(%22scroll%22).style.left)%3E570)%7B%24(%22scroll%22).style.left%3D570%2B%22px%22%7D%20%20%0D%0A%24(%22img%22).scrollLeft%3DparseInt(%24(%22scroll%22).style.left)*((maxWidth-600)%2F570)%3B%20%20%0D%0A%20%20%7D%20%20%0D%0A%7D%20%20%0D%0Avar%20targetx%20%3D%20200%3B%2F%2F%E4%B8%80%E6%AC%A1%E6%BB%9A%E5%8A%A8%E8%B7%9D%E7%A6%BB%20%20%0D%0Avar%20dx%3B%20%20%0D%0Avar%20a%3Dnull%3B%20%20%0D%0Afunction%20moveLeft()%7B%20%20%0D%0Avar%20le%3DparseInt(%24(%22img%22).scrollLeft)%3B%20%20%0D%0Aif(le%3E200)%7B%20%20%0D%0Atargetx%3DparseInt(%24(%22img%22).scrollLeft)-200%3B%20%20%0D%0A%7D%20%20%0D%0Aelse%7Btargetx%3DparseInt(%24(%22img%22).scrollLeft)-le-1%7D%20%20%0D%0AscLeft()%3B%20%20%0D%0A%7D%20%20%0D%0Afunction%20scLeft()%7B%20%20%0D%0Adx%3DparseInt(%24(%22img%22).scrollLeft)-targetx%3B%20%20%0D%0A%24(%22img%22).scrollLeft-%3Ddx*.3%3B%20%20%0D%0A%24(%22scroll%22).style.left%3DparseInt(%24(%22img%22).scrollLeft)*(570%2F(maxWidth-600))%2B%22px%22%3B%20%20%0D%0Aif(parseInt(%24(%22scroll%22).style.left)%3C0)%7B%24(%22scroll%22).style.left%3D0%2B%22px%22%7D%20%20%0D%0Aif(parseInt(%24(%22scroll%22).style.left)%3E570)%7B%24(%22scroll%22).style.left%3D570%2B%22px%22%7D%20%20%0D%0AclearScroll%3DsetTimeout(scLeft%2C50)%3B%20%20%0D%0Aif(dx*.3%3C1)%7BclearTimeout(clearScroll)%7D%20%20%0D%0A%7D%20%20%0D%0Afunction%20moveRight()%7B%20%20%0D%0Avar%20le%3DparseInt(%24(%22img%22).scrollLeft)%2B200%3B%20%20%0D%0Avar%20maxL%3DmaxWidth-600%3B%20%20%0D%0Aif(le%3CmaxL)%7B%20%20%0D%0Atargetx%3DparseInt(%24(%22img%22).scrollLeft)%2B200%3B%20%20%0D%0A%7D%20%20%0D%0Aelse%7Btargetx%3DmaxL%7D%20%20%0D%0AscRight()%3B%20%20%0D%0A%7D%20%20%0D%0Afunction%20scRight()%7B%20%20%0D%0Adx%3Dtargetx-parseInt(%24(%22img%22).scrollLeft)%3B%20%20%0D%0A%24(%22img%22).scrollLeft%2B%3Ddx*.3%3B%20%20%0D%0A%24(%22scroll%22).style.left%3DparseInt(%24(%22img%22).scrollLeft)*(573%2F(maxWidth-600))%2B%22px%22%3B%20%20%0D%0Aif(parseInt(%24(%22scroll%22).style.left)%3C0)%7B%24(%22scroll%22).style.left%3D0%2B%22px%22%7D%20%20%0D%0Aif(parseInt(%24(%22scroll%22).style.left)%3E%3D570)%7B%24(%22scroll%22).style.left%3D570%2B%22px%22%7D%20%20%0D%0Aa%3DsetTimeout(scRight%2C50)%3B%20%20%0D%0Aif(dx*.3%3C1)%7BclearTimeout(a)%7D%20%20%0D%0A%7D%20%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程