亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

使用jquery實(shí)現(xiàn)的循環(huán)連續(xù)可停頓滾動(dòng)實(shí)例

Original 2017-01-07 15:11:53 307
abstract：使用jquery實(shí)現(xiàn)的循環(huán)連續(xù)可停頓滾動(dòng)，并應(yīng)用于滾動(dòng)圖片，滾動(dòng)層。記得一定要有jquery庫(kù)哦~一、單行滾動(dòng) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

使用jquery實(shí)現(xiàn)的循環(huán)連續(xù)可停頓滾動(dòng)，并應(yīng)用于滾動(dòng)圖片，滾動(dòng)層。記得一定要有jquery庫(kù)哦~

一、單行滾動(dòng) 

<!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-Type" c />  
<title>無(wú)標(biāo)題文檔</title>  
<mce:style type="text/css"><!--  
ul,li{margin:0;padding:0} 
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} 
#scrollDiv li{height:25px;padding-left:10px;}  
--></mce:style><mce:style type="text/css" mce_bogus="1"><!--
ul,li{margin:0;padding:0} 
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} 
#scrollDiv li{height:25px;padding-left:10px;}
--></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">ul,li{margin:0;padding:0} 
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} 
#scrollDiv li{height:25px;padding-left:10px;}</style>  
<mce:script src="jquery-1[1].2.1.pack.js" mce_src="jquery-1[1].2.1.pack.js" type="text/javascript"></mce:script>  
<mce:script type="text/javascript"><!--  
function AutoScroll(obj){  
    $(obj).find("ul:first").animate({  
        marginTop:"-25px" 
    },500,function(){  
        $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);  
    });  
}  
$(document).ready(function(){  
setInterval('AutoScroll("#scrollDiv")',1000)  
});  
// --></mce:script>  
</head>  
<body>  
<div id="scrollDiv">  
<ul>  
  <li>這是公告標(biāo)題的第一行</li>  
  <li>這是公告標(biāo)題的第二行</li>  
  <li>這是公告標(biāo)題的第三行</li>  
  <li>這是公告標(biāo)題的第四行</li>  
  <li>這是公告標(biāo)題的第五行</li>  
  <li>這是公告標(biāo)題的第六行</li>  
  <li>這是公告標(biāo)題的第七行</li>  
  <li>這是公告標(biāo)題的第八行</li>  
</ul>  
</div>  
</body>  
</html>

   

二、多行滾動(dòng) 

<!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-Type" content="text/html; charset=gb2312" />  
<title>無(wú)標(biāo)題文檔</title>  
<mce:style type="text/css"><!--  
ul,li{margin:0;padding:0} 
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} 
#scrollDiv li{height:25px;padding-left:10px;}  
--></mce:style><mce:style type="text/css" mce_bogus="1"><!--
ul,li{margin:0;padding:0} 
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} 
#scrollDiv li{height:25px;padding-left:10px;}
--></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">ul,li{margin:0;padding:0} 
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} 
#scrollDiv li{height:25px;padding-left:10px;}</style>  
<mce:script src="jquery-1[1].2.1.pack.js" mce_src="jquery-1[1].2.1.pack.js" type="text/javascript"></mce:script>  
<mce:script type="text/javascript"><!--  
//滾動(dòng)插件  
(function($){  
$.fn.extend({  
    Scroll:function(opt,callback){  
        //參數(shù)初始化  
        if(!opt) var opt={};  
        var _this=this.eq(0).find("ul:first");  
        var    lineH=_this.find("li:first").height(), //獲取行高  
            line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滾動(dòng)的行數(shù)，默認(rèn)為一屏，即父容器高度  
            speed=opt.speed?parseInt(opt.speed,10):500, //卷動(dòng)速度，數(shù)值越大，速度越慢（毫秒）  
            timer=opt.timer?parseInt(opt.timer,10):3000; //滾動(dòng)的時(shí)間間隔（毫秒）  
        if(line==0) line=1;  
        var upHeight=0-line*lineH;  
        //滾動(dòng)函數(shù)  
        scrollUp=function(){  
            _this.animate({  
                marginTop:upHeight  
            },speed,function(){  
                for(i=1;i<=line;i++){  
                    _this.find("li:first").appendTo(_this);  
                }  
                _this.css({marginTop:0});  
            });  
        }  
        //鼠標(biāo)事件綁定  
        _this.hover(function(){  
            clearInterval(timerID);  
        },function(){  
            timerID=setInterval("scrollUp()",timer);  
        }).mouseout();  
    }      
})  
})(jQuery);  
$(document).ready(function(){  
    $("#scrollDiv").Scroll({line:4,speed:500,timer:1000});  
});  
// --></mce:script>  
</head>  
<body>  
<p>多行滾動(dòng)演示：</p>  
<div id="scrollDiv">  
<ul>  
  <li>這是公告標(biāo)題的第一行</li>  
  <li>這是公告標(biāo)題的第二行</li>  
  <li>這是公告標(biāo)題的第三行</li>  
  <li>這是公告標(biāo)題的第四行</li>  
  <li>這是公告標(biāo)題的第五行</li>  
  <li>這是公告標(biāo)題的第六行</li>  
  <li>這是公告標(biāo)題的第七行</li>  
  <li>這是公告標(biāo)題的第八行</li>  
</ul>  
</div>  
</body>  
</html>

   

三、可控制向前向后的多行滾動(dòng)  

<!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-Type" content="text/html; charset=gb2312" />  
<title>無(wú)標(biāo)題文檔</title>  
<mce:style type="text/css"><!--  
ul,li{margin:0;padding:0} 
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} 
#scrollDiv li{height:25px;padding-left:10px;}  
--></mce:style><mce:style type="text/css" mce_bogus="1"><!--
ul,li{margin:0;padding:0} 
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} 
#scrollDiv li{height:25px;padding-left:10px;}
--></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">ul,li{margin:0;padding:0} 
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} 
#scrollDiv li{height:25px;padding-left:10px;}</style>  
<mce:script src="jquery-1[1].2.1.pack.js" mce_src="jquery-1[1].2.1.pack.js" type="text/javascript"></mce:script>  
<mce:script type="text/javascript"><!--  
(function($){  
$.fn.extend({  
    Scroll:function(opt,callback){  
        //參數(shù)初始化  
        if(!opt) var opt={};  
        var _btnUp = $("#"+ opt.up);//Shawphy:向上按鈕  
        var _btnDown = $("#"+ opt.down);//Shawphy:向下按鈕  
        var timerID;  
        var _this=this.eq(0).find("ul:first");  
        var   lineH=_this.find("li:first").height(), //獲取行高  
            line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滾動(dòng)的行數(shù)，默認(rèn)為一屏，即父容器高度  
            speed=opt.speed?parseInt(opt.speed,10):500; //卷動(dòng)速度，數(shù)值越大，速度越慢（毫秒）  
            timer=opt.timer //?parseInt(opt.timer,10):3000; //滾動(dòng)的時(shí)間間隔（毫秒）  
        if(line==0) line=1;  
        var upHeight=0-line*lineH;  
        //滾動(dòng)函數(shù)  
        var scrollUp=function(){  
            _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按鈕的函數(shù)綁定  
            _this.animate({  
                marginTop:upHeight  
            },speed,function(){  
                for(i=1;i<=line;i++){  
                    _this.find("li:first").appendTo(_this);  
                }  
                _this.css({marginTop:0});  
                _btnUp.bind("click",scrollUp); //Shawphy:綁定向上按鈕的點(diǎn)擊事件  
            });  
        }  
        //Shawphy:向下翻頁(yè)函數(shù)  
        var scrollDown=function(){  
            _btnDown.unbind("click",scrollDown);  
            for(i=1;i<=line;i++){  
                _this.find("li:last").show().prependTo(_this);  
            }  
            _this.css({marginTop:upHeight});  
            _this.animate({  
                marginTop:0  
            },speed,function(){  
                _btnDown.bind("click",scrollDown);  
            });  
        }  
        //Shawphy:自動(dòng)播放  
        var autoPlay = function(){  
            if(timer)timerID = window.setInterval(scrollUp,timer);  
        };  
        var autoStop = function(){  
            if(timer)window.clearInterval(timerID);  
        };  
         //鼠標(biāo)事件綁定  
        _this.hover(autoStop,autoPlay).mouseout();  
        _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠標(biāo)事件綁定  
        _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);  
    }     
})  
})(jQuery);  
$(document).ready(function(){  
    $("#scrollDiv").Scroll({line:4,speed:500,timer:1000,up:"btn1",down:"btn2"});  
});  
// --></mce:script>  
</head>  
<body>  
<p>多行滾動(dòng)演示：</p>  
<div id="scrollDiv">  
<ul>  
  <li>這是公告標(biāo)題的第一行</li>  
  <li>這是公告標(biāo)題的第二行</li>  
  <li>這是公告標(biāo)題的第三行</li>  
  <li>這是公告標(biāo)題的第四行</li>  
  <li>這是公告標(biāo)題的第五行</li>  
  <li>這是公告標(biāo)題的第六行</li>  
  <li>這是公告標(biāo)題的第七行</li>  
  <li>這是公告標(biāo)題的第八行</li>  
</ul>  
</div>  
<span id="btn1">向前</span> <span id="btn2">向后</span>  
</body>  
</html>

  更多關(guān)于使用jquery實(shí)現(xiàn)的循環(huán)連續(xù)可停頓滾動(dòng)實(shí)例請(qǐng)關(guān)注PHP中文網(wǎng)（ipnx.cn）其他文章！  


Release Notes

Popular Entries