自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

jQuery實現(xiàn)橫向圖片滾動帶橫向滾動條

作者：佚名
移動開發(fā)
jQuery實現(xiàn)橫向圖片滾動帶橫向滾動條是本文要介紹的內(nèi)容，主要是來了解jQuery中圖片滾動效果的實現(xiàn)，具體內(nèi)容的實現(xiàn)來看本文詳解。

jQuery實現(xiàn)橫向圖片滾動帶橫向滾動條是本文要介紹的內(nèi)容，主要是來了解jQuery中圖片滾動效果的實現(xiàn)。圖片左右滾動，感應(yīng)鼠標(biāo)位置，鼠標(biāo)在展示區(qū)左邊1/3向左滾動，中間1/3停止滾動，右邊1/3向右滾動。目前滾動條，左右按鈕沒有相應(yīng)點擊事件。 ***個作品，問題難免，希望高手不吝賜教。

Javascript文件：

  1. Code  
  2.  
  3. /// <reference path="jquery-1.3.2.js" /> 
  4. /*  
  5. *   
  6. * tackerScroller - a Image Horizental Auto Scroll Viewer   
  7. * Version 0.1.1  
  8. * @requires jQuery v1.3.2  
  9. *   
  10. * Copyright (c) 2009 Tacker  
  11. * Eidtor: Tacker By 2009-10-18  
  12. * Email:tacker.cn@gmail.com  
  13. * WebSite:www.ruiidea.com  
  14. * Dual licensed under the MIT and GPL licenses:  
  15. * http://www.opensource.org/licenses/mit-license.php  
  16. * http://www.gnu.org/licenses/gpl.html  
  17. *   
  18. */  
  19.  
  20. jQuery.fn.tackerScroller = function(params) {  
  21.     var p = params || {  
  22.         container: "imgViewer",  
  23.         frame: "viewerFrame",  
  24.         width: 2,  
  25.         child: "li",  
  26.         time: 6000,  
  27.         visibleScroll: false,  
  28.         scrollwidth: 845  
  29.     };  
  30.     var _imgViewer = $("#" + p.container);  
  31.     var _imgFrame = $("#" + p.frame);  
  32.     var _width = p.width;  
  33.     var _child = p.child;  
  34.     var _time = p.time;  
  35.     var _framewidth = _imgFrame.find(_child).size() * _imgFrame.find(_child + ":first").width();  
  36.     var _positionX;  
  37.     var _scrollwidth = p.scrollwidth;  
  38.     var _visibleScroll = p.visibleScroll;  
  39.     var _scrollPositionX;  
  40.  
  41.     var autoStop = function() {  
  42.         _imgFrame.stop();  
  43.         if (_visibleScroll === true) {  
  44.             $("#scrollcenter").stop();  
  45.         }  
  46.     };  
  47.     var turnLeft = function() {  
  48.         if (_imgFrame.offset().left < 0) {  
  49.             _imgFrame.animate({ marginLeft: 0 }, _time);  
  50.             if (_visibleScroll === true) {  
  51.                 $("#scrollcenter").animate({ left: 0 }, _time);  
  52.             }  
  53.         }  
  54.         else {  
  55.             autoStop();  
  56.         }  
  57.     };  
  58.     var turnRight = function() {  
  59.         if (_imgFrame.offset().left > _imgViewer.width() - _imgFrame.width()) {  
  60.             _imgFrame.animate({ marginLeft: (_imgViewer.width() - _imgFrame.width()) }, _time);  
  61.             if (_visibleScroll == true) {  
  62.                 $("#scrollcenter").animate({ left: (_scrollwidth - $("#scrollcenter").width()) }, _time);  
  63.             }  
  64.         }  
  65.         else {  
  66.             autoStop();  
  67.         }  
  68.     };      
  69.     var init = function() {  
  70.         _imgFrame.width(_framewidth);  
  71.         if (_visibleScroll == true) {  
  72.             var scrollerwidth = _imgViewer.width() * _scrollwidth / _imgFrame.width();  
  73.             var scrolleroffsetX;  
  74.             $("#scrollcenter").width(scrollerwidth);  
  75.             $("#scrollcenter").css("position", "absolute").css("left","0px");  
  76.             $("#scrollcenter").parent().css("width",_scrollwidth+"px");  
  77.             $("#scrollcenter").animate({ left: (_scrollwidth - scrollerwidth) / 2 }, 2000);  
  78.             $("#scrollcenter").bind("mousedown",function(e) {  
  79.                 autoStop();  
  80.                 ee = e ? e : window.event;  
  81.                 //鼠標(biāo)x坐標(biāo)相對中間滾動條偏移位置  
  82.                 scrolleroffsetX = parseInt(e.originalEvent.clientX-$("#scrollcenter").offset().left||e.originalEvent.layerX||0);  
  83.                 $("#msg").text(scrolleroffsetX);  
  84.                 $("#scrollcenter").parent().mousemove(function(evt) {  
  85.                     evtevt = evt ? evt : window.event;                      
  86.                     _scrollPositionX=parseInt((evt.originalEvent.clientX-scrolleroffsetX-
  87.                            $("#scrollcenter").parent().offset().left)||(evt.originalEvent.pageX-scrolleroffsetX-
  88.                            $("#scrollcenter").parent().offset().left)||0)  
  89.                     if (_scrollPositionX >= 0 && _scrollPositionX <= _scrollwidth - $("#scrollcenter").width()) {  
  90.                         $("#scrollcenter").css("left", (_scrollPositionX) + "px");  
  91.                         _imgFrame.css("margin-left",(_imgViewer.width() - _imgFrame.width())
  92.                            * _scrollPositionX / (_scrollwidth - $("#scrollcenter").width()) + "px");  
  93.                     }                      
  94.                     return false;//阻止事件冒泡  
  95.                 });                                             
  96.                 $(document).mouseup(function() {  
  97.                    $("#scrollcenter").parent().unbind();                     
  98.                 });                   
  99.                 return false;  //阻止事件冒泡             
  100.             });  
  101.             $("#scrollcenter").mouseover(function() {  
  102.                 $(this).css("cursor", "pointer");  
  103.             });  
  104.         }  
  105.         _imgFrame.animate({ marginLeft: (_imgViewer.width() - _framewidth) / 2 }, 2000);  
  106.         _imgViewer.mouseout(autoStop);  
  107.         _imgViewer.mouseover(function(e) {  
  108.             //獲取當(dāng)前鼠標(biāo)相對對象的x坐標(biāo)  
  109.             _positionX = e.originalEvent.x - $(this).offset().left || e.originalEvent.layerX - $(this).offset().left || 0;  
  110.             if (_positionX < $(this).width() / 3) {  
  111.                 autoStop();  
  112.                 turnLeft();  
  113.             }  
  114.             else if (_positionX > ($(this).width() * 2) / 3) {  
  115.                 autoStop();  
  116.                 turnRight();  
  117.             }  
  118.             else {  
  119.                 autoStop();  
  120.             }  
  121.             return false;//阻止事件冒泡  
  122.         });  
  123.     };  
  124.     init();  
  125. }; 

