以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 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
javascript dom 操作详解 js加强
Jul 13 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 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
PHP中对数据库操作的封装
2006/10/09 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
简述JS控制台的使用
2018/07/15 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
总结python爬虫抓站的实用技巧
2016/08/09 Python
python实现简易通讯录修改版
2018/03/13 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
学习python的前途 python挣钱
2019/02/27 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
python如何使用代码运行助手
2020/07/03 Python
python时间time模块处理大全
2020/10/25 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
int和Integer有什么区别
2013/05/25 面试题
小学教师自我鉴定
2013/11/07 职场文书
英语专业推荐信
2013/11/16 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
小学数学教师研修日志
2015/11/13 职场文书
总结Python使用过程中的bug
2021/06/18 Python