jq鼠标悬浮小图弹出大图效果详解

最新推荐文章于 2023-08-10 15:33:05 发布

林中明月间。

最新推荐文章于 2023-08-10 15:33:05 发布

阅读量981

点赞数

分类专栏： JQuery

JQuery 专栏收录该内容

61 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery的鼠标悬停时放大图片的效果制作</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
* {
  margin:0;
  padding:0;
}
img{
  vertical-align:bottom;
  border:none;
}
body{
  background:#f0f0f0;
  height:800px;
  font-family:Arial;
}
ul {
  list-style:none;
}
h1{
  font-size:20px;
  width:680px;
  margin:3% auto 5px;
  color:#202020;
}
ul#gallery{
  width:660px;
  margin:0 auto 10px;
  padding-left:20px;
  border:1px solid #d3d3d3;
  background:#fff;
  overflow:hidden;
}
ul#gallery li{
  width:200px;
  height:200px;
  float:left;
  margin:20px 20px 20px 0;
  display:inline;
}
ul#gallery li a.smallimage{
  background:#333;
  display:block;
  width:200px;
  height:200px;
}
#bigimage{
  position:absolute;
  display:none;
}
#bigimage img{
  width:400px;
  height:400px;
  padding:5px;
  background:#fff;
  border:1px solid #e3e3e3;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){ 
  var x = 22;
  var y = 20;
    
  $("a.smallimage").hover(function(e){
    $("body").append('<p id="bigimage"><img src="'+ this.rel + '" alt="" /></p>');
    $(this).find('img').stop().fadeTo('slow',0.5);  
    widthJudge(e);
    $("#bigimage").fadeIn('fast');
  },function(){
    $(this).find('img').stop().fadeTo('slow',1);
    $("#bigimage").remove();
  }); 
  $("a.smallimage").mousemove(function(e){
    widthJudge(e);
  }); 
  function widthJudge(e){
    var marginRight = document.documentElement.clientWidth - e.pageX; 
    var imageWidth = $("#bigimage").width();
    if(marginRight < imageWidth){
      x = imageWidth + 22;
      $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX - x ) + 'px'}); 
    }
   else{
      x = 22;
      $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX + x ) + 'px'});
    }; 
  }
})
</script>
</head>
<body>
<ul id="gallery">
<li>
  <a href="#" class="smallimage" rel="mytest/code/726/images/001_big.jpg">
   <img src="mytest/code/726/images/001_small.jpg" alt="" />
  </a>
</li>
<li>
<a href="#" class="smallimage" rel="mytest/code/726/images/002_big.jpg">
  <img src="mytest/code/726/images/002_small.jpg" alt="" />
</a>
</li>
<li>
<a href="#" class="smallimage" rel="mytest/code/726/images/003_big.jpg">
  <img src="mytest/code/726/images/003_small.jpg" alt="" />
</a>
</li>
</ul>
</body>
</html>