以WordPress为例讲解jQuery美化页面Title的方法


Posted in Javascript onMay 23, 2016

这里选取的例子,便是 WordPress 中比较有名的美化超链接Title效果,一般的 title 效果是把鼠标放到 a 元素中便会显示一个黄底色框,而且是延时显示,这样显然不是一个好的 UE ,所以美化的 Title 便诞生了,在本站现在的主题 Line 的侧边栏中把鼠标放到文章标题便显示文章摘要的功能便是使用美化 Title 的原理做的,之所以选取这个例子,一是该例子中很好的体现了 jQuery 中的 DOM 操作,二是美化 Title 在 WordPress 中比较常用,可以供需要做美化 Title 的人理解其中的原理。同时因为之前对 DOM 和美化 Title 有所研究,因此这篇笔记的内容将会叙述得更加丰富!

美化 Title 的效果很简单,需要的是鼠标移动到超链接的那一刻就出现 Title 提示,当然也可以适当添加一些css作美化之用,以配合自己的主题。

首先写一段 Html 作为演示

<div id="newtitle">
  <h2>美化Title</h2>
  <ul>
    <li><a href="#" title="这是Title1">Title1</a></li>
    <li><a href="#" title="这是Title2">Title2</a></li>
    <li><a href="#" title="这是Title3">Title3</a></li>
    <li><a href="#" title="这是Title4">Title4</a></li>
    <li><a href="#" title="这是Title5">Title5</a></li>
    <li><a href="#" title="这是Title6">Title6</a></li>
    <li><a href="#" title="这是Title7">Title7</a></li>
    <li><a href="#" title="这是Title8">Title8</a></li>
  </ul>
</div>

 
接着我们需要完成两件事,一是当鼠标滑入超链接时创建一个内容为 title 内容的 div ,而是当鼠标滑出超链接时移除该 div 。

这时显然需要用到 mouse 方法,在这里选用 mouseover 与 mouseout ,或是 mouseenter 与 mouseleave 。说到这里小插一段,科普推广一下上面两组方法的区别:

上面两组方法的功能均是当鼠标悬停在某网页元素上时触发事件,不同的是, mouseover 与 mouseout 会同时绑定到该元素的子元素上,因此如果一个网页元素内有多个子元素时很有可能会发生在元素上一移动鼠标就会触发事件的情况。于是从 jQuery 1.3 开始便增加了两个新的 mouse 方法—— mouseenter 与 mouseleave ,使用 mouseenter 与 mouseleave 并不影响子元素。因为在上面的例子中,选取的网页元素是 a 标签,一般不会有子元素,所以用上面两组方法均可。

回到我们需要完成的第一步——创建 div 。把内容追加到文档中可以使用 append() ,追加的内容为超链接的 title ,可以直接获取 title 属性值,为了使追加的 div 显示在该超链接旁边,还可以使用 css() ,当然在这之前要先设置插入的 div 的 css —— position: absolute; 而第二步从文档中移除元素可以使用 remove() 方法。具体的代码如下:

$(function(){
  //为提示框预设一定的top和left值,以免提示框与超链接的距离太近
  var x = 15;
  var y = 15;
  $("#newtitle a").mouseenter(function(e){
      //记录title,以便下面清空title后能重新获取title的值
      this.myTitle = this.title; 
      this.title = "";
      var beatitle = "<div id='beatitle'>"+this.myTitle+"</div>";
      $("#newtitle").append(beatitle);
      $("#beatitle")
        .css({
          "opacity":"0.6",
          "top": (e.pageY+y) + "px",
          "left": (e.pageX+x) + "px"
          }).show("fast");
  }).mouseleave(function(){
      this.title = this.myTitle;
      $("#beatitle").remove();
  });
})

 
这时美化 Title 的效果基本已经完成了,只要使用 mousemove() 方法使美化的 Title 跟着鼠标移动,同时可以加一段小代码使美化 Title 中显示超链接的 URL ,这个可以根据个人喜好加进去,本人个人对这个效果无爱了,喜欢的童鞋可以使用下面的完整代码!

$(function(){
  var x = 15;
  var y = 15;
  //为提示框预设一定的top和left值,以免提示框与超链接的距离太近
  $("#newtitle a").mouseenter(function(e){
      //记录title,以便下面清空title后能重新获取title的值
      this.myTitle = this.title;
      this.myHref = this.href;
      this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);
      this.title = "";
      var beatitle = "<div id='beatitle'>"+this.myTitle+"<span>"+this.myHref+"</span>"+"</div>";
      $("#newtitle").append(beatitle);
      $("#beatitle")
        .css({
          "opacity":"0.6",
          "top": (e.pageY+y) + "px",
          "left": (e.pageX+x) + "px"
          }).show("fast");
  }).mouseleave(function(){
      this.title = this.myTitle;
      $("#beatitle").remove();
  }).mousemove(function(e){
      $("#beatitle")
        .css({
          "top": (e.pageY+y)+"px",
          "left": (e.pageX+x)+"px"
        });
  });
})

具体的效果也可以看demo 噢!

最后附上 css ,各位童鞋可以根据自己的主题修改!

body {font-size: 12pt; color: #99CC33; }
h2 {font-size: 14pt; }
ul {list-style: none; padding: 0 0 0 10px;}
ul li {margin-bottom: 5px; }
a {text-decoration: none; color: #99CC33; }
#beatitle {position: absolute; z-index: 1000; max-width: 260px; width: auto !important; width: 220px; background: #000; text-align: left; padding: 5px; min-height: 1em; }
#beatitle span {display: block; color: #FF9900; }

 
相信各位童鞋看了上面的原理和代码应该也猜到我的侧边栏里的摘要提示是怎么做的了!就是在超链接的 title 中添加内容截断了,这里跟大家分享我的截断代码,有兴趣的果断折腾吧!

<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 240,'...'); ?>">
好了,我们再来更加完整地总结一下实现title提示的核心代码:
/*
调用示例:
$(document).ready(function(){
$('.quicktip').quberTip({
 speed:200
});
});
<a href='' class='quicktip' title='Information about this link'>desktop publishing</a>
*/
jQuery.fn.quberTip = function (options) {
  var defaults = {
    speed: 500,
    xOffset: 10,
    yOffset: 10
  };
  var options = $.extend(defaults, options);
  return this.each(function () {
    var $this = jQuery(this);
    if ($this.attr('title') != undefined) {
      //Pass the title to a variable and then remove it from DOM
      if ($this.attr('title') != '') {
        var tipTitle = ($this.attr('title'));
      } else {
        var tipTitle = 'QuberTip';
      }
      //Remove title attribute
      $this.removeAttr('title');
      $(this).hover(function (e) {
        //      $(this).css('cursor', 'pointer');
        $("body").append("<div id='tooltip'>" + tipTitle + "</div>");
        $("#tooltip").css({ "position": "absolute",
          "z-index": "9999",
          "background": "#D3DDF5",
          "background-image": "url(../../Quber_Image/Quber_Common/Quber_TB_TitltBG.png)",
          "padding": "5px",
          "opacity": "0.9",
          "border": "1px solid #A3C0E8",
          "-moz-border-radius": "3px",
          "border-radius": "3px",
          "-webkit-border-radius": "3px",
          "font-weight": "normal",
          "font-size": "12px",
          "display": "none"
        });
        $("#tooltip")
.css("top", (e.pageY + defaults.xOffset) + "px")
      .css("left", (e.pageX + defaults.yOffset) + "px")
      .fadeIn(options.speed);
      }, function () {
        //Remove the tooltip from the DOM
        $("#tooltip").remove();
      });
      $(this).mousemove(function (e) {
        $("#tooltip")
  .css("top", (e.pageY + defaults.xOffset) + "px")
  .css("left", (e.pageX + defaults.yOffset) + "px");
      });
    }
  });
};
Javascript 相关文章推荐
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
AngularJS入门教程(零):引导程序
Dec 06 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
javascript基础知识
Jun 07 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
javascript iframe跨域详解
Oct 26 Javascript
js实现旋转木马效果
Mar 17 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
jQuery中选择器的基础使用教程
May 23 #Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 #Javascript
AngularJS上拉加载问题解决方法
May 23 #Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 #Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 #Javascript
用js实现放大镜的效果的简单实例
May 23 #Javascript
jQuery实现摸拟alert提示框
May 22 #Javascript
You might like
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
js实现上传图片之上传前预览图片
2013/03/25 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
Python编程中time模块的一些关键用法解析
2016/01/19 Python
详解python单元测试框架unittest
2018/07/02 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
Python根据成绩分析系统浅析
2019/02/11 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
什么是接口(Interface)?
2013/02/01 面试题
广州一家公司的.NET面试题
2016/06/11 面试题
毕业生个人求职信范例分享
2013/12/17 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
供电工程专业求职信
2014/08/09 职场文书
邓小平理论心得体会
2014/09/09 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
升职自荐书
2019/05/09 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android