saber 酱的抱枕

之前我用过jqzoom这个插件做图片放大镜效果，今天看萌の里这个网站，发现它的图片放大镜挺好的，于是看了下源代码，看到它使用的是一个名为elevateZoom的插件。然后我也去百度了下用用，感觉良好。用这个比用jqzoom更快捷更有效率。如果你使用jqzoom，你需要引入它的css文件，还要注意它用来做鼠标指针的那张图片的路径是否正确。而elevateZoom只需要你引用它自身的js文件就够了。

做了一个demo，代码如下：

<script src="https://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<script src="/f/jquery.elevateZoom-3.0.8.min.js"></script>
<img id="zoom_img" src="/f/saber美图125_s.jpg" alt="" data-zoom-image="/f/saber%E7%BE%8E%E5%9B%BE125.jpg">
<script>
$(function  () {
	$('#zoom_img').elevateZoom({
		scrollZoom: true,//允许滚动控制
		easing: true//允许动画效果
		zoomWindowWidth:550,//放大镜窗口宽度
		zoomWindowHeight:400//放大镜窗口高度
	});
});
</script>

查看demo

首先引入jq和elevateZoom的js文件，然后给图片设置data-zoom-image属性，指示大图url。最后绑定一下事件就行了。如果要用在多个图片上的话，一个个绑定就行了。是不是很简单呢？

关于elevateZoom的参数，可以参考这里。

网上关于elevateZoom的信息比较少，官网在此，注意，你也许需要翻墙。再注意，官网上给出的代码都是驴唇不对马嘴的，请你自己查看源代码，找到真正使用的代码——而不是直接在页面上显示出来的代码。
Read More →

使用elevateZoom插件制作图片放大镜效果