tooltip和title美化网站提示教程

广30/

图片[1]-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也是放到公用css文件里面
tooltip和title美化网站提示教程此处内容已隐藏,评论后刷新即可查看!

广30/

© 版权声明
THE END
喜欢就支持一下吧
点赞241 分享
风言风语 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片