Div代替Alt，Title，Jquery Tooltip , e.pageX

bo o ya ka

于 2012-12-31 09:18:00 发布

阅读量141

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/b400800/archive/2012/12/31/2840258.html

本文介绍了一个使用jQuery实现的鼠标悬停时显示图片预览的效果。通过修改元素的title属性并在鼠标移动时更新预览图的位置，实现了平滑的预览体验。此功能适用于增强网站交互性和用户体验。

$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
  this.myTitle = this.title;
  this.title = "";
  var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
  var imgUrl = $(this).children().attr("src");
  var tooltip = "<div id='tooltip'><img src='"+ imgUrl +"' alt='模板预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
  $("body").append(tooltip); //把它追加到文档中
  $("#tooltip")
   .css({
    "top": (e.pageY+y) + "px",
    "left": (e.pageX+x) + "px"
   }).show("fast");   //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
  this.title = this.myTitle;
  $("#tooltip").remove(); //移除
    }).mousemove(function(e){
  $("#tooltip")
   .css({
    "top": (e.pageY+y) + "px",
    "left": (e.pageX+x) + "px"
   });
});
})