jQuery实现横向图片滚动带横向滚动条

移动开发
jQuery实现横向图片滚动带横向滚动条是本文要介绍的内容,主要是来了解jQuery中图片滚动效果的实现,具体内容的实现来看本文详解。

jQuery实现横向图片滚动带横向滚动条是本文要介绍的内容,主要是来了解jQuery图片滚动效果的实现。图片左右滚动,感应鼠标位置,鼠标在展示区左边1/3向左滚动,中间1/3停止滚动,右边1/3向右滚动。目前滚动条,左右按钮没有相应点击事件。 ***个作品,问题难免,希望高手不吝赐教。

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.                 //鼠标x坐标相对中间滚动条偏移位置  
  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.             //获取当前鼠标相对对象的x坐标  
  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 

小结:jQuery实现横向图片滚动带横向滚动条的内容介绍完了,希望通过本文的学习能对你有所帮助!

责任编辑:zhaolei 来源: 博客园
相关推荐

2011-09-02 09:49:29

JQuery图片滚动

2013-01-05 17:45:11

Android开发特效滚动屏幕

2024-01-22 09:28:23

CSS前端滚动驱动

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容器

2022-08-23 08:01:09

CSS前端

2010-09-30 15:37:29

ScrollBarJavascrip

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技术栈公众号