在指定位置上方出現(xiàn)通用jquery懸浮提示框插件全站通用

工作需要，網(wǎng)站懸浮提示框要求出現(xiàn)在指定元素上方，由于工作量修改比較大所以要求全站通用，所以寫了一個juqery插件，插件很簡單，大家可以自行更改樣式。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：主機域名、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、長垣網(wǎng)站維護、網(wǎng)站推廣。

請轉(zhuǎn)載此文的朋友務(wù)必附帶原文鏈接，謝謝。

原文鏈接：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; //獲取指定出現(xiàn)的下偏移，此處為了實現(xiàn)從下往上滑出效果，因此需要給其定位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);
		//調(diào)用,全站通用
		$(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>作為守望先鋒的創(chuàng)始成員之一，安娜利用她的技巧和專長保護家園和最親密的人。</p>
	        <p>智械危機期間，當埃及遭到沉重打擊后，這個國家的精銳狙擊手們?yōu)樵獨獯髠陌踩筷犔峁┝藦娪辛Φ闹г?，其中就包括安娜·艾瑪莉——世界公認的最出色的狙擊手之一。她的精準、果斷和直覺使其自然而然地成為了守望先鋒突擊部隊的一員，最終結(jié)束了這場智械危機。</p>	
		</div>
		<div class="test2">
			<p>作為守望先鋒的創(chuàng)始成員之一，安娜利用她的技巧和專長保護家園和最親密的人。</p>
	        <p>智械危機期間，當埃及遭到沉重打擊后，這個國家的精銳狙擊手們?yōu)樵獨獯髠陌踩筷犔峁┝藦娪辛Φ闹г渲芯桶ò材取ぐ斃颉澜绻J的最出色的狙擊手之一。她的精準、果斷和直覺使其自然而然地成為了守望先鋒突擊部隊的一員，最終結(jié)束了這場智械危機。</p>
		</div>
		
	</body>
</html>

在指定位置上方出現(xiàn)通用jquery懸浮提示框插件全站通用

當前題目：在指定位置上方出現(xiàn)通用jquery懸浮提示框插件全站通用
網(wǎng)站網(wǎng)址：http://bm7419.com/article36/jcsopg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、微信小程序、品牌網(wǎng)站設(shè)計、動態(tài)網(wǎng)站、搜索引擎優(yōu)化、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管