jquery控制个性标题(title)(Tga)气泡提示美化框

  • 首页 > 代码研究院
  • 作者:梓熙
  • 时间: 2016年10月8日 20:09
  • 字数:1665 个
  • 字号:
  • 评论:0 条
  • 浏览:301 次
  • 百度:百度已收录
  • 分类: 代码研究院
  • 时间:2016-10-8 20:09 热度:301° 评论:0 条 

    首先添加jq代码:


    jQuery(document).ready(function($) {
    	var sweetTitles = {
    		x: 10,
    		y: 20,
    		tipElements: "a,span,img,div ",
    		noTitle: false,
    		init: function() {
    			var noTitle = this.noTitle;
    			$(this.tipElements).each(function() {
    				$(this).mouseover(function(e) {
    					if (noTitle) {
    						isTitle = true;
    					} else {
    						isTitle = $.trim(this.title) != '';
    					}
    					if (isTitle) {
    						this.myTitle = this.title;
    						this.title = "";
    						var tooltip = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-inner'>" + this.myTitle + "</div></div>";
    						$('body').append(tooltip);
    						$('.tooltip').css({
    							"top": (e.pageY + 40) + "px",
    							"left": (e.pageX - -5) + "px"
    						}).show('fast');
    					}
    				}).mouseout(function() {
    					if (this.myTitle != null) {
    						this.title = this.myTitle;
    						$('.tooltip').remove();
    					}
    				}).mousemove(function(e) {
    					$('.tooltip').css({
    						"top": (e.pageY + 20) + "px",
    						"left": (e.pageX - 5) + "px"
    					});
    				});
    			});
    		}
    	};
    	$(function() {
    		sweetTitles.init();
    	});
    });
    然后添加css
    /*提示框*/ .tooltip{font-size:12px;font-family:5b8b4f53;line-height:1.5;text-align:center;padding:6px 0;position:absolute;display:none} .tipsy-arrow{position:absolute;width:0;height:0;line-height:0;border:6px dashed #000;top:0;left:10%;border-bottom-style:solid;border-top:0;border-left-color:transparent;border-right-color:transparent} .tipsy-inner{background-color:#000;color:#fff;max-width:200px;padding:4px 8px 4px 8px;text-align:center;border-radius:5px}


    正文到此结束
    您阅读这篇文章共花了: 
    本文链接:http://zixiylw.top/56.html
    版权声明:若无特殊注明,本文皆为《梓熙》原创,转载请保留文章出处。
    捐赠支持:如果觉得这篇文章对您有帮助,请“扫一扫”鼓励作者!

    热门推荐

    Hello! How do you see it?

    你还可以输入250 / 250 个字

    嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗


    既然没有吐槽,那就赶紧抢沙发吧!

                   

    返回顶部    返回首页    手气不错    后花园   
    版权所有:梓熙博客    站点维护: 梓熙   +主题模板:【PJAX 梓熙主题】        sitemap