基于jquery的循环左右滚动和上下滚动效果

来源：互联网发布：mac 打开系统文件夹编辑：程序博客网时间：2024/05/16 01:53

[css] view plaincopy
@charset "utf-8";  
/* CSS Document */  
* {  
    margin:0;  
    padding:0;  
}  
body {  
    font-size:12px;  
}  
/*左右滚动*/  
#scrollable {  
    background-color:#efefef;  
    border:1px solid #ddd;  
    padding:10px 8px;  
    width:523px;  
    height:65px;  
    margin-top:30px;  
}  
div.items {  
    height:66px;  
    margin-left:8px;  
    float:left;  
    width:475px !important;  
}  
div.items a {  
    display:block;  
    float:left;  
    margin-right:8px;  
    width:88px;  
    height:66px;  
    background:#BBB;  
    font-size:50px;  
    color:#ccc;  
    line-height:66px;  
    text-decoration:none;  
    text-align:center;  
    cursor:pointer;  
}  
div.items a:hover {  
    color:#999;  
}  
div.items a.active {  
    background-position:-174px 0;  
    color:#555;  
    cursor:default;  
}  
a.prev, a.next {  
    background:url(left.png) no-repeat 0 0;  
    display:block;  
    width:18px;  
    height:18px;  
    float:left;  
    margin:22px 0 0 0;  
    cursor:pointer;  
}  
a.next {  
    background-image:url(right.png)  
}  
a.prev:hover {  
    background-position:0 -18px;  
}  
a.next:hover {  
    background-position:0 -18px;  
}  
/*上下滚动*/  
#scrollDiv {  
    width: 300px;  
    height: 25px;  
    line-height: 25px;  
    border: #ccc 1px solid;  
    overflow: hidden;  
}  
#scrollDiv li {  
    height: 25px;  
    padding-left: 10px;  
}  

js代码

[javascript] view plaincopy
// JavaScript Document  
  
// 左右滚动  
(function($) {  
    $.fn.extend({  
        Scroll: function(opt, callback) {  
            if (!opt) var opt = {};  
            var _btnleft = $(opt.left);  
            var _btnright = $(opt.right);  
            var timerID;  
            var _this = this.eq(0).find("div").eq(1);  
            var lineW = _this.find("a:first").width(),  
            //获取列宽   
            line = opt.line ? parseInt(opt.line, 10) : parseInt(_this.width() / lineW, 10),  
            //每次滚动的列数，默认为一屏，即父容器列宽   
            speed = opt.speed ? parseInt(opt.speed, 10) : 500; //滚动速度，数值越大，速度越慢（毫秒）   
            timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔（毫秒）   
            if (line == 0) line = 1;  
            var upWidth = 0 - line * lineW;  
            //滚动函数   
            var scrollLeft = function() {  
                if (!_this.is(":animated")) {  
                    _this.animate({  
                        left: upWidth  
                    },  
                    speed,  
                    function() {  
                        for (i = 1; i <= line; i++) {  
                            _this.find("a:first").appendTo(_this);  
                        }  
                        _this.css({  
                            left: 0  
                        });  
                    });  
                }  
            }  
            var scrollRight = function() {  
                if (!_this.is(":animated")) {  
                    for (i = 1; i <= line; i++) {  
                        _this.find("a:last").show().prependTo(_this);  
                    }  
                    _this.css({  
                        left: upWidth  
                    });  
                    _this.animate({  
                        left: 0  
                    },  
                    speed,  
                    function() {});  
                }  
            } //Shawphy:自动播放   
            var autoPlay = function() {  
                if (timer) timerID = window.setInterval(scrollLeft, timer);  
            };  
            var autoStop = function() {  
                if (timer) window.clearInterval(timerID);  
            };　　　　　　　　　　　　 //鼠标事件绑定   
            _this.hover(autoStop, autoPlay).mouseout();  
            _btnleft.css("cursor", "pointer").click(scrollLeft).hover(autoStop, autoPlay);  
            _btnright.css("cursor", "pointer").click(scrollRight).hover(autoStop, autoPlay);  
        }  
    })  
})(jQuery);  
$(document).ready(function() {  
    $("#scrollable").Scroll({  
        line: 5,  
        speed: 500,  
        timer: 3000,  
        left: ".prev",  
        right: ".next"  
    });  
});  
  
// 上下滚动  
function AutoScroll(obj) {  
    $(obj).find("ul:first").animate({  
        marginTop: "-25px"  
    },  
    500,  
    function() {  
        $(this).css({  
            marginTop: "0px"  
        }).find("li:first").appendTo(this);  
    });  
}  
$(document).ready(function() {  
    var myar = setInterval('AutoScroll("#scrollDiv")', 1000);  
    $("#scrollDiv").hover(function() {  
        clearInterval(myar);  
    },  
    function() {  
        myar = setInterval('AutoScroll("#scrollDiv")', 1000)  
    }); //当鼠标放上去的时候，滚动停止，鼠标离开的时候滚动开始  
});  

html代码

[html] view plaincopy

<div style="margin:0 auto;width:500px;">
<div id="scrollable"> <a class="prev" href="#"></a>
<div class="items" style="overflow: hidden; position: relative; visibility: visible; width: 478px;">
<div style="position: absolute; width: 200000em; left: 0px;" class="scrollable_demo"> <a>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a> <a>6</a> <a>7</a> <a>8</a> <a>9</a> <a>10</a> <a>11</a> <a>12</a> <a>13</a> <a>14</a> <a>15</a> </div>
<br clear="all"/>
</div>
<a class="next" href="#"></a> </div>
</div>
<div id="scrollDiv">
<ul>
<li><a href="http://www.sina.com">欢迎浏览新浪网</a></li>
<li><a href="http://www.163.com">欢迎浏览网易</a></li>
<li><a href="http://www.csdn.com">欢迎进入程序员之家</a></li>
<li><a href="http://www.51aspx.com">很好的源代码下载区</a></li>
<li><a href="http://www.msdn.com">msdn</a></li>
<li><a href="http://www.baidu.com">欢迎浏览百度网</a></li>
</ul>
</div

阅读原文

0 0