Html文件：

  1. Code  
  2.  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  4. <html> 
  5. <head> 
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  7.     <meta http-equiv="Autor" content="Tacker(QQ:5987753)" /> 
  8.     <script type="text/javascript" src="../js/jquery-1.3.2.js"></script> 
  9.     <script type="text/javascript" src="jquery.tackerScroll.js"></script> 
  10.     <title>TackerScroll Demo</title> 
  11.     <style type="text/css"> 
  12.         ul, li  
  13.         {  
  14.             list-style: none;  
  15.             float: left;  
  16.             text-align: left;  
  17.         }  
  18.         .productlist  
  19.         {  
  20.             width: 885px;  
  21.             height: 355px;  
  22.             overflow: hidden;  
  23.             position: absolute;  
  24.             left: 64px;  
  25.             top: 10px;  
  26.         }  
  27.         .productlist ul  
  28.         {  
  29.             height: 355px;  
  30.             float: left;  
  31.         }  
  32.         .productlist ul li  
  33.         {  
  34.             height: 355px;  
  35.             width: 304px;  
  36.         }  
  37.         #viewerFrame  
  38.         {  
  39.             float: left;  
  40.             height: 355px;  
  41.         }  
  42.         #viewerScroller  
  43.         {  
  44.             width: 885px;  
  45.             height: 20px;  
  46.             overflow: hidden;  
  47.             position: absolute;  
  48.             left: 64px;  
  49.             top: 380px;  
  50.         }  
  51.         #viewerScroller .left  
  52.         {  
  53.             float: left;  
  54.             width: 20px;  
  55.             height: 20px;  
  56.         }  
  57.         #viewerScroller .center  
  58.         {  
  59.             float: left;  
  60.             height: 20px;  
  61.             background: #1A1AF7;  
  62.         }  
  63.         #viewerScroller .right  
  64.         {  
  65.             float: left;  
  66.             width: 20px;  
  67.             height: 20px;  
  68.         }  
  69.     </style> 
  70. </head> 
  71. <body> 
  72.     <div id="" class="subcontainer"> 
  73.         <div id="imgViewer" class="productlist"> 
  74.             <ul id="viewerFrame"> 
  75.                 <li><a href="#" target="_self"> 
  76.                     <img src="images/2009090972918233.jpg" width="276" height="355" title="" style="border: 0px;  
  77.                         display: block;" /></a></li> 
  78.                 <li><a href="#" target="_self"> 
  79.                     <img src="images/2009090972870017.jpg" width="276" height="355" title="" style="border: 0px;  
  80.                         display: block;" /></a></li> 
  81.                 <li><a href="#" target="_self"> 
  82.                     <img src="images/2009090972817505.jpg" width="276" height="355" title="" style="border: 0px;  
  83.                         display: block;" /></a></li> 
  84.                 <li><a href="#" target="_self"> 
  85.                     <img src="images/2009090972740609.jpg" width="276" height="355" title="" style="border: 0px;  
  86.                         display: block;" /></a></li> 
  87.                 <li><a href="#" target="_self"> 
  88.                     <img src="images/2009090972690985.jpg" width="276" height="355" title="" style="border: 0px;  
  89.                         display: block;" /></a></li> 
  90.                 <li><a href="#" target="_self"> 
  91.                     <img src="images/2009090972665705.jpg" width="276" height="355" title="" style="border: 0px;  
  92.                         display: block;" /></a></li> 
  93.             </ul> 
  94.         </div> 
  95.         <div id="viewerScroller"> 
  96.             <div class="left"> 
  97.                 <img id="scrollleft" src="images/scrollleft.jpg" width="20" height="20" alt="" /></div> 
  98.             <div class="center" style="position: relative;"> 
  99.                 <img id="scrollcenter" src="images/scrollcenter.jpg" width="0" height="20" alt="" /></div> 
  100.             <div class="right"> 
  101.                 <img id="scrollright" src="images/scrollright.jpg" width="20" height="20" alt="" /></div> 
  102.         </div> 
  103.  
  104.         <script type="text/javascript"> 
  105.             $(function() {  
  106.                 $("#viewer").tackerScroller({  
  107.                     container: "imgViewer",  
  108.                     frame: "viewerFrame",  
  109.                     width: 2,  
  110.                     child: "li",  
  111.                     time: 6000,  
  112.                     visibleScroll: true,  
  113.                     scrollwidth: 845  
  114.                 });  
  115.             });  
  116.         </script> 
  117.     </div> 
  118. </body> 
  119. </html> 

在線demo:

  1. http://www.ruiidea.com/tackerscroll/demo.html 

打包下載：

  1. http://www.ruiidea.com/tackerscroll/tackerscroll.rar 

小結(jié)：jQuery實現(xiàn)橫向圖片滾動帶橫向滾動條的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)能對你有所幫助！

責(zé)任編輯：zhaolei 來源： 博客園
jQuery滾動圖片
相關(guān)推薦

2011-09-02 09:49:29

JQuery圖片滾動

2024-01-22 09:28:23

CSS前端滾動驅(qū)動

2013-01-05 17:45:11

Android開發(fā)特效滾動屏幕

2023-11-22 07:47:34

2011-09-01 13:17:46

JQuery滾動

2021-06-18 10:12:09

JS代碼前端

2010-09-14 10:13:53

DIV滾動條

2010-09-09 11:25:55

滾動條CSS

2010-09-30 15:24:31

滾動條Javascript

2011-09-02 10:14:10

JQuery滾動Xslider

2011-05-12 16:30:44

自定義滾動條

2010-09-09 09:47:02

DIV滾動條

2022-08-15 19:23:24

macOS?Windows容器

2010-09-30 15:37:29

ScrollBarJavascrip

2022-08-23 08:01:09

CSS前端

2010-07-28 11:25:08

Flex滾動條

2011-03-04 14:46:40

Ubuntu Unit

2012-05-10 14:02:46

jQuery

2014-07-29 11:10:26

Ubuntu14.04小技巧

2010-08-09 15:19:29

Flex滾動條
點贊
收藏

51CTO技術(shù)棧公眾號