用#Jquery#控制网页个性标题(title)(Tga)气泡提示美化框

Jquerytooltip控制网页个性标题#title#(Tga)气泡提示美化框样式

无意间访问@东子的博客,发现其提示框蛮不错的。就向他请教了下,感谢@东子的讲解,现将方法分享给大家!

效果演示

提示美化框

(如果本站没改模板的话,应该能看到)

添加Jquery代码:

	//个性title提示样式
	$(function() {
    $("a").each(function(b) {//这里是控制标签
        if (this.title) {
            var c = this.title; //把title的赋给自定义属性 myTilte ,屏蔽自带提示
            var a = 30; //设置提示框相对于偏移位置,防止遮挡鼠标
            $(this).mouseover(function(d) { //鼠标移上事件
                this.title = "";
                $("body").append('<div id="tooltip">' + c + "</div>"); //创建提示框,添加到页面中
                $("#tooltip").css({
                    left: (d.pageX + a) + "px",
                    top: d.pageY + "px",
                    opacity: "0.8"
                }).show(250) //设置提示框的坐标,并显示
            }).mouseout(function() { //鼠标移出事件
                this.title = c; //重新设置title
                $("#tooltip").remove() //移除弹出框
            }).mousemove(function(d) { //跟随鼠标移动事件
                $("#tooltip").css({
                    left: (d.pageX + a) + "px",
                    top: d.pageY + "px"
                })
            })
        }
    })
	});

CSS样式:(建议添到CSS尾端)

/* 个性title提示样式 */
#tooltip{background:#DDD;color:#000000;text-align:center;margin-right:10px;position:absolute;z-index:9999;display:none;box-shadow:0 0 5px #666;border:1px dashed #FFF;padding:3px 8px;font-size:12px;}

另一种样式,效果跟大前端D8模版侧栏活跃读者的 title 效果一样。

/* 个性title提示样式 */
#tooltip{background:#000;color:#f3f3f3;text-align:center;padding:6px 0;position:absolute;z-index:9999;display:none;border-radius:3px;box-shadow:0 0 3px #000;padding:3px 8px;font-size:12px;text-shadow:none;}
#tooltip:before{position: absolute;width: 0;height: 0;line-height: 0;border: 6px dashed #000;top: -6px;left:15px;border-bottom-style: solid;border-top: none;border-left-color: transparent;border-right-color: transparent;content:''}

欢迎各位转载,让更多同胞美化自己的wordpress博客!

发表评论
加载中...
  • Clovers 4个月前 (07-24)

    你好 请问 Jquery代码是添加到当前主题额functions.php文件里面吗?测试打不开网站了 wp4.7 谢谢

    查看对话
    • 微饭君 微饭君 4个月前 (07-24) 官方

      Jquery代码加到主题的JS文件中

  • 喵喵 7个月前 (04-21)

    博主,这个tooltip是放在哪里的

    查看对话
  • 皇家圣光迪莫 3年前 (2015-01-14)

    网速不行 空间免费卡的很 早就没有研究的欲望了。。。好比修改了好不容易传上去 加载满哦

  • 小小贺 3年前 (2015-01-11)

    我的欲思主题的,添加出现错误,望博主指教

    查看对话
    • 微饭君 微Fan 3年前 (2015-01-12) 官方

      没用过欲思主题

      • 小小贺 3年前 (2015-01-12)

        博主,你这主题是什么,也很好看

      • 小小贺 3年前 (2015-01-13)

        添加Jquery代码:

        这个是添加在哪里呢

  • 孙宇浩 4年前 (2014-06-10)

    提个建议哈,那个气泡提示框也弄成圆角的,看着更好些

  • 孙宇浩 4年前 (2014-06-10)

    上面的Jquery代码添加到哪里呢。我也是D8主题的。(小da白shen路qiu过zhu)

    查看对话
    • 陈林の博客 3年前 (2014-09-16)

      同D8 你把Jquery代码添加到哪里的?

      • 微凉 3年前 (2014-09-16)

        将我的JS文件【http://pic.weeiy.com/wp-content/themes/dfan/js/jquery.js】下载到你的主题里面替换即可!

相关文章