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

發(fā)布時間：2020-06-29 08:45:40 來源：網(wǎng)絡(luò) 閱讀：651 作者：小旭依然欄目：web開發(fā)

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

請轉(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; //獲取當(dāng)前元素相對于文檔窗口左偏移
					var rt = $this.offset().top;//獲取當(dāng)前元素相對于文檔窗口上偏移
					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>智械危機期間，當(dāng)埃及遭到沉重打擊后，這個國家的精銳狙擊手們?yōu)樵獨獯髠陌踩筷犔峁┝藦娪辛Φ闹г渲芯桶ò材取ぐ斃颉澜绻J的最出色的狙擊手之一。她的精準(zhǔn)、果斷和直覺使其自然而然地成為了守望先鋒突擊部隊的一員，最終結(jié)束了這場智械危機。</p>	
		</div>
		<div class="test2">
			<p>作為守望先鋒的創(chuàng)始成員之一，安娜利用她的技巧和專長保護家園和最親密的人。</p>
	        <p>智械危機期間，當(dāng)埃及遭到沉重打擊后，這個國家的精銳狙擊手們?yōu)樵獨獯髠陌踩筷犔峁┝藦娪辛Φ闹г?，其中就包括安娜·艾瑪莉——世界公認的最出色的狙擊手之一。她的精準(zhǔn)、果斷和直覺使其自然而然地成為了守望先鋒突擊部隊的一員，最終結(jié)束了這場智械危機。</p>
		</div>
		
	</body>
</html>

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

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