<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.p{
position: relative;
width: 100px;
height: 100px;
background: #000;
}
/*上箭头*/
.triangle-up {
position: absolute;
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid #000;
}
/*下箭头*/
.triangle-down {
display: inline-block;
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #0066cc;
}
/*左箭头*/
.triangle-left {
position: absolute;
width:0;
height:0;
left:-20px;
border:10px solid transparent;
border-right-color:yellow;
}
/*右箭头*/
.triangle-right {
width:0;
height:0;
border-top:50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid green;
}
.tip_JS{
position: absolute;
display: none;
}
.txt_JS{
position: relative;
/*width:100%;*/
/*height:100%;*/
/*line-height: 40px;*/
/*background: #000;*/
}
.tipTxt_JS{
white-space: nowrap;
}
/*.test:before{*/
/*content: ‘‘;*/
/*border-top: 9px solid transparent;!*方框上部分背景颜色为透明*!*/
/*border-bottom: 9px solid transparent;!*方框下部分背景为透明*!*/
/*border-right: 9px solid #000;!*箭头背景颜色*!*/
/*position: absolute;!*绝对定位1*!*/
/*top: 0px;!*距离顶部位置偏移量2*!*/
/*left: -9px;!*距离左边位置偏移量3*! !*123都是控制显示位置的*!*/
/*}*/
</style>
</head>
<body>
<div class="p">
<p style="color: wheat">的手机卡复活 </p>
</div>
</body>
<script src="jquery-1.12.2.min.js"></script>
<script>
;(function($) {
var defaults = {
background:"#000",//tips的背景颜色
position:"r",//出现的位置 l--左边， r--右边 t--顶部 b--底部
left:"100%",//左边偏移量
right:"100%",//右边偏移量
bottom:"100%",//底部偏移量
top:"100%",//顶部偏移量
padding:"20px",//文字提示内边距
txt:"呵呵呵",//文字
IconTop:"0px",//小箭头顶部位置
IconLeft:"0px",//小箭头左位置
IconRight:"0px",//小箭头右位置
IconBottom:"0px",//小箭头底部位置
speed:"1000"
};
$.fn.layout = function(options) {
var options = $.extend({}, defaults, options);
return this.each(function() {
$(this).append(joesO(options));
// $(this).on("mouseenter",function () {
// $(this).append(joesO(options));
// });
// $(this).on("mouseleave",function () {
// $(".tip_JS").remove();
// })
});
};
function joesO(opts) {
var layEle=$("<div class=‘tip_JS‘></div>");
var layE=$("<div class=‘txt_JS‘></div>");
var cs=$("<i></i>");
var pe=$("<p class=‘tipTxt_JS‘></p>")
var left=parseInt(opts.left);
var right=parseInt(opts.right);
var bottom=parseInt(opts.bottom);
var top=parseInt(opts.top);
var position=opts.position;
var bg=opts.background;
var pd=parseInt(opts.padding);
var txt=opts.txt;
var IconTop=opts.IconTop;
// var mw=parseInt(opts.minwidth);
var speed=parseInt(opts.speed);
// tips出现在右边
if(position=="r"){
layEle.css({
background:bg,
top:top,
left:left,
// padding:pd,
// minWidth:mw
}).show(speed);
cs.addClass("triangle-left").css({
top:IconTop,
"border-right-color":bg
}).appendTo(layE);
}else if(position=="l"){
// tips出现在左边
}else if(position=="b"){
// tips出现在底部
}else if(position=="t"){
// tips出现在右边
}
pe.appendTo(layE).css({
padding:pd,
});
pe.html(txt);
layE.appendTo(layEle);
$(".test:after").css({
"border-color":bg
});
return layEle
}
})(jQuery);
$(".p").layout({
background:"rgba(0,0,0,0.5)",
position:"r",
left:"120px",
top:"50px",
padding:"10px",
txt:"傻逼",
IconTop:"10px",
speed:"200",
})
</script>
</html>
时间： 2024-10-06 07:35:55