搜索中...
2015/08/08

【JS】提示標籤 (title) 美化

喜歡設計部落格的博主應該常常用到tooltip,然而此次的美化卻包含了title提示標籤,只要在title裡填入內容就能輕鬆使用、提示跳出的速度更快。
範例展示
使用了<span>標籤
使用了<b>標籤
使用了<div>標籤
使用了<a>標籤


請將滑鼠移到上面五列項目
程式碼
 首先若 尚未載入jQuery庫 請先添加。
CSS.尋找並貼在 </b:skin> 之上 、或者使用自訂的新增CSS
.tooltip {
 position:absolute;
 z-index:1000; 
 max-width:300px; 
 width:auto!important; 
 width:auto; background:#FB9214; 
 border-radius: 5px; 
 text-align:left; 
 padding:3px;
 filter:alpha(opacity=80); /*IE,透明度50%*/
 -moz-opacity:0.8; /*Firefox,透明度50%*/
 opacity:0.8;
}

.tipsy-inner {
 margin:0;
 padding:0; 
 color:#FFFFFF;
 font:13px BenchNine,"Bebas Neue",Bebas,"Arial Narrow",Sans-Serif,"微軟正黑體"; 
}
JavaScript.尋找並貼在 </head> 之下:
<script>
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'>" + this.myTitle + "</div>";
                        $('body').append(tooltip);
                        $('.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 + 10) + "px"
                    });
                });
            });
        }
    };

    $(function() {
        sweetTitles.init();
    });
});
</script>
附加效果
原始的程式碼其實還有附加一個顯示連結url的功能,若想要此項功能可以參考 此網站,不過使用後只有url可以顯示美化後的提示標籤。
參考來源
主網: http://www.dustindiaz.com/
修改: http://www.iitboy.cn/

0 意見:

張貼留言