jquery制作的横向图片滚动带横向滚动条TackerScroll

最新推荐文章于 2023-05-05 23:22:22 发布
最新推荐文章于 2023-05-05 23:22:22 发布
阅读量105 收藏
点赞数
文章标签： javascript php ViewUI
原文链接：http://www.cnblogs.com/tacker/archive/2009/10/18/1585628.html
版权

图片左右滚动，感应鼠标位置，鼠标在展示区左边1/3向左滚动，中间1/3停止滚动，右边1/3向右滚动。

目前滚动条，左右按钮没有相应点击事件。

第一个作品，问题难免，希望高手不吝赐教。

Javascript文件：

ContractedBlock.gif ExpandedBlockStart.gif 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();
                e = 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) {
                    evt = 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文件：

ContractedBlock.gif ExpandedBlockStart.gif 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

转载于:https://www.cnblogs.com/tacker/archive/2009/10/18/1585628.html

weixin_30559481
关注
jquery带缩略图轮播_带有jQuery的可滚动缩略图菜单
culiao9310的博客
09-28 478
jquery带缩略图轮播View demo 查看演示Download Source 下载源In this tutorial we will create a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let...
基于jquery的横向滚动条（滑动条）
10-28
本文将介绍如何利用jQuery的Slider控件创建一个既能兼容多种浏览器，又能同时在顶部和底部显示的横向滚动条。 首先，要实现这个功能，我们需要引入jQuery库和jQuery UI库。这里使用的是版本为1.3.2的jquery-1.3.2....
jquery图片横向滚动
08-01
超酷横向滚动带倒影，带横向滚动条，可拉动
jquery构建图片样式的滚动条
mine_1的专栏
06-14 2106
 需要用到的js:jquery-1.1.3.1.js,jquery.linscroll.js 在页面中引用的方法： $(document).ready( function(){ $(#scrollDiv).setScroll( //scrollContent为滚动层的ID {img:03.png,width:20},//背景图及其宽度 {img:01.
图片的横向滑动
gongchenzhang的专栏
11-05 1167
<br />这个效果的实现是用UIScrollView。核心代码如下：<br />NSArray *myImages = [NSArray arrayWithObjects:[UIImage imageNamed:@"1.jpg"],nil]; UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 60, 320, imageSizeHeight)]; for (int i = 0; i <[myIma
jquery 图片横向滚动插件
十年回首，一纸感动!
11-03 385
使用jquery做的，图片横向左右滚动，和自动滚动的插件，可以自定义显示图片个数和滚动时间   1、插件源代码 (function($) {   $.fn.myScroll = function(options)   {       //默认配置     var defaults = {       auto: [false, 3000],       //是否自动滚动,...
jquery scroll()区分横向纵向滚动条的方法
10-26
本文将详细介绍如何使用jQuery的 `scroll()` 方法来区分横向和纵向滚动条。 首先，我们要明白 `scrollLeft` 和 `scrollTop` 属性的作用。`scrollLeft` 用于获取或设置元素的水平滚动位置，而 `scrollTop` 则用于...
支持移动端的jQuery滑动条拖动横向图片滚动特效
01-02
在图片的展示上，可以使用CSS的`display: inline-block`或者`float: left`属性来使图片并排显示，从而实现横向滚动的效果。记得在图片的`width`属性上设置合适的值，确保它们可以在有限的空间内水平排列。 最后，...
jquery图片横向滚动特效
11-17
在这个"jquery图片横向滚动特效"的主题中，我们将深入探讨如何利用jQuery实现图片的动态、平滑的横向滚动效果。 首先，我们需要了解jQuery的基本使用。jQuery的核心功能是选择器，它允许我们轻松地选取HTML元素。...
jquery.scrollTo.js网页滚动插件下载.rar
07-10
jquery.scrollTo.js网页滚动插件下载，可以控制网页整体滚动的插件，指定区域内容的滚动等，滚动方式是多方向的，可以设置滚动到某个元素或者是滚动多大的高度等等。
图片不间断滚动的特效代码详细讲解--3
注重长远 天天积累 cqujsjcyj
07-09 114
    转自：http://www.g168.net/html/JspServlet_1/2008/1129/081129916BGKC86CH12CA8B7B90ED_3.html   刚才给大家介绍了JS的一些知识点，现在就讲下相关的CSS技巧。 #container{    margin:0 auto;    margin-top:10px;    width:720px;    ...
九款酷炫基于jquery实现的应用及源码
weixin_34392906的博客
06-15 164
1、HTML5 Loading动画加载 五彩的圆环Loading 今天我们要分享一款基于HTML5的Loading加载动画特效，这款HTML5加载动画是一个五彩的圆环，圆环不停地转动从而体现加载正在进行。如果你感兴趣，可以查看这款HTML5 Loading动画的在线演示，效果还不错。 在线演示 源码下载 2、jQuery产品图片横向滚动 自定义滚动条 这是一款很棒的jQuery图片滚...
JQuery实现自定义滚动条
最新发布
觉醒法师的专栏
05-05 3637
在页面中虽然可以通过CSS修改滚动条的样式,但是部分属性是无法自己修改和设置的，而且不同浏览器存在兼容问题，因此通过JS来实现滚动条在。的环境下也是有必要的。
jquery 控制滚动条 实现自动滚动浏览
qq_33281259的博客
05-19 1624
<!doctype html> <html lang="en"> <head> <script type="text/javascript" src="{$p_tpl}/js/jquery-3.5.1.js" charset="utf-8"></script> <style> .kj{ height:70px; width:25%; float:left; color:#fff; font-size:40px; } </
ScrollMagic – 酷毙了！超炫的页面滚动交互效果
weixin_33670786的博客
03-18 634
　　ScrollMagic 是一款 jQuery 插件，它让你可以像使用进度条一样使用滚动条。如果你想在特定的滚动位置开始一个动画，并且让动画同步滚动条的动作，或者把元素粘在一个特定的滚动位置，那么这款插件正是你需要的。 　　使用 ScrollMagic，您可以很容易地把视差效果添加到您的网站中。当用户到达某个滚动位置时，你可以调用函数，或以任何其他方式来和当前的滚动位置进行交互。 您可能感兴...
JQuery实现移动端广告横向自动滚动效果
cqy5071021的博客
08-25 988
这里写自定义目录标题JQuery实现移动端广告横向滚动效果(触摸可左右滑动) JQuery实现移动端广告横向滚动效果(触摸可左右滑动) 前段时间万恶产品要求实现几张图片横向滚动播放,用户触摸可自由左右滑动,网上找了很久也没有找到,最后自己磕磕碰碰实现了效果,虽然有些情况下有BUG,但是应该还是可以满足部分需求了,希望有大佬愿意修改一下部分情况下的BUG(比如当第一个li滚到一般的时候,最后一个已经完全展示,这时候继续滚动,后面就会出现部分时间空白,等第一个li滚动到消失,才会截取到后面填上) <!
css实现图片横向排列，溢出隐藏/滚动条横向拖动
twosecond
06-24 5286
关键样式： white-space:nowrap;/*内容横向排列不换行*/ overflow-x:auto;　　overflow-y:hidden;/*隐藏溢出部分。横向滚动条自动出现，纵向滚动条隐藏*/ 预览代码: css实现图片横向排列，溢出隐藏横向滚动 .inimg {width:670px;height:395px;white-space:nowrap;overflow-x:a
jQuery 模拟横向滚动条
shan1774965666的专栏
11-15 1891
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Typ
jQuery实现页面滚动条自动滚动到需要的位置
热门推荐
zhangzeshan
07-23 1万+
代码如下： <script> $(function(){ $('html,body').animate({scrollTop:1000},'slow'); }) </script> 解读代码：在载入html页面的body这一块内容中，实现滚动进行展示body的某一块内容，scrollTop方法 进行滚动1000像素 （像素越大滚动的越下去，也...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值