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

发布时间:2020-05-05

可能你发现很多童鞋的博客的链接上会弹出一个半透明的醒目提示,这是通过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凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为2000多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。大熊wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18324743309,我们会详细为你一一解答你心中的疑难。

相关文章

写给所有做网站的朋友的一封信

写给所有做网站的朋友的一封信

现在就开始执行“1+N”互联网推广和没有开始执行的人,一两天看不出任何区别; 一两个月看来差异也是微乎其微的;但在2-5年的长远时间来看的时候,你的高质量询盘不断增加,你的互联网资产已经建立完成,对手已经很难匹敌,现在你看到这段文字的时候就是最好的开始,现在就是最好的时候,马上开始“1+N”体系的整体互联网推广吧,我们和你一起,开创互联网大未来!

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
wordpress建站免费入门,并提供价格合理的wordpress建站套餐。