jquery 圖片切換插件鼠標滑過TOP排行榜異步讀取圖片展開



119 472 158



特效描述:jquery 圖片切換插件 鼠標滑過 TOP排行榜 異步讀取圖片展開,jquery圖片切換插件制作網站內容受歡迎度名次排名的TOP排行榜特效,異步讀取圖片,優化瀏覽器效果,是一款非常節儉的TOP排行榜圖片特效,適用于一些中大型網站,圖片TOP排行榜。

代碼結構

1. 引入JS

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

2. HTML代碼

	<div class="rank">
		<ul class="tabcon">
			<li class="current">
				<div class="p-name">
					<span class="num">1</span>
					<a href="http://www.dijiuzhanzhang.com/">天戈遙控直升機直降330元</a>
				</div>
				<div class="p-img">
					<a href="http://www.dijiuzhanzhang.com/"><img src='images/2618194963d.jpg' width='235' height='118' /></a>
				</div>
			</li>
			<li>
				<div class="p-name">
					<span class="num">2</span>
					<a href="http://www.dijiuzhanzhang.com/">京商系列遙控三角翼僅售240元</a>
				</div>
				<div class="p-img">
					<a href="http://www.dijiuzhanzhang.com/"><img src2='images/261829325e0.jpg' width='235' height='118' /></a>
				</div>
			</li>
			<li>
				<div class="p-name">
					<span class="num">3</span>
					<a href="http://www.dijiuzhanzhang.com/">俏高領個性短袖送性感腰帶54</a>
				</div>
				<div class="p-img">
					<a href="http://www.dijiuzhanzhang.com/"><img src2='images/26184952f4b.jpg' width='235' height='118' /></a>
				</div>
			</li>
			<li>
				<div class="p-name">
					<span class="num">4</span>
					<a href="http://www.dijiuzhanzhang.com/">閃亮蛻變火熱銷售中</a>
				</div>
				<div class="p-img">
					<a href="http://www.dijiuzhanzhang.com/"><img src2='images/03162949be7.jpg' width='235' height='118' /></a>
				</div>
			</li>
		</ul>
	</div><!--rank end-->
<script type="text/javascript">
// TOP焦點圖片
$.fn.Sonny = function(option, callback){
	if(typeof option == "function"){
		callback = option;
		option = {};
	};
	var s = $.extend({delay:50,index:0}, option || {});
	var _this = this;
	var timer = null;
	$.each(this, function(n){
		$(this).bind("mouseover", function(){
			if(timer != null)
				clearTimeout(timer);
			var obj = $(this);
			timer = setTimeout(function(){
				_this.eq(s.index).removeClass(s.current);
				s.index = n;
				_this.eq(s.index).addClass(s.current);
				if(callback){
					callback(obj);
				}
			}, s.delay);
		});
	});
}
$(".rank .tabcon").eq(0).find("li").Sonny({current:"current"},function(object){
    object.find("img").each(function(){
        var src2 = $(this).attr("src2");
        $(this).attr("src", src2);
        $(this).removeAttr("src2");
    });
});
/* $(".rank .tabcon").eq(0).find("li").Sonny({current:"current"}) 調通方法 */
/*,function(object){
    object.find("img").each(function(){
        var src2 = $(this).attr("src2");
        $(this).attr("src", src2);
        $(this).removeAttr("src2");
    });
}  圖片加載方法 */
</script>



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


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 收縮展開 展開收縮 收縮 展開 其他 收縮菜單 收縮導航 圖片切換 圖片選項卡 圖標選項卡 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 列表切換 翻頁切換 鼠標滑過 鼠標懸停 跟隨鼠標移動 排行榜
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子