jQuery鼠标移到小图显示大图效果

最新推荐文章于 2022-05-20 18:05:50 发布

转载最新推荐文章于 2022-05-20 18:05:50 发布 · 440 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xynetstudio/p/7859259.html

文章标签：

#javascript #ViewUI

本文介绍如何使用jQuery实现图片预览的Tooltip效果，通过鼠标悬停在带有特定类的链接上显示图片预览和标题，同时提供了完整的CSS样式、JavaScript代码及调用实例。

首先需要引入jQuery

<script type="text/javascript" src="js/jquery.js"></script>

使用到的CSS样式

.show_tooltip li {
 list-style:none;
 display:inline;
 padding:5px 5px 5px 5px;
}
/* tooltip */
#tooltip{
 position:absolute;
 border:1px solid #333;
 background:#f7f5d1;
 padding:3px 3px 3px 3px;
 color:#333;
 display:none;
}

用到的JavaScript：

<script type="text/javascript">
$(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='预览图'/>"+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"
   });
 });
})
</script>

调用实例：

<ul class="show_tooltip">
  <li><a href="image/slide1.png" class="tooltip" title="化无语 战场原黑仪"><img src="image/slide1.png" width="150" alt="化无语 战场原黑仪"></a></li>
  <li><a href="image/slide2.png" class="tooltip" title="化无语 战场原黑仪"><img src="image/slide2.png" alt="化无语 战场原黑仪" width="150"></a>
</li>
  <li><a href="image/slide3.png" class="tooltip" title="化无语 战场原黑仪"><img src="image/slide3.png" width="150" alt="化无语 战场原黑仪"></a></li>
</ul>