标签：
<!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>
标签：
原文地址：http://www.cnblogs.com/joesbell/p/5924618.html
