在指定位置上方出现通用jquery悬浮提示框插件全站通用

工作需要，网站悬浮提示框要求出现在指定元素上方，由于工作量修改比较大所以要求全站通用，所以写了一个juqery插件，插件很简单，大家可以自行更改样式。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：主机域名、雅安服务器托管、营销软件、网站建设、长垣网站维护、网站推广。

请转载此文的朋友务必附带原文链接，谢谢。

原文链接：http://xuyran.blog.51cto.com/11641754/1876266

插件代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../Content/js/jquery-1.9.1.min.js"></script>
	</head>
	<style>
		/*遮罩*/
		*{margin: 0px; padding: 0px;font-family: "微软雅黑";}
		.test1{width: 300px;margin-top: 200px;border: solid 1px #37C3FF;margin-left: 400px;}
		.test2{width: 600px;margin-top: 200px;border: solid 1px #37C3FF;margin-left: 400px;height: 500px;}
		alert-box-small02{line-height:35px;background: rgba(0,0,0,.8);position: absolute;height: 35px;display: none;min-width: 180px;
		font-size: 18px;font-weight: bold;color: #FFFFFF;text-align: center;border-radius: 5px;bottom: 0;z-index: 100;}
	</style>
	<script>
		//提示框插件
		;(function($) {
			$.fn.tooltips = function(options){
				$.fn.tooltips.defaults = {
					txt:"",
					left:""
				}
				var opts = $.extend({}, $.fn.tooltips.defaults, options);  
				return this.each(function(){
					$this = $(this);
					var lf = $this.offset().left; //获取当前元素相对于文档窗口左偏移
					var rt = $this.offset().top;//获取当前元素相对于文档窗口上偏移
					var bo = $(window).height() - rt; //获取指定出现的下偏移，此处为了实现从下往上滑出效果，因此需要给其定位bottom属性
					var elem = '<div class="alert-box-small02">' + opts["txt"] + '</div>';
					$("body").append(elem);
					var boxWidth = $(".alert-box-small02").outerWidth();
					var divLeft = opts["left"] == ""? -(boxWidth-$this.outerWidth())/2:opts["left"];
					$(".alert-box-small02").css({
						bottom:bo + 6,
						left:parseInt(divLeft） + lf +'px'
					});	
					$(".alert-box-small02").slideDown("fast").delay("400").fadeOut(200);
					setTimeout(function(){
						$(".alert-box-small02").remove();
					},800);
				});
			}
		
		})(jQuery);
		//调用,全站通用
		$(function(){
			$("#button02").tooltips({
				txt:"提示框1测试提示框1测试提示框1",
				left:"0"
			});
			$(".test1").tooltips({txt:"dsdfadfafaf"});
			$(".test2").tooltips({
				txt:"提示框2测试提示框2测试提示框2测试提示框2测试提示框2测试",
			});
		})

	</script>
	<body>
	    <button id="button02" >提示框</button>
		<div class="test1">
			<p>作为守望先锋的创始成员之一，安娜利用她的技巧和专长保护家园和最亲密的人。</p>
	        <p>智械危机期间，当埃及遭到沉重打击后，这个国家的精锐狙击手们为元气大伤的安全部队提供了强有力的支援，其中就包括安娜·艾玛莉——世界公认的最出色的狙击手之一。她的精准、果断和直觉使其自然而然地成为了守望先锋突击部队的一员，最终结束了这场智械危机。</p>	
		</div>
		<div class="test2">
			<p>作为守望先锋的创始成员之一，安娜利用她的技巧和专长保护家园和最亲密的人。</p>
	        <p>智械危机期间，当埃及遭到沉重打击后，这个国家的精锐狙击手们为元气大伤的安全部队提供了强有力的支援，其中就包括安娜·艾玛莉——世界公认的最出色的狙击手之一。她的精准、果断和直觉使其自然而然地成为了守望先锋突击部队的一员，最终结束了这场智械危机。</p>
		</div>
		
	</body>
</html>

在指定位置上方出现通用jquery悬浮提示框插件全站通用

当前题目：在指定位置上方出现通用jquery悬浮提示框插件全站通用
网站网址：https://www.cdcxhl.com/article36/jcsopg.html

成都网站建设公司_创新互联，为您提供全网营销推广、微信小程序、品牌网站设计、动态网站、搜索引擎优化、定制开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容