jquery鼠标移动div内容上下左右滚动
jquery鼠标移动div内容上下左右滚动
点击这里查看效果：http://keleyi.com/keleyi/phtml/jqtexiao/9.htm
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>鼠标移动 div内容滚动 - 柯乐义</title> 6 <meta name="keywords" content="鼠标移动 div内容滚动"> 7 <meta name="description" content="鼠标移动 div内容滚动"> 8 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js"></script> 9 </head> 10 11 <body> 12 13 <div style="width:1000px;margin:24px auto;"> 14 <h1>1. 横向滚动 1 Horizontal Scrolling</h1> 15 <style> 16 .thumbs-block { 17 position:relative; /**/ 18 overflow: hidden; 19 background: #ccc; 20 margin: 0 5px; 21 width: 714px; 22 height:142px; /**/ 23 } 24 .thumbs-block .thumbs { 25 white-space: nowrap; 26 text-align: center; 27 } 28 .thumbs-block .thumb { 29 display: inline-block; 30 padding: 5px; 31 margin: 5px; 32 background: rgba(0, 0, 0, 0.2); 33 border: 1px solid #ccc; 34 border: 1px solid rgba(0, 0, 0, 0.3); 35 height: 120px; 36 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 37 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 38 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 39 } 40 41 .thumbs{ 42 position:absolute; /**/ 43 margin-left:0; /**/ 44 } 45 </style> 46 <script> 47 $(function () { 48 var $bl = $(".thumbs-block"), 49 $th = $(".thumbs"), 50 blW = $bl.outerWidth(), 51 blSW = $bl[0].scrollWidth, 52 wDiff = (blSW / blW) - 1, // widths difference ratio 53 mPadd = 60, // Mousemove Padding 54 damp = 20, // Mousemove response softness 55 mX = 0, // Real mouse position 56 mX2 = 0, // Modified mouse position 57 posX = 0, 58 mmAA = blW - (mPadd * 2), // The mousemove available area 59 mmAAr = (blW / mmAA); // get available mousemove fidderence ratio 60 61 $bl.mousemove(function (e) { 62 mX = e.pageX - this.offsetLeft; 63 mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr; 64 }); 65 66 setInterval(function () { 67 posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay" 68 $th.css({ marginLeft: -posX * wDiff }); 69 }, 10); 70 71 }); 72 </script> 73 This one will have 60px "mousemove padding" at each side: 74 <div class="thumbs-block"> 75 <div class="thumbs"> 76 <a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/1.gif" width="120" height="120" /></a> 77 <a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/2.gif" width="120" height="120" /></a> 78 <a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/3.gif" width="120" height="120" /></a> 79 <a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/4.gif" width="120" height="120" /></a> 80 <a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/5.gif" width="120" height="120" /></a> 81 <a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/6.gif" width="120" height="120" /></a> 82 <a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/7.gif" width="120" height="120" /></a> 83 <a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/8.gif" width="120" height="120" /></a> 84 <a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/9.gif" width="120" height="120" /></a> 85 <a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/10.gif" width="120" height="120" /></a> 86 <a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/11.gif" width="120" height="120" /></a> 87 <a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/12.gif" width="120" height="120" /></a> 88 </div> 89 </div><br> 90 来源： <a href="http://jsbin.com/uninug/3/edit">http://jsbin.com/uninug/3/edit</a><br><br> 91 <div><a href="http://keleyi.com/a/bjac/tathyx7l.htm" target="_blank">原文</a></div> 92 <h1>2. 横向滚动 2 Horizontal Scrolling</h1> 93 94 <style> 95 #parent{ 96 position:relative; 97 margin:0 auto; 98 height: 260px; 99 width: 100%; 100 background: #ddd; 101 } 102 #propertyThumbnails{ 103 position:relative; 104 overflow:hidden; 105 background:#444; 106 width:100%; 107 height:262px; 108 white-space:nowrap; 109 } 110 #propertyThumbnails img{ 111 vertical-align: middle; 112 height: 260px; 113 display:inline; 114 margin-left:-4px; 115 } 116 </style> 117 <script> 118 $(function () { 119 $(window).load(function () { 120 var $gal = $("#propertyThumbnails"), 121 galW = $gal.outerWidth(true), 122 galSW = $gal[0].scrollWidth, 123 wDiff = (galSW / galW) - 1, // widths difference ratio 124 mPadd = 60, // Mousemove Padding 125 damp = 20, // Mousemove response softness 126 mX = 0, // Real mouse position 127 mX2 = 0, // Modified mouse position 128 posX = 0, 129 mmAA = galW - (mPadd * 2), // The mousemove available area 130 mmAAr = (galW / mmAA); // get available mousemove fidderence ratio 131 132 $gal.mousemove(function (e) { 133 mX = e.pageX - $(this).parent().offset().left - this.offsetLeft; 134 mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr; 135 }); 136 137 setInterval(function () { 138 posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay" 139 $gal.scrollLeft(posX * wDiff); 140 }, 10); 141 142 }); 143 }); 144 </script> 145 <div id="parent"> 146 <div id="propertyThumbnails"> 147 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/Flower-festival.jpg" /> 148 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/Flower-festival.jpg" /> 149 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/Flower-festival.jpg" /> 150 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/Flower-festival.jpg" /> 151 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/Flower-festival.jpg" /> 152 </div> 153 </div><br> 154 来源： <a href="http://jsbin.com/alokat/1/edit">http://jsbin.com/alokat/1/edit</a><br><br> 155 156 <h1>3. 纵向滚动 Vertical Scrolling</h1> 157 <style> 158 .box { 159 width:300px; 160 height:300px; 161 overflow-y:hidden; 162 background:#eee; 163 border:1px #ccc solid; 164 overflow:hidden; 165 } 166 .box p { 167 margin:1em; 168 } 169 </style> 170 <script> 171 $(document).ready(function () { 172 $(".box").mousemove(function (e) { 173 var h = $('#innerbox').height() + 13; 174 var offset = $($(this)).offset(); 175 var position = (e.pageY - offset.top) / $(this).height(); 176 $(".status").html('Percentage:' + ((e.pageY - offset.top) / $(this).height()).toFixed(2)); 177 if (position < 0.33) $(this).stop().animate({ scrollTop: 0 }, 5000); 178 else if (position > 0.66) $(this).stop().animate({ scrollTop: h }, 5000); 179 else $(this).stop(); 180 }); 181 }); 182 </script> 183 <div class="box"> 184 <div id="innerbox" style="height:auto;"> 185 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor volutpat elementum. Nunc enim enim, eleifend sit amet blandit a, vestibulum a purus. Phasellus at accumsan ante. Duis vestibulum rhoncus sapien a dapibus. Suspendisse malesuada aliquet faucibus. Vestibulum ut sem diam. Integer tempus pellentesque mi, et luctus nunc porttitor in. Nunc vel risus in mauris facilisis commodo.</p> 186 187 <p>Etiam gravida accumsan tortor, vitae malesuada est volutpat at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Nunc mattis dapibus odio nec bibendum. Aliquam id lorem tellus, eget venenatis tellus. Aliquam quis eros arcu. Nam massa dui, scelerisque eu tempor a, faucibus ac ligula. Praesent gravida tempus magna, eu hendrerit nibh placerat tincidunt. Nulla eleifend semper ligula. Nulla vitae adipiscing orci.</p> 188 189 <p>Pellentesque eu lorem vitae leo congue egestas eu et risus. Praesent laoreet odio eget urna bibendum id pharetra dolor placerat. Mauris molestie venenatis est. Nunc eu dictum risus. Morbi sodales laoreet dapibus. Duis euismod condimentum massa, fringilla sodales mauris feugiat sed. In in iaculis diam.</p> 190 191 <p>keleyi.com .Donec velit magna, dignissim ac lobortis pharetra, laoreet a quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vitae quam ante. Fusce mi sapien, suscipit sed feugiat non, suscipit hendrerit neque. Maecenas elementum vestibulum bibendum. Curabitur nisl mauris, posuere cursus vestibulum sit amet, suscipit ac ligula. Nulla dolor tortor, lacinia vel mattis et, egestas tristique augue. Quisque at nibh tortor.</p> 192 193 <p>In hac habitasse platea dictumst. Donec ullamcorper nisl sed leo porta euismod. Maecenas gravida scelerisque lobortis. In hac habitasse platea dictumst. Cras iaculis, justo vel aliquet faucibus, odio leo sollicitudin tellus, a sodales odio purus nec felis. In massa orci, euismod nec gravida vitae, pulvinar sit amet nulla. Integer in lorem lectus, eget dignissim ante.</p> 194 </div> 195 </div> 196 <div class="status"></div><br> 197 来源： <a href="http://jsfiddle.net/n3Q9j/5/">http://jsfiddle.net/n3Q9j/5/</a> 198 </div> 199 </body> 200 </html>