分享程序员开发的那些事...
更新时间：2022-09-07 15:03:12
工作需要，网站悬浮提示框要求出现在指定元素上方，由于工作量修改比较大所以要求全站通用，所以写了一个juqery插件，插件很简单，大家可以自行更改样式。
请转载此文的朋友务必附带原文链接，谢谢。
原文链接：http://xuyran.blog.51cto.com/11641754/1876266
插件代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<!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" style="margin-top: 50px;">提示框</button>
<div class="test1">
<p>作为守望先锋的创始成员之一，安娜利用她的技巧和专长保护家园和最亲密的人。</p>
<p>智械危机期间，当埃及遭到沉重打击后，这个国家的精锐狙击手们为元气大伤的安全部队提供了强有力的支援，其中就包括安娜·艾玛莉——世界公认的最出色的狙击手之一。她的精准、果断和直觉使其自然而然地成为了守望先锋突击部队的一员，最终结束了这场智械危机。</p>
</div>
<div class="test2">
<p>作为守望先锋的创始成员之一，安娜利用她的技巧和专长保护家园和最亲密的人。</p>
<p>智械危机期间，当埃及遭到沉重打击后，这个国家的精锐狙击手们为元气大伤的安全部队提供了强有力的支援，其中就包括安娜·艾玛莉——世界公认的最出色的狙击手之一。她的精准、果断和直觉使其自然而然地成为了守望先锋突击部队的一员，最终结束了这场智械危机。</p>
</div>
</body>
</html> |
本文转自 小旭依然 51CTO博客，原文链接:http://blog.51cto.com/xuyran/1876266
