最新公告
  • 欢迎您光临浪杉博客,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • tooltip和title美化网站提示教程

    教程简介

    浏览器自带的alt和title提示太丑了,所以我们需要美化一下,百度有许多,不过对我们这些小白来说很难。

    第一步

    放以下js到公用js里面

    var sweetTitles = {
    	x: 10,
    	y: 20,
    	tipElements: "a,span,img,div ",
    	noTitle: false,
    	init: function() {
    		var b = this.noTitle;
    		$(this.tipElements).each(function() {
    			$(this).mouseover(function(e) {
    				if (b) {
    					isTitle = true
    				} else {
    					isTitle = $.trim(this.title) != ''
    				}
    				if (isTitle) {
    					this.myTitle = this.title;
    					this.title = "";
    					var a = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-inner'>" + this.myTitle + "</div></div>";
    					$('body').append(a);
    					$('.tooltip').css({
    						"top": (e.pageY + 20) + "px",
    						"left": (e.pageX - 20) + "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 - 20) + "px"
    				})
    			})
    		})
    	}
    };
    $(function() {
    	sweetTitles.init()
    });

    第二步:css也是

    /*tips*/
    	.tooltip {
    	font-size:12px;
    	position:absolute;
    	padding:5px;
    	z-index:100000;
    	opacity:.8;
    	font-family:Microsoft Yahei
    }
    .tipsy-arrow {
    	position:absolute;
    	width:0;
    	height:0;
    	line-height:0;
    	border:6px dashed #000;
    	top:0;
    	left:20%;
    	margin-left:-5px;
    	border-bottom-style:solid;
    	border-top:0;
    	border-left-color:transparent;
    	border-right-color:transparent
    }
    .tipsy-arrow-n {
    	border-bottom-color:#666
    }
    .tipsy-inner {
    	background-color:#666;
    	color:#FFF;
    	max-width:200px;
    	padding:5px 8px 4px 8px;
    	text-align:center;
    	border-radius:3px
    }
    1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!byzps@qq.com
    2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
    3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

    浪杉博客 » tooltip和title美化网站提示教程