jQuery实现横向图片滚动带横向滚动条是本文要介绍的内容,主要是来了解jQuery中图片滚动效果的实现。图片左右滚动,感应鼠标位置,鼠标在展示区左边1/3向左滚动,中间1/3停止滚动,右边1/3向右滚动。目前滚动条,左右按钮没有相应点击事件。 ***个作品,问题难免,希望高手不吝赐教。
Javascript文件:
- Code
- /// <reference path="jquery-1.3.2.js" />
- /*
- *
- * tackerScroller - a Image Horizental Auto Scroll Viewer
- * Version 0.1.1
- * @requires jQuery v1.3.2
- *
- * Copyright (c) 2009 Tacker
- * Eidtor: Tacker By 2009-10-18
- * Email:tacker.cn@gmail.com
- * WebSite:www.ruiidea.com
- * Dual licensed under the MIT and GPL licenses:
- * http://www.opensource.org/licenses/mit-license.php
- * http://www.gnu.org/licenses/gpl.html
- *
- */
- jQuery.fn.tackerScroller = function(params) {
- var p = params || {
- container: "imgViewer",
- frame: "viewerFrame",
- width: 2,
- child: "li",
- time: 6000,
- visibleScroll: false,
- scrollwidth: 845
- };
- var _imgViewer = $("#" + p.container);
- var _imgFrame = $("#" + p.frame);
- var _width = p.width;
- var _child = p.child;
- var _time = p.time;
- var _framewidth = _imgFrame.find(_child).size() * _imgFrame.find(_child + ":first").width();
- var _positionX;
- var _scrollwidth = p.scrollwidth;
- var _visibleScroll = p.visibleScroll;
- var _scrollPositionX;
- var autoStop = function() {
- _imgFrame.stop();
- if (_visibleScroll === true) {
- $("#scrollcenter").stop();
- }
- };
- var turnLeft = function() {
- if (_imgFrame.offset().left < 0) {
- _imgFrame.animate({ marginLeft: 0 }, _time);
- if (_visibleScroll === true) {
- $("#scrollcenter").animate({ left: 0 }, _time);
- }
- }
- else {
- autoStop();
- }
- };
- var turnRight = function() {
- if (_imgFrame.offset().left > _imgViewer.width() - _imgFrame.width()) {
- _imgFrame.animate({ marginLeft: (_imgViewer.width() - _imgFrame.width()) }, _time);
- if (_visibleScroll == true) {
- $("#scrollcenter").animate({ left: (_scrollwidth - $("#scrollcenter").width()) }, _time);
- }
- }
- else {
- autoStop();
- }
- };
- var init = function() {
- _imgFrame.width(_framewidth);
- if (_visibleScroll == true) {
- var scrollerwidth = _imgViewer.width() * _scrollwidth / _imgFrame.width();
- var scrolleroffsetX;
- $("#scrollcenter").width(scrollerwidth);
- $("#scrollcenter").css("position", "absolute").css("left","0px");
- $("#scrollcenter").parent().css("width",_scrollwidth+"px");
- $("#scrollcenter").animate({ left: (_scrollwidth - scrollerwidth) / 2 }, 2000);
- $("#scrollcenter").bind("mousedown",function(e) {
- autoStop();
- ee = e ? e : window.event;
- //鼠标x坐标相对中间滚动条偏移位置
- scrolleroffsetX = parseInt(e.originalEvent.clientX-$("#scrollcenter").offset().left||e.originalEvent.layerX||0);
- $("#msg").text(scrolleroffsetX);
- $("#scrollcenter").parent().mousemove(function(evt) {
- evtevt = evt ? evt : window.event;
- _scrollPositionX=parseInt((evt.originalEvent.clientX-scrolleroffsetX-
- $("#scrollcenter").parent().offset().left)||(evt.originalEvent.pageX-scrolleroffsetX-
- $("#scrollcenter").parent().offset().left)||0)
- if (_scrollPositionX >= 0 && _scrollPositionX <= _scrollwidth - $("#scrollcenter").width()) {
- $("#scrollcenter").css("left", (_scrollPositionX) + "px");
- _imgFrame.css("margin-left",(_imgViewer.width() - _imgFrame.width())
- * _scrollPositionX / (_scrollwidth - $("#scrollcenter").width()) + "px");
- }
- return false;//阻止事件冒泡
- });
- $(document).mouseup(function() {
- $("#scrollcenter").parent().unbind();
- });
- return false; //阻止事件冒泡
- });
- $("#scrollcenter").mouseover(function() {
- $(this).css("cursor", "pointer");
- });
- }
- _imgFrame.animate({ marginLeft: (_imgViewer.width() - _framewidth) / 2 }, 2000);
- _imgViewer.mouseout(autoStop);
- _imgViewer.mouseover(function(e) {
- //获取当前鼠标相对对象的x坐标
- _positionX = e.originalEvent.x - $(this).offset().left || e.originalEvent.layerX - $(this).offset().left || 0;
- if (_positionX < $(this).width() / 3) {
- autoStop();
- turnLeft();
- }
- else if (_positionX > ($(this).width() * 2) / 3) {
- autoStop();
- turnRight();
- }
- else {
- autoStop();
- }
- return false;//阻止事件冒泡
- });
- };
- init();
- };
Html文件:
- Code
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta http-equiv="Autor" content="Tacker(QQ:5987753)" />
- <script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
- <script type="text/javascript" src="jquery.tackerScroll.js"></script>
- <title>TackerScroll Demo</title>
- <style type="text/css">
- ul, li
- {
- list-style: none;
- float: left;
- text-align: left;
- }
- .productlist
- {
- width: 885px;
- height: 355px;
- overflow: hidden;
- position: absolute;
- left: 64px;
- top: 10px;
- }
- .productlist ul
- {
- height: 355px;
- float: left;
- }
- .productlist ul li
- {
- height: 355px;
- width: 304px;
- }
- #viewerFrame
- {
- float: left;
- height: 355px;
- }
- #viewerScroller
- {
- width: 885px;
- height: 20px;
- overflow: hidden;
- position: absolute;
- left: 64px;
- top: 380px;
- }
- #viewerScroller .left
- {
- float: left;
- width: 20px;
- height: 20px;
- }
- #viewerScroller .center
- {
- float: left;
- height: 20px;
- background: #1A1AF7;
- }
- #viewerScroller .right
- {
- float: left;
- width: 20px;
- height: 20px;
- }
- </style>
- </head>
- <body>
- <div id="" class="subcontainer">
- <div id="imgViewer" class="productlist">
- <ul id="viewerFrame">
- <li><a href="#" target="_self">
- <img src="images/2009090972918233.jpg" width="276" height="355" title="" style="border: 0px;
- display: block;" /></a></li>
- <li><a href="#" target="_self">
- <img src="images/2009090972870017.jpg" width="276" height="355" title="" style="border: 0px;
- display: block;" /></a></li>
- <li><a href="#" target="_self">
- <img src="images/2009090972817505.jpg" width="276" height="355" title="" style="border: 0px;
- display: block;" /></a></li>
- <li><a href="#" target="_self">
- <img src="images/2009090972740609.jpg" width="276" height="355" title="" style="border: 0px;
- display: block;" /></a></li>
- <li><a href="#" target="_self">
- <img src="images/2009090972690985.jpg" width="276" height="355" title="" style="border: 0px;
- display: block;" /></a></li>
- <li><a href="#" target="_self">
- <img src="images/2009090972665705.jpg" width="276" height="355" title="" style="border: 0px;
- display: block;" /></a></li>
- </ul>
- </div>
- <div id="viewerScroller">
- <div class="left">
- <img id="scrollleft" src="images/scrollleft.jpg" width="20" height="20" alt="" /></div>
- <div class="center" style="position: relative;">
- <img id="scrollcenter" src="images/scrollcenter.jpg" width="0" height="20" alt="" /></div>
- <div class="right">
- <img id="scrollright" src="images/scrollright.jpg" width="20" height="20" alt="" /></div>
- </div>
- <script type="text/javascript">
- $(function() {
- $("#viewer").tackerScroller({
- container: "imgViewer",
- frame: "viewerFrame",
- width: 2,
- child: "li",
- time: 6000,
- visibleScroll: true,
- scrollwidth: 845
- });
- });
- </script>
- </div>
- </body>
- </html>
在线demo:
- http://www.ruiidea.com/tackerscroll/demo.html
打包下载:
- http://www.ruiidea.com/tackerscroll/tackerscroll.rar
小结:jQuery实现横向图片滚动带横向滚动条的内容介绍完了,希望通过本文的学习能对你有所帮助!