<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>基于jQuery的鼠标悬停时放大图片的效果制作</title>
<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; }
h6{ width:680px; margin:0 auto 20px; font-size:12px; font-weight:normal; color:#333; }
h6 a { color:#09c; }
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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
//<![CDATA[
$(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>
<h1>基于jQuery的鼠标悬停时放大图片的效果演示</h1>
<h6>by:<a href="http://stylechen.com/">Stylechen.com</a></h6>
<ul id="gallery">
<li><a href="http://stylechen.com/" class="smallimage" rel="images/001_big.jpg"><img src="images/001_small.jpg" alt="" /></a></li>
<li><a href="http://stylechen.com/" class="smallimage" rel="images/002_big.jpg"><img src="images/002_small.jpg" alt="" /></a></li>
<li><a href="http://stylechen.com/" class="smallimage" rel="images/003_big.jpg"><img src="images/003_small.jpg" alt="" /></a></li>
</ul>
</body>
</html>
基于jQuery的鼠标悬停时放大图片的效果演示
4星 · 超过85%的资源 需积分: 10 35 浏览量
2011-10-20
11:13:15
上传
评论
收藏 119KB ZIP 举报 
jquery-image-hover-zoom.zip （7个子文件） 
基于jQuery的鼠标悬停时放大图片的效果制作 images 
001_big.jpg 41KB 003_small.jpg 13KB 002_small.jpg 7KB 003_big.jpg 34KB 001_small.jpg 14KB 002_big.jpg 16KB
index.html 2KB资源评论
xiasala2014-07-29这个不错，我试验了，可以用。
鼻涕Snot2014-04-11还可以 改下差不多用上了- tyx183104582512014-09-01嗯 很好 值得借鉴
- cxzstudio2013-02-21可以实现鼠标悬停放大，但不是我想要的
- ChaersiLee2013-08-22很不错的一个资源，但是这个明显是个老资源了。在js应该单独写成个包。
