网页抓取滚动 – 有爱前端

按住鼠标左键滚动页面

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery click and drag scroll</title> <style type="text/css"> * { margin: 0; padding: 0; border: 0; outline: none; font-weight: 200; -webkit-font-smoothing: antialiased; font-family: segoe ui, helvetica neue, helvetica, arial, sans-serif; -webkit-user-select: none; -moz-user-select: moz-none; -ms-user-select: none; user-select: none; } /* Defaults */ body { font-size: 16px; } p, a, span { font-size: 90%; color: #666; liine-height: 20px; } .wrapper { width: 540px; margin: 0px auto; } /* Header */ header { padding: 120px 0px 120px 0px; } header h1 { font-size: 220%; color: #444; text-align: center; } header p { text-align: center; } /* Section */ .section { padding: 40px 0px 40px 0px; } .section.dark { background: #dedede; } .section h2 { color: #444; padding-bottom: 20px; } /* Code */ .code { padding: 20px; background: #dedede; color: #666; } .section.dark .code { background: #ccc; } </style> </head> <body> <header> <h1>Click and drag to scroll!</h1> <p class="belowHeader">(The jQuery way)</p> </header> <div class="section dark"> <div class="wrapper"> <h2>Setting our variables</h2> <div class="code"> var curXPos = 0, curYPos = 0, curDown = false; </div> </div> </div> <div class="section"> <div class="wrapper"> <h2>Mouse down event</h2> <div class="code"> $(window).mousedown(function(m){ curDown = true; curYPos = m.pageY; curXPos = m.pageX; }); </div> </div> </div> <div class="section dark"> <div class="wrapper"> <h2>Mouse up event</h2> <div class="code"> $(window).mouseup(function(){ curDown = false; }); </div> </div> </div> <div class="section"> <div class="wrapper"> <h2>Mouse move event</h2> <div class="code"> $(window).mousemove(function(m){ if(curDown === true){ $(window).scrollTop($(window).scrollTop() + (curYPos - m.pageY)); $(window).scrollLeft($(window).scrollLeft() + (curXPos - m.pageX)); } }); </div> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var curDown = false, curYPos = 0, curXPos = 0; $(window).mousemove(function(m){ if(curDown === true){ $(window).scrollTop($(window).scrollTop() + (curYPos - m.pageY)); $(window).scrollLeft($(window).scrollLeft() + (curXPos - m.pageX)); } }); $(window).mousedown(function(m){ curDown = true; curYPos = m.pageY; curXPos = m.pageX; }); $(window).mouseup(function(){ curDown = false; }); }) </script> </html>

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

转载请注明：有爱前端 » 网页抓取滚动