首页 / WordPress入门 / 为链接添加一个醒目的提示

为链接添加一个醒目的提示

    • 珂李斯

    发布于

    by

    可能你发现很多童鞋的博客的链接上会弹出一个半透明的醒目提示，这是通过Sweet Titles标题增强插件实现的…

    可能你发现很多童鞋的博客的链接上会弹出一个半透明的醒目提示，这是通过Sweet Titles标题增强插件实现的.

    Sweet Titles 这个名字源自于一个改变 Title 提示效果的 js 插件 Sweet Titles Finalized。此插件不但让你的 title 提示效果变得美观，而且可以显示出你将要点击的链接的 url，让用户知道自己将要去哪里，同时提升了用户感受度。另外，系统的 title 提示有时间延迟，利用 js 可以迅速的展示出来。

    不过个人感觉这个特效有点鸡肋，反而会干扰视线，影响浏览者阅读。

    插件加载的JS文件有点大5K多，而Leeiio童鞋提供的简化代码，只有不到2K，如果你喜欢这个效果那就加上吧（代码中符号冲突，被表情替代，但不会影响复制使用）：

    1. var sweetTitles = {
    2. x : 10, // @Number: x pixel value of current cursor position
    3. y : 20, // @Number: y pixel value of current cursor position
    4. tipElements : “a”, // @Array: Allowable elements that can have the toolTip,split with “,”
    5. noTitle : true, //if this value is false,when the elements has no title,it will not be show
    6. init : function() {
    7. var noTitle = this.noTitle;
    8. $(this.tipElements).each(function(){
    9. $(this).mouseover(function(e){
    10. if(noTitle){
    11. isTitle = true;
    12. }else{
    13. isTitle = $.trim(this.title) != ”;
    14. }
    15. if(isTitle){
    16. this.myTitle = this.title;
    17. this.myHref = this.href;
    18. this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+“…” : this.myHref);
    19. this.title = “”;
    20. var tooltip = “<div id=’tooltip’><p>”+this.myTitle+“<em>”+this.myHref+“</em>”+“</p></div>”;
    21. $(‘body’).append(tooltip);
    22. $(‘#tooltip’)
    23. .css({
    24. “opacity”:“0.8”,
    25. “top”:(e.pageY+20)+“px”,
    26. “left”:(e.pageX+10)+“px”
    27. }).show(‘fast’);
    28. }
    29. }).mouseout(function(){
    30. if(this.myTitle != null){
    31. this.title = this.myTitle;
    32. $(‘#tooltip’).remove();
    33. }
    34. }).mousemove(function(e){
    35. $(‘#tooltip’)
    36. .css({
    37. “top”:(e.pageY+20)+“px”,
    38. “left”:(e.pageX+10)+“px”
    39. });
    40. });
    41. });
    42. }
    43. };
    44. $(function(){
    45. sweetTitles.init();
    46. });

    代码很简洁，前提是你的主题已加载了 jQuery 库。

    有效果没有样式还不行，而要添加 css 样式才能让整个效果显得更加美妙。以下是 css样式供参考。

    1. body div#tooltip { position:absolute;z-index:1000;max-width:220px;width:auto !important;width:220px;background:#000;text-align:left;padding:5px;min-height:1em;}
    2. body div#tooltip p { margin:0;padding:0;color:#fff;font:12pxverdana,arial,sans-serif; }
    3. body div#tooltip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }

    以上代码来自：Sweet Titles for jQuery (美妙的标题提示)

    类别：WordPress入门、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！