js代码
/** * Created by joesbell on 2016/10/8. */ ;(function($) { var defaults = { background:"#000",//tips的背景颜色 color:"white", position:"r",//出现的位置 l--左边, r--右边 t--顶部 b--底部 parWidth:"",//父级元素的宽度 parHeight:"",//父级元素的高度 tipsJ:"10px",//tips的距离父级距离偏移量 tipsP:"20px",//tips的居中位置偏移量 padding:"10px",//文字提示内边距 txt:"helloWorld",//文字 IconPos:"10px",//小箭头居中位置偏移量 speed:"200",//tips出现的速度延迟 }; function se(){ setTimeout(function () { $(".tip_JS").remove(); },200) }; $.fn.JSTips= function(options) { var options = $.extend({}, defaults, options); return this.each(function() { var parentWidth=$(this).width(); var parentHeight=$(this).height(); options.parWidth=parentWidth; options.parHeight=parentHeight; // $(this).append(joesO(options)); $(this).on("mouseenter",function () { $(this).append(joesTips(options)); }); $(this).on("mouseleave",function () { se(); }) }); }; function joesTips(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 tipsP=parseInt(opts.tipsP); var tipsJ=parseInt(opts.tipsJ); var PW=opts.parWidth; var PH=opts.parHeight; var position=opts.position; var bg=opts.background; var pd=parseInt(opts.padding); var txt=opts.txt; var IconPos=opts.IconPos; var speed=parseInt(opts.speed); var color=opts.color; pe.appendTo(layE).css({ padding:pd, }); pe.html(txt); layE.appendTo(layEle); $(".test:after").css({ "border-color":bg }); // tips出现在右边 if(position=="r"){ layEle.css({ background:bg, left:PW+tipsJ, top:tipsP, color:color }).show(speed); cs.addClass("triangle-left").css({ top:IconPos, "border-right-color":bg }).appendTo(layE); }else if(position=="l"){ // tips出现在左边 layEle.css({ background:bg, right:PW+tipsJ, top:tipsP, color:color }).show(speed); cs.addClass("triangle-right").css({ top:IconPos, "border-left-color":bg }).appendTo(layE); }else if(position=="b"){ layEle.css({ background:bg, top:PH+tipsJ, left:tipsP, color:color }).show(speed); cs.addClass("triangle-up").css({ left:IconPos, "border-bottom-color":bg }).appendTo(layE); // tips出现在底部 }else if(position=="t"){ // tips出现在顶部 layEle.css({ background:bg, bottom:PH+tipsJ, left:tipsP, color:color }).show(speed); cs.addClass("triangle-down").css({ left:IconPos, "border-top-color":bg }).appendTo(layE); } return layEle } })(jQuery);
css代码
/*上箭头*/ .triangle-up { position: absolute; width:0; height:0; bottom: 100%; border:10px solid transparent; border-bottom-color:yellow; } /*下箭头*/ .triangle-down { position: absolute; width:0; height:0; top:100%; /*transform: translate(-50%,-50%);*/ border:10px solid transparent; border-top-color:yellow; } /*左箭头*/ .triangle-left { position: absolute; width:0; height:0; right: 100%; border:10px solid transparent; border-right-color:yellow; } /*右箭头*/ .triangle-right { position: absolute; width:0; height:0; left: 100%; margin: auto; /*transform: translate(-50%,0);*/ border:10px solid transparent; border-left-color:yellow; } .tip_JS{ position: absolute; display: none; width: auto; } .txt_JS{ position: relative; } .tipTxt_JS{ white-space: nowrap; }
测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .p{ position: relative; width: 500px; height: 500px; background: #000; margin: 0 auto; margin-top: 200px; } </style> <link rel="stylesheet" href="./Tips/myTips.css"> </head> <body> <div class="p"> <p style="color: wheat">我的第一个tips插件</p> </div> </body> <script src="jquery-1.12.2.min.js"></script> <script src="./Tips/myTips.js"></script> <script> $(".p").JSTips({ // background:"rgba(0,0,0,0.5)", // position:"l", // tipsP:"150px", // txt:"helloWorld", // IconPos:"10px", // speed:"200", }); </script> </html>
时间: 2024-11-05 06:02:34