saber酱的抱枕

Fly me to the moon

09/12
08:00
学习

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


之前我用过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插件制作图片放大镜效果