今天在浏览新蛋中国的时候,发现了图片放大镜这一有意思的效果,看了源码,原来是使用了jqzoom这个插件,感觉不错,就发出来给大家。
官方说明:
演示:
引入js、css文件
- <script type='text/javascript' src='js/jquery-1.2.6.js'></script>
- <script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>
- <link rel="stylesheet" type="text/css" href="css/jqzoom.css" />
建立如下html
注:a为大图,img中为小图,class=”MYCLASS” 这属性很关键,是插件其作用的对象名,是必须的。
初始化插件
- var options = {
- zoomWidth: 300,
- zoomHeight: 250,
- xOffset: 10,
- yOffset: 0,
- position: "right" //and MORE OPTIONS
- };
- $('.MYCLASS).jqzoom(options);
API详解
- zoomType : ’standard’ 放大镜显示模式,有二种,默认的’standard’和’reverse’,reverse的作用是给小图上面加上半透明的遮罩层
- zoomWidth和zoomHeight 设置大图窗口的宽度与高度
- xOffset和yOffset 此属性与下面的position属性是关联的,与所在位置的偏移量
- position: ‘right’ 大图窗口出现的位置(相对于小图)
- lens: true 设置为false,放大镜窗口设置为不显示
- imageOpacity: 0.2 这个属性只有在zoomType : ‘reverse’才起作为,用于设置遮罩层的透明度
- title: true 显示小图标题
- showEffect和hideEffect 控制现实与隐藏大图窗口的动画
- fadeinSpeed和fadeoutSpeed控制现实与隐藏大图窗口的动画速度
- showPreload : true 是否显示预加载动画
- preloadText : ‘Loading zoom’ 预加载时显示的文字
- preloadPosition: ‘center’ 预加载动画所在的位置