jquery提示框插件自定义多个方向浮动提示层



101 400 134



特效描述:提示框插件 自定义方向浮动 提示层,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

加群请备注:从官网了解到