<!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>
