在做一个商城网站,类似淘宝京东这类商品展示放大的效果肯定要有。在下载了多款插件使用中,jquery.zoom.js给我的体验算是最佳的了。
上图是模仿京东的弹出一个容器展示放大效果,选图不要在意,在下京吹一枚。
jquery.zoom.js使用十分方便,这里介绍其中一种使用方法(因为已经一点了),使用页面上已经存在的元素。
html代码:
<script src="js/jquery.js"></script>
<script src="js/jquery.zoom.min.js"></script>
引入jquery和jquery.zoom
<div id="zoom" class="zoom">
<img src="tamako.jpg"/>
</div>
<div id="target"></div>
css代码:
.zoom{ display: inline-block; } img{ width: 300px; height: 300px; } #target{ position: absolute; left: 300px; top: 0; height: 500px; width: 500px; border: 1px solid #666;
JS代码:visibility: hidden; }
$('#zoom').zoom({ target: '#target', onZoomIn: function(){ $('#target').css('visibility', 'visible'); }, onZoomOut: function(){ $('#target').css('visibility', 'hidden'); } });
首先,创建一个盛放小图片的容器,里面包含一张图片,设置好它们的大小,另外创建一个盛放放大后图片的容器,通过绝对定位置于原图右侧,默认状态为不可见。
然后,在JS代码中选中图片的容器,调用封装好的zoom()方法,并向其中传入参数。其中target表示放大后效果展示的容器,可以自行选择任意元素(不能是容器的父级元素),不填则默认以自身为容器。
最后,onZoomIn是当鼠标移入放大图片时执行的代码,这里的作用是将之前被隐藏的元素显示出来,因为我有设置一个默认的边框样式需要隐藏,onZoomOut正好与之对应,当鼠标离开的时候将容器隐藏起来。一个简单的放大镜效果就完成了。当然,还有其他参数,我一一说一下:
url:如果有准备两张图,一大一小,则这里放置大图的路径,之前放置小图的路径(我的例子中只有一张图);
on:设置放大的触发条件,有mouseover(默认,当鼠标进入时触发)、grab(当鼠标按下时触发,类似于mousedown)、click(鼠标点击时触发)、toggle(当鼠标点击时放大当前点击的范围,不可移动);
duration:设置淡入淡出时间,但是我试了好多种方法,只能设置淡出时间,淡入没法设置,求高人指点;
target:设置放大后的图片的容器,不能是父级元素;
touch:设置能否在放大时进行移动放大,toggle类似;
magnify:设置放大的倍数,默认值为1,就是放大2倍;
callback:设置回调函数,自由发挥;
onZoomIn:放大时回调函数,我的例子中用于显示容器;
onZoomOut:缩小时的回调函数,我让容器隐藏起来。
注:为什么使用visibility而不是使用display的原因是display在使用ctrl+r重载页面时会引发一个小bug,然后笔者当时急着改bug没深入探究,但是之后想重现bug却发现找不到这个bug了。若是诸位使用display没问题的话也不用过分纠结于此~。
说了这么多废话,希望自己能有所收获,也希望能帮助到人。