用jQuery实现图片提示效果：
图片的提示效果，我们经常会在网页上见到（比如淘宝，京东），如下图显示的效果：
效果图
用JQuery可以简单的实现这个效果,我们建立一个简单的网页加以实现，如下：
<body>
<h3>有效果：</h3>
<ul>
<li><a href="images/1.jpg" class="tooltip" title="Saber"><img src="images/1.jpg" alt="Saber" /></a></li>
<li><a href="images/2.jpg" class="tooltip" title="Excalibur"><img src="images/2.jpg" alt="Excalibur"/></a></li>
</ul>
</body>
要达到上面的显示效果首先要清楚jQuery中的两个事件，即：mouseover(鼠标移入)，mouseout(鼠标移除)；
具体思路
1.当鼠标滑入图片
- 创建一个
<div>元素，<div>元素的内容为<img>。 - 将创建的元素追加到文档中。
- 为它设置x坐标和y坐标，使它显示在鼠标的旁边。
2.当鼠标滑出图片时，移除<div>。
根据以上思路写下JQuery代码：
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='Fate'/><br/>"+this.title+"<\/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(); //移除
});
});
显示效果如下:
效果图
此时显示的效果有一个问题：当鼠标滑过后，<a>标签中的title属性的提示也会出现。
为了移除<a>标签中的title提示功能，我们可以用以下几个步骤解决。
1.当鼠标滑入图片时，给对象添加一个新属性myTitle，并且把title的值传给这个属性，然后将title设为空值。
JQuery代码如下：
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
2.当鼠标移除图片的时候再将myTitle的值赋回给title，因为当鼠标滑出时，需要考虑再次滑入时的title的值。如果不将myTitle的值赋title，那么第二次滑入，title将为空，那么提示图片下方的值就会显示为空。
JQuery代码如下：
this.title= this.myTitle ;
解决完所有问题后，完整的代码如下：
$(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 tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='Fate'/>"+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（鼠标在目标上移动）事件。
JQuery代码如下：
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
这样以来，我们的提示效果就可以跟随鼠标一起移动了╰(°▽°)╯
最后完整代码如下：
$(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 tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='Fate'/>"+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"
});
});
})
这样我们就简单的用jQuery实现了一个图片提示效果。(´∇｀)
网友评论