欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery簡單實現(xiàn)縱向的無縫滾動代碼實例

 更新時間：2019年04月01日 15:21:59   作者：songywaa  
這篇文章主要介紹了jquery簡單實現(xiàn)縱向的無縫滾動，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

簡單實現(xiàn)縱向無縫滾動（不要忘記引入jquery文件哦）

看效果：

1、HTML代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>簡單的jQuery無縫向上滾動效果</title>
</head>
<body>
	<div class="myscroll">
		<ul>
			<li><a href="">簡單的jQuery無縫向上滾動效果</a></li>
			<li><a href="">簡單的jQuery無縫向上滾動效果</a></li>
			<li><a href="">簡單的jQuery無縫向上滾動效果</a></li>
			<li><a href="">簡單的jQuery無縫向上滾動效果</a></li>
			<li><a href="">簡單的jQuery無縫向上滾動效果</a></li>
			<li><a href="">簡單的jQuery無縫向上滾動效果</a></li>
			<li><a href="">簡單的jQuery無縫向上滾動效果</a></li>
			<li><a href="">簡單的jQuery無縫向上滾動效果</a></li>
			<li><a href="">簡單的jQuery無縫向上滾動效果</a></li>
			<li><a href="">簡單的jQuery無縫向上滾動效果</a></li>
			<li><a href="">簡單的jQuery無縫向上滾動效果</a></li>
			<li><a href="">簡單的jQuery無縫向上滾動效果</a></li>
			<li><a href="">簡單的jQuery無縫向上滾動效果</a></li>
			<li><a href="">簡單的jQuery無縫向上滾動效果</a></li>
		</ul>
	</div>
</body>
</html>

2、css代碼

<style>
* { margin: 0; padding: 0;list-style:none;}
.myscroll {
	width: 300px;
	height: 260px;
	margin: 0 auto;
	line-height: 26px;
	font-size: 12px;
	overflow: hidden;
	border:2px solid orange;
}
.myscroll li {
	height: 26px;
	padding:0 10px;
	font-size:14px;
}
.myscroll a {
	color: #333;
	text-decoration: none;
}
.myscroll a:hover {
	color: orange;
	text-decoration: underline;
}
</style>

3、js代碼

(function($){
	$.fn.myScroll = function(options){
	//默認配置
	var defaults = {
		speed:40, //滾動速度,值越大速度越慢
		rowHeight:24 //每行的高度
	};

	var opts = $.extend({}, defaults, options),
		intId = [];

	function marquee(obj, step){

		obj.find("ul").animate({//html中必須有的ul
			marginTop: '-=1'
		},0,function(){
				var s = Math.abs(parseInt($(this).css("margin-top")));
				if(s >= step){
					$(this).find("li").slice(0, 1).appendTo($(this));//截取ul中的第一個li,添加到ul的最后
					$(this).css("margin-top", 0);
				}
			});
		}

		this.each(function(i){
			var rowHeight = opts["rowHeight"],
				speed = opts["speed"],
				_this = $(this);//這里的_this指向div.myscroll

			intId[i] = setInterval(function(){
				if(_this.find("ul").height()<=_this.height()){//當ul的高度小于html中，div.myscroll的高度，則結束定時器
					clearInterval(intId[i]);
				}else{
					marquee(_this, rowHeight);
				}
			}, speed);

			_this.hover(function(){//鼠標移動到div.myscroll上時，結束定時器
				clearInterval(intId[i]);
			},function(){//鼠標離開div.myscroll容器，判斷ul的高度若小于等于div.myscroll高度，則結束定時器（不滾動），否則調用marquee函數(shù)
				intId[i] = setInterval(function(){
					if(_this.find("ul").height()<=_this.height()){
						clearInterval(intId[i]);
					}else{
						marquee(_this, rowHeight);
					}
				}, speed);
			});
		});
	}
})(jQuery);

4、調用

$(function(){
	$('.myscroll').myScroll({
		speed: 40, //數(shù)值越大，速度越慢
		rowHeight: 26 //li的高度
	});
});

以上所述是小編給大家介紹的jquery簡單實現(xiàn)縱向的無縫滾動詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

相關文章

最新評論