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

     

    美化演示

    tooltip和title美化网站提示教程-第1张图片-零零娱乐网

     

    教程简介

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

    第一步

    放以下js到公用js里面

    JavaScript
    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()
    }); 本段代码来自 http://www.00ylw.com/code/2036.html
     

    第二步

    css也是

    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
    } 本段代码来自 http://www.00ylw.com/code/2036.html

     


    关注微信公众号『影客学习网』

    第一时间了解最新网络动态关注博主不迷路~

    1. 本站所有资源来源于用户上传和互联网,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流!
    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务,除了本站原创售价资源都有技术服务,请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
    影客学习网 » tooltip和title美化网站提示教程

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    为什么评论刷新后不显示?
    评论文章的时候,每次评论都要填网站下面一定要勾选,否则可能下载链接显示不出来!一定要记住!

    发表评论

    • 49会员总数(位)
    • 846资源总数(个)
    • 3本周发布(个)
    • 0 今日发布(个)
    • 533稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    升级SVIP尊享更多特权立即升级