jquery提示框插件自定義多個方向浮動提示層



103 409 137



特效描述:提示框插件 自定義方向浮動 提示層,jquery提示框插件制作多個浮動提示層提示效果,自定義上、下、左、右四個方向浮動層提示框,支持回調函數的浮動提示框。

代碼結構

1. 引入JS

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

2. HTML代碼

<script type="text/javascript">
(function(b){
	b.fn.tipsy=function(c){
		c=b.extend({},b.fn.tipsy.defaults,c);
		return this.each(function(){
			var e=b.fn.tipsy.elementOptions(this,c);
			b(this).hover(function(){
				b.data(this,"cancel.tipsy",true);
				var g=b.data(this,"active.tipsy");
				if(!g){
					g=b('<div class="tipsy"><div class="tipsy-inner"/></div>');
					g.css({position:"absolute",zIndex:1E5});
					b.data(this,"active.tipsy",g)
				}
				if(b(this).attr("title")||typeof b(this).attr("original-title")!="string")
				b(this).attr("original-title",b(this).attr("title")||"").removeAttr("title");
				var f;
				if(typeof e.title=="string")f=b(this).attr(e.title=="title"?"original-title":e.title);
				else if(typeof e.title=="function")f=e.title.call(this);
				g.find(".tipsy-inner")[e.html?"html":"text"](f||e.fallback);
				f=b.extend({},b(this).offset(),{
					width:this.offsetWidth,height:this.offsetHeight
				});
				g.get(0).className="tipsy";
				g.remove().css({top:0,left:0,visibility:"hidden",display:"block"}).appendTo(document.body);
				var d=g[0].offsetWidth,h=g[0].offsetHeight;
				switch((typeof e.gravity=="function"?e.gravity.call(this):e.gravity).charAt(0)){
					case "n":g.css({top:f.top+f.height,left:f.left+f.width/2-d/2}).addClass("tipsy-north");
					break;
					case "s":g.css({top:f.top-h,left:f.left+f.width/2-d/2}).addClass("tipsy-south");
					break;
					case "e":g.css({top:f.top+f.height/2-h/2,left:f.left-d}).addClass("tipsy-east");
					break;
					case "w":g.css({top:f.top+f.height/2-h/2,left:f.left+f.width}).addClass("tipsy-west");
					break
				}e.fade?g.css({opacity:0,display:"block",visibility:"visible"}).animate({opacity:0.8}):g.css({visibility:"visible"})
			},function(){
				b.data(this,"cancel.tipsy",false);
				var g=this;
				setTimeout(function(){
					if(!b.data(this,"cancel.tipsy")){
						var f=b.data(g,"active.tipsy");
						e.fade?f.stop().fadeOut(function(){
							b(this).remove()
						}):f.remove()
					}
				},100)
			})
		})
	};
	b.fn.tipsy.elementOptions=function(c,e){
		return b.metadata?b.extend({},e,b(c).metadata()):e
	};
	b.fn.tipsy.defaults={
		fade:false,
		fallback:"",
		gravity:"n",
		html:false,
		title:"title"
	};
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){
	$(".tipsyHover01").tipsy({
		gravity:"n",  /*可選參數“n”,“s”,“e”,“w”*/
		delayIn:0.1,
		delayOut:0.1,
		opacity:0.7,
		live:true,
		html:true
	});
	$(".tipsyHover02").tipsy({
		gravity:"s",  /*可選參數“n”,“s”,“e”,“w”*/
		delayIn:0.1,
		delayOut:0.1,
		opacity:0.7,
		live:true,
		html:true
	});
	$(".tipsyHover03").tipsy({
		gravity:"e",  /*可選參數“n”,“s”,“e”,“w”*/
		delayIn:0.1,
		delayOut:0.1,
		opacity:0.7,
		live:true,
		html:true
	});
	$(".tipsyHover04").tipsy({
		gravity:"w",  /*可選參數“n”,“s”,“e”,“w”*/
		delayIn:0.1,
		delayOut:0.1,
		opacity:0.7,
		live:true,
		html:true
	});
});	
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.demo{margin:100px auto;width:700px;}
.demo li{float:left;width:150px;height:150px;border:solid 1px #ddd;margin:0 11px;display:inline;}
/* tipsy */
.tipsy{padding:5px;font-size:11px;line-height:13px;background:url(images/tipsy.gif) no-repeat;opacity:0.9;}
.tipsy-inner{
	max-width:150px;padding:5px 8px;text-align:center;color:#fff;background-color:#221919;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.tipsy-north{background-position:top center;}
.tipsy-south{background-position:bottom center;}
.tipsy-east{background-position:right center;}
.tipsy-west{background-position:left center;}
</style>
<ul class="demo">
	<li>
		<a class="tipsyHover01" original-title="jquery圖片滾動與選項卡結合的圖片左右滾動焦點圖" href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="jquery圖片滾動與選項卡結合的圖片左右滾動焦點圖" src="images/small3818dbc8c924ed4edd242e19b35c04ad.jpg" /></a>
	</li>
	<li>
		<a class="tipsyHover02" original-title="jquery圖片放大滑過顯示放大圖片自適應瀏覽器圖片放大" href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="jquery圖片放大滑過顯示放大圖片自適應瀏覽器圖片放大" src="images/smallaf6f6540dc486648187e0ebae37ed9ae.jpg" /></a>
	</li>
	<li>
		<a class="tipsyHover03" title="jQuery廣告圖片各大商城首頁流行通欄廣告圖片" href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="jQuery廣告圖片各大商城首頁流行通欄廣告圖片" src="images/small03cff3545492bb97e8d0160c28b13b72.jpg" /></a>
	</li>
	<li>
		<a class="tipsyHover04" title="jquery 信息提示框 jquery提示插件自定義各種顏色顯示提示內容" href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="jquery 信息提示框 jquery提示插件自定義各種顏色顯示提示內容" src="images/small79d8deff292782ceaa45e08dc4d1d5a7.jpg" /></a>
	</li>
</ul>



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


熱門標簽: flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 浮動提示框 焦點圖 幻燈片 輪播圖 bar焦點圖 帶標題的焦點圖 圖片廣告
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子