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

Posted 2020-10-15 轩宇网工作室

首先需要引入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>

效果图：