读书人

无缝滚动插件版欢迎拍砖

发布时间: 2012-10-29 10:03:53 作者: rapoo

无缝滚动插件版,欢迎拍砖!

最近闲的蛋疼,于是乎就做点立竿见影的事儿,欢迎拍砖,欢迎拍砖!

?

<html><head>    <title>Jquery实现无缝滚动</title>    <link type="text/css" rel="stylesheet" href="style.css"/>    <script language="javascript" src="jquery.js"></script>    <script language="javascript" src="script.js"></script></head><body><div>    <div id="roll">            <div target="_blank">aaaaaaaaaaaaa</a></div>            <div name="code">*{margin:0 0;padding:0px;}.main{width:200px;height:200px;overflow:hidden;border:1px #666 solid;}.roll{float:left;top:0px;}.caption{height:20px;line-height:20px;margin-left:20px;}

??

$(document).ready(function(){    $("#roll").myRoll("slow");});/** * @description  无缝滚动插件版 * @param        speed:滚动速度控制参数,字符串类型参数字符串支持为slow,normal,fast三种 *               数字类型参数范围是:1 —— 100(数字越小滚动越快) * @author       lsunwing * @date         2010/06/23 */$.fn.myRoll = function(speed){        //滚动窗口的高    var rollHeight = this.parent().height();    //滚动条目数组    var rollArray = this.find("div");    //滚动条目数组个数    var number = rollArray.size();    //滚动条目的高    var height = rollArray.eq(0).height();        var obj = this;        // 滚动速度控制    var range = 1;  //滚动幅度    var interval = 10;  //滚动时间间隔    if(speed){        if(typeof speed == "string"){            if(speed == "slow"){interval = 100;            }else if(speed == "normal"){                interval = 50;            }else if (speed == "fast"){                interval = 10;            }else{                range = 1;            }        }else if(typeof speed == "number"){            if(Math.ceil(speed) >= speed && Math.ceil(speed) <=100){                interval = Math.ceil(speed);            }else{                interval = 100;            }        }else{            range = 1;            interval = 100;        }    }else{        range = 1;        interval = 100;    }        var top = 0;    var flag = 0;    //时间循环滚动    var timeId;    if(number > rollHeight/height){        //开始滚动        timeId = setInterval(startRoll,interval);    }else{        //内容高度小于滚动框的高度,不滚动    }    //鼠标动作    $(this).hover(        function(){            clearInterval(timeId);        },        function(){            timeId = setInterval(startRoll,interval);        }    );    //滚动次数    var c = Math.ceil(height/range);    function startRoll(){        flag++;        if(flag >= c){                        rollArray.eq(0).remove();            obj.append($(rollArray).eq(0));            //重新获得一下数组            rollArray = obj.find("div");            top = top + height;            flag = 0;        }        top = top - range;                obj.css("margin-top",top);    }}

?

读书人网 >Web前端

热点推荐