猿问

页面怎样才能配合鼠标做循环滚动呢

页面整体宽度是超出浏览器宽度的，让这个页面自动从左侧滚到右，再滚回来，这么循环滚动，
鼠标光标经过的时候停止滚动，离开后继续滚动
鼠标拖拽页面内容时，形成拖拽左右滚动条的效果

饮歌长啸
浏览 660回答 2
2回答

慕村9548890

<!doctype&nbsp;html>&nbsp; <html>&nbsp;<head>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <meta&nbsp;charset="UTF-8"&nbsp;/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <title>&nbsp;页面名称&nbsp;</title>&nbsp; </head>&nbsp; <body>&nbsp; <div&nbsp;style="width:&nbsp;2500px;&nbsp;height:&nbsp;800px;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;red;&nbsp;border-radius:&nbsp;50%;"></div>&nbsp; <script&nbsp;type="text/javascript">&nbsp; var&nbsp;tfv&nbsp;=&nbsp;10;&nbsp; var&nbsp;robj&nbsp;=&nbsp;document.compatMode=="CSS1Compat"&nbsp;?&nbsp;document.documentElement&nbsp;: document.body;&nbsp; var&nbsp;timer;&nbsp; var&nbsp;fuX&nbsp;=&nbsp;null;&nbsp; function&nbsp;loop(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; robj.scrollLeft&nbsp;+=&nbsp;tfv;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if&nbsp;(robj.scrollLeft<=0&nbsp;||&nbsp;robj.scrollLeft>=robj.scrollWidth-robj.clientWidth)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tfv&nbsp;=&nbsp;-tfv;&nbsp; }&nbsp; timer&nbsp;=&nbsp;setInterval(loop,&nbsp;50);&nbsp; document.body.onmouseleave&nbsp;=&nbsp;function&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; clearInterval(timer);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; timer&nbsp;=&nbsp;setInterval(loop,&nbsp;50);&nbsp; }&nbsp; document.body.onmouseenter&nbsp;=&nbsp;function&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; clearInterval(timer);&nbsp; } &nbsp;document.onmousedown&nbsp;=&nbsp;function&nbsp;(e)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;e&nbsp;=&nbsp;e&nbsp;||&nbsp;window.event;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;fuX&nbsp;=&nbsp;robj.scrollLeft&nbsp;+&nbsp;e.clientX;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;return&nbsp;false;&nbsp; &nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;document.onmousemove&nbsp;=&nbsp;function&nbsp;(e)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;if&nbsp;(fuX===null)&nbsp;return;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;e&nbsp;=&nbsp;e&nbsp;||&nbsp;window.event;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;robj.scrollLeft&nbsp;=&nbsp;fuX&nbsp;-&nbsp;e.clientX;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;return&nbsp;false;&nbsp; &nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;document.onmouseup&nbsp;=&nbsp;function&nbsp;(e)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;fuX&nbsp;=&nbsp;null;&nbsp; &nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;</script> &nbsp;&nbsp;</body>&nbsp; &nbsp;&nbsp;</html>
0
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

JavaScript
Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
我要回答