Oleh kerana ia ditulis di bawah Mac, tiada alat ujian penyemak imbas versi rendah yang tidak melakukan ujian keserasian khusus Selain itu, saya bukan orang hadapan, jadi harap bersabar dengan saya. 11.1, dan penyemak imbas versi rendah juga boleh melakukannya. Saya perlu memuat turun jquery sendiri. Saya ingin berkongsinya dengan anda
/** * jquery tips 提示插件 jquery.tips.js v0.1beta * * 使用方法 * $(selector).tips({ //selector 为jquery选择器 * msg:'your messages!', //你的提示消息 必填 * side:1, //提示窗显示位置 1,2,3,4 分别代表 上右下左 默认为1(上) 可选 * color:'#FFF', //提示文字色 默认为白色 可选 * bg:'#F00',//提示窗背景色 默认为红色 可选 * time:2,//自动关闭时间 默认2秒 设置0则不自动关闭 可选 * x:0,//横向偏移 正数向右偏移 负数向左偏移 默认为0 可选 * y:0,//纵向偏移 正数向下偏移 负数向上偏移 默认为0 可选 * }) * * */ (function ($) { $.fn.tips = function(options){ var defaults = { side:1, msg:'', color:'#FFF', bg:'#F00', time:2, x:0, y:0 } var options = $.extend(defaults, options); if (!options.msg||isNaN(options.side)) { throw new Error('params error'); } if(!$('#jquery_tips_style').length){ var style='<style id="jquery_tips_style" type="text/css">'; style+='.jq_tips_box{padding:10px;position:absolute;overflow:hidden;display:inline;display:none;z-index:10176523;}'; style+='.jq_tips_arrow{display:block;width:0px;height:0px;position:absolute;}'; style+='.jq_tips_top{border-left:10px solid transparent;left:20px;bottom:0px;}'; style+='.jq_tips_left{border-top:10px solid transparent;right:0px;top:18px;}'; style+='.jq_tips_bottom{border-left:10px solid transparent;left:20px;top:0px;}'; style+='.jq_tips_right{border-top:10px solid transparent;left:0px;top:18px;}'; style+='.jq_tips_info{word-wrap: break-word;word-break:normal;border-radius:4px;padding:5px 8px;max-width:130px;overflow:hidden;box-shadow:1px 1px 1px #999;font-size:12px;cursor:pointer;}'; style+='</style>'; $(document.body).append(style); } this.each(function(){ var element=$(this); var element_top=element.offset().top,element_left=element.offset().left,element_height=element.outerHeight(),element_width=element.outerWidth(); options.side=options.side<1?1:options.side>4?4:Math.round(options.side); var sideName=options.side==1?'top':options.side==2?'right':options.side==3?'bottom':options.side==4?'left':'top'; var tips=$('<div class="jq_tips_box"><i class="jq_tips_arrow jq_tips_'+sideName+'"></i><div class="jq_tips_info">'+options.msg+'</div></div>').appendTo(document.body); tips.find('.jq_tips_arrow').css('border-'+sideName,'10px solid '+options.bg); tips.find('.jq_tips_info').css({ color:options.color, backgroundColor:options.bg }); switch(options.side){ case 1: tips.css({ top:element_top-tips.outerHeight()+options.x, left:element_left-10+options.y }); break; case 2: tips.css({ top:element_top-20+options.x, left:element_left+element_width+options.y }); break; case 3: tips.css({ top:element_top+element_height+options.x, left:element_left-10+options.y }); break; case 4: tips.css({ top:element_top-20+options.x, left:element_left-tips.outerWidth()+options.y }); break; default: } var closeTime; tips.fadeIn('fast').click(function(){ clearTimeout(closeTime); tips.fadeOut('fast',function(){ tips.remove(); }) }) if(options.time){ closeTime=setTimeout(function(){ tips.click(); },options.time*1000); tips.hover(function(){ clearTimeout(closeTime); },function(){ closeTime=setTimeout(function(){ tips.click(); },options.time*1000); }) } }); return this; }; })(jQuery);
Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.