jquery tip插件代码实例
分类：实例代码
分享一段代码实例，它实现了tip插件功能。
并且能够自由定义弹出的方位。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
.tip{
width: 200px;
text-align: center;
position: relative;
border:1px solid #ccc;
height: 50px;
line-height: 50px;
left: 50%;
margin-top: 50px;
transform: translateX(-50%);
}
.tip-container{
position: absolute;
box-shadow: 2px 2px 5px #f9f9f9;
z-index: 999;
display: none;
}
.tip-container .tip-point-top,
.tip-container .tip-point-bottom,
.tip-container .tip-point-left,
.tip-container .tip-point-right{
border:1px solid #dcdcdc;
position: relative;
background: white;
}
.tip-content{
padding:5px 10px;
background: white;
font-size: 12px;
line-height: 1.7;
font-family: "Helvetica Neue",Helvetica,Arial,"MicroSoft YaHei";
}
.tip-container .tip-point-top::after,
.tip-container .tip-point-top::before,
.tip-container .tip-point-bottom::after,
.tip-container .tip-point-bottom::before{
content:"";
position: absolute;
border:solid transparent;
left: 50%;
width: 0;
height: 0;
transform: translate3d(-50%,0,0);
-webkit-transform: translate3d(-50%,0,0);
}
.tip-container .tip-point-right::after,
.tip-container .tip-point-right::before,
.tip-container .tip-point-left::after,
.tip-container .tip-point-left::before{
content:"";
position: absolute;
border:solid transparent;
top: 50%;
width: 0;
height: 0;
transform: translate3d(0,-50%,0);
-webkit-transform: translate3d(0,-50%,0);
}
/*tip-point-top*/
.tip-container .tip-point-top::after{
border-top-color: #fff;
top: 100%;
border-width: 5px;
}
.tip-container .tip-point-top::before {
border-top-color: #dcdcdc;
top: 100%;
border-width: 7px;
}
/*tip-point-bottom*/
.tip-container .tip-point-bottom::after{
border-bottom-color: #fff;
bottom: 100%;
border-width: 5px;
}
.tip-container .tip-point-bottom::before {
border-bottom-color: #dcdcdc;
bottom: 100%;
border-width: 7px;
}
/*tip-point-right*/
.tip-container .tip-point-right::after{
border-right-color: #fff;
right: 100%;
border-width: 5px;
}
.tip-container .tip-point-right::before {
border-right-color: #dcdcdc;
right: 100%;
border-width: 7px;
}
/*tip-point-left*/
.tip-container .tip-point-left::after{
border-left-color: #fff;
left: 100%;
border-width: 5px;
}
.tip-container .tip-point-left::before {
border-left-color: #dcdcdc;
left: 100%;
border-width: 7px;
}
</style>
</head>
<body>
<div class="tip" data-tip="前端教程网欢迎您" data-mode="top">前端教程网欢迎您</div>
<div class="tip" data-tip="本站url地址是www.pipipi.net" data-mode="bottom">www.pipipi.net</div>
<div class="tip" data-tip="分享和互助式本站的宗旨" data-mode="right">分享和互助式本站的宗旨</div>
<div class="tip" data-tip="没有人一开始就是高手" data-mode="left">没有人一开始就是高手</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
(function($, window, document, undefined) {
var modePos;
$.fn.tip = function(options) {
var set = $.extend({
"mode": "bottom",
"speed": 300,
"tipText": "提示内容"
}, options);
if (!modePos) {
//策略模式
//算法
modePos = {
top: function(t, tip) {
return {
left: t.offset().left + (t.width() - tip.width()) / 2 + "px",
top: t.offset().top - tip.height() - 12 + "px"
}
},
bottom: function(t, tip) {
return {
left: this.top(t, tip).left,
top: t.offset().top + t.height() + 12 + "px"
}
},
left: function(t, tip) {
return {
left: t.offset().left - tip.width() - 12 + "px",
top: t.offset().top + (t.height() - tip.height()) / 2 + "px"
}
},
right: function(t, tip) {
return {
left: t.offset().left + t.width() + 12 + "px",
top: t.offset().top + (t.height() - tip.height()) / 2 + "px"
}
}
};
}
function Tip(_this) {
var _that = $(_this);
var _mode = set.mode;
var tipText = set.tipText;
var _tip = ".tip-container";
if (_that.data("mode")) {
_mode = _that.data("mode");
}
if (_that.data("tip")) {
tipText = _that.data("tip");
}
_that.css("cursor", "pointer");
_that.hover(function() {
var _tipHtml = '<div class="tip-container"><div class="tip-point-'
+ _mode + '"><div class="tip-content">'
+ tipText + '</div></div></div>';
_that.removeAttr("title alt");
$("body").append(_tipHtml);
$(_tip).css(modePos[_mode](_that, $(_tip))).fadeIn(set.speed);
}, function() {
$(".tip-container").remove();
});
}
return this.each(function() {
return new Tip(this);
});
}
})(jQuery, window, document);
$(".tip").tip();
</script>
</html>
jquery tip插件代码实例，这样的场景在实际项目中还是用的比较多的，关于jquery tip插件代码实例就介绍到这了。
jquery tip插件代码实例属于前端实例代码，有关更多实例代码大家可以查看。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu