CSS3和jQuery的放大镜实例，实测攻略
转自国外的 CSS3和jQuery的11个实例教程 ，里面有11种的CSS3和jQuery 实现的惊人特效。
这么给力的东西，必须要仔细研究一番。废话不多说，奉上第一个实例的实测与中文注释。
效果预览：
代码测试：
html部分：
<div class="magnify">
<div class="large"></div>
<!-- 放入小图片 -->
<img class="small" src="/static/Uploads/wp/2012/11/iphone.jpg" width="200"/>
</div>
PS：好吧，这部分就不解释了，大家都懂的，没什么好说的。
CSS部分：
* {margin: 0; padding: 0;}
.magnify {width: 200px; margin: 50px auto; position: relative;}
/*创建一个玻璃放大镜的效果*/
.large {
width: 175px; height: 175px;
position: absolute;
border-radius: 100%;
/*处理放大镜的玻璃效果和阴影效果*/
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
/*在这里载入对应的一张大图*/
background: url('http://www.frontopen.com/wp-content/uploads/2012/11/iphone.jpg') no-repeat;
/*默认情况下，不显示放大镜*/
display: none;
}
/*避免边缘重叠错误，使用样式display: block;进行处理*/
.small { display: block; }
JS部分：
$(document).ready(function(){
var native_width = 0;
var native_height = 0;
//开始创建鼠标事件函数
$(".magnify").mousemove(function(e){
//当用户将鼠标悬停在图像上，该脚本会先计算出小图像的尺寸。只有在小图像尺寸已知的情况下，该脚本才会显示缩放的版本。
if(!native_width && !native_height)//表示图像的宽度和高度不为0的判断
{
//创建一个新的图像对象，并将小图像的url赋值给对象，从而获取小图片的高宽值。
var image_object = new Image();
image_object.src = $(".small").attr("src");
//将对象的高度和宽度，赋值给全局变量。
native_width = image_object.width;
native_height = image_object.height;
}
else
{
//返回当前鼠标相对于窗口X/Y轴的位置，并处理放大镜跟随鼠标事件。
var magnify_offset = $(this).offset();
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
//如果鼠标在容器之外，则隐藏，否则显示放大镜。
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
{
$(".large").fadeIn(100);
}
else
{
$(".large").fadeOut(100);
}
if($(".large").is(":visible"))//如果. large元素可见
{
//通过鼠标在小图像上的位置变化，改变大图像背景的位置。计算出鼠标指针下的像素比例，按照比例来调整大图像的位置。
var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
var bgp = rx + "px " + ry + "px";
//鼠标移动放大镜参数
var px = mx - $(".large").width()/2;
var py = my - $(".large").height()/2;
//鼠标移动放大镜时，需要扣除一半的放大镜高度与宽度，才能保持鼠标处于放大镜的中间。
//将计算结果输出到html，实现移动放大镜。
$(".large").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})
其他：
jQuery文件库支持，大家可以直接在网上引用，或者下载jQuery库。
微软的CDN，如果不想下载的话直接引用即可。
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
源码下载： 点击下载
