jquery無縫滾動插件支持圖片無縫滾動或文字無縫滾動



93 370 124



特效描述:無縫滾動插件 無縫滾動 文字無縫滾動,

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代碼

<script type="text/javascript">
(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({
			marginTop: '-=1'
		},0,function(){
				var s = Math.abs(parseInt($(this).css("margin-top")));
				if(s >= step){
					$(this).find("li").slice(0, 1).appendTo($(this));
					$(this).css("margin-top", 0);
				}
			});
		}
		this.each(function(i){
			var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
			intId[i] = setInterval(function(){
				if(_this.find("ul").height()<=_this.height()){
					clearInterval(intId[i]);
				}else{
					marquee(_this, sh);
				}
			}, speed);
			_this.hover(function(){
				clearInterval(intId[i]);
			},function(){
				intId[i] = setInterval(function(){
					if(_this.find("ul").height()<=_this.height()){
						clearInterval(intId[i]);
					}else{
						marquee(_this, sh);
					}
				}, speed);
			});
		});
	}
})(jQuery);
$(function(){
	$("div.ranklist").myScroll({
		speed:40,
		rowHeight:24
	});
});
</script>	
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#b52725;text-decoration:underline;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
.demo{width:600px;margin:20px auto;border:solid 1px #ddd;padding:0 10px;}
.demo h2{font-size:14px;color:#333;height:30px;line-height:30px;padding:15px 0;color:#3366cc;}
/* ranklist */
.ranklist{height:200px;overflow:hidden;}
.ranklist li{height:16px;line-height:16px;overflow:hidden;position:relative;padding:0 70px 0 30px;margin:0 0 10px 0;}
.ranklist li em{background:url(images/mun.gif) no-repeat;width:20px;height:16px;overflow:hidden;display:block;position:absolute;left:0;top:0;text-align:center;font-style:normal;color:#333;}
.ranklist li em{background-position:0 -16px;}
.ranklist li.top em{background-position:0 0;color:#fff;}
.ranklist li .num{position:absolute;right:0;top:0;color:#999;}
</style>
<div class="demo">
	<h2>jquery上下無縫滾動插件 列表溢出高度時 自動上下無縫滾動</h2>
	<div class="ranklist">
		<ul>
			<li class="top">
				<em>01</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">js圖片左右無縫滾動用鼠標控制圖片滾動</a></p><span class="num">32萬下載</span>
			</li>
			<li class="top">
				<em>02</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">js無縫滾動制作js文字無縫滾動和js圖片無縫滾動</a></p><span class="num">32萬下載</span>
			</li>
			<li class="top">
				<em>03</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery 滾動 kxbdSuperMarquee插件支持圖片與文字無縫滾動 圖片翻滾 焦點圖左右切換 banner廣告制作</a></p><span class="num">32萬下載</span>
			</li>
			<li>
				<em>04</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">javascript滾動圖片插件支持單排圖片上下滾動、圖片無縫滾動</a></p><span class="num">32萬下載</span>
			</li>
			<li>
				<em>05</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank"> javascript滾動圖片帶按鈕控制上下左右自動無縫滾動</a></p><span class="num">32萬下載</span>
			</li>
			<li>
				<em>06</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery hover圖片插件制作鼠標滑過標題單個展開圖片效果</a></p><span class="num">32萬下載</span>
			</li>
			<li>
				<em>07</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">flash圖片特效3D立體動畫焦點圖片切換帶左右按鈕控制滾動</a></p><span class="num">32萬下載</span>
			</li>
			<li>
				<em>08</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">js lazyload實現網頁圖片延遲加載特效</a></p><span class="num">32萬下載</span>
			</li>
			<li>
				<em>09</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">FlippingBook電子雜志書去版權,翻頁圖片全部外調 站長珍藏版</a></p><span class="num">32萬下載</span>
			</li>
			<li>
				<em>10</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">門戶網站jquery廣告控制flash或圖片頂部廣告顯示隱藏</a></p><span class="num">32萬下載</span>
			</li>
		</ul>
	</div>
	<h2>jquery上下無縫滾動插件 列表條數不夠高度 不上下無縫滾動</h2>
	<div class="ranklist">
		<ul>
			<li class="top">
				<em>01</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">js圖片左右無縫滾動用鼠標控制圖片滾動</a></p><span class="num">32萬下載</span>
			</li>
			<li class="top">
				<em>02</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">js無縫滾動制作js文字無縫滾動和js圖片無縫滾動</a></p><span class="num">32萬下載</span>
			</li>
			<li class="top">
				<em>03</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">jquery 滾動 kxbdSuperMarquee插件支持圖片與文字無縫滾動 圖片翻滾 焦點圖左右切換 banner廣告制作</a></p><span class="num">32萬下載</span>
			</li>
			<li>
				<em>04</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank">javascript滾動圖片插件支持單排圖片上下滾動、圖片無縫滾動</a></p><span class="num">32萬下載</span>
			</li>
			<li>
				<em>05</em><p><a href="http://www.dijiuzhanzhang.com/" target="_blank"> javascript滾動圖片帶按鈕控制上下左右自動無縫滾動</a></p><span class="num">32萬下載</span>
			</li>
		</ul>
	</div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽:
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子