在指定位置上方出现通用jquery悬浮提示框插件全站通用
生活随笔
收集整理的這篇文章主要介紹了
在指定位置上方出现通用jquery悬浮提示框插件全站通用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
工作需要，網站懸浮提示框要求出現在指定元素上方，由于工作量修改比較大所以要求全站通用，所以寫了一個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
總結
以上是生活随笔為你收集整理的在指定位置上方出现通用jquery悬浮提示框插件全站通用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Nginx源代码安装
- 下一篇： BZOJ 2431 HAOI2009 在