jQuery插件 - elevateZoom放大镜

前言:
elevateZoom是一个图片放大插件,支持多种放大方式,强大且简单。

直接上代码:
用到了art-template模板引擎

	<!-- 商品图 -->
	<div class="goodprev">
		<!-- 展示图 -->
		<div class="goodimg">
			<img class="zoom-img" src="{{list.good_img[0]}}" data-zoom-image="{{list.good_img[0]}}">
		</div>
		<!-- 缩略图 -->
		<div class="goodpics" id="goodpicsbox">
			<ul>
				<li><a class="active" href="javascript:;" data-image="{{list.good_img[0]}}" data-zoom-image="{{list.good_img[0]}}">
					<img src="{{list.good_img[0]}}" alt=""></a></li>
				<li><a href="javascript:;" data-image="{{list.good_img[1]}}" data-zoom-image="{{list.good_img[1]}}">
					<img src="{{list.good_img[1]}}" alt=""></a></li>
				<li><a href="javascript:;" data-image="{{list.good_img[2]}}" data-zoom-image="{{list.good_img[2]}}">
					<img src="{{list.good_img[2]}}" alt=""></a></li>
				<li><a href="javascript:;" data-image="{{list.good_img[3]}}" data-zoom-image="{{list.good_img[3]}}">
					<img src="{{list.good_img[3]}}" alt=""></a></li>
			</ul>
		</div>
	</div>
	zoom(){
		$(".zoom-img").elevateZoom({
			gallery:"goodpicsbox",
			cursor:"crosshair",
			// cursor:"pointer",crosshair
			galleryActiveClass:"active",
			borderSize:"1",
			borderColor:"#888",
			// lensShape: "round",//透镜形状
			lensSize: 200,//透镜尺寸:长和宽:200px 
			// zoomType: "lens",//真正的放大镜
			// zoomType: "inner",//透镜内置
			// zoomWindowFadeIn: 500,//镜头窗口淡入速度 
			// zoomWindowFadeOut: 500,//镜头窗口淡出速度 
			// lensFadeIn: 500,//透镜淡入速度 
			// lensFadeOut: 500//透镜淡出速度 
		});
	}

效果图:
在这里插入图片描述

具体参数设置:

参数默认值允许值描述
responsivefalsetrue, false设置为true时启用响应式
scrollZoomfalsetrue, false设置为true时启动鼠标滚轮进行缩放
loadingIconfalsetrue, false是否启用载入图标
easingfalsetrue, false是否启用缓慢过渡
easingTypezoomdefaulttrue, false默认过渡类型是easeOutExpo:(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b;继承jquery过渡类型
easingDuration2000Number过渡时长
lensSize200Number设置镜头的大小,当设置为窗口时,将会自动计算大小
zoomWindowWidth400Number放大窗口的宽度 注意:zoomType必须是Window
zoomWindowHeight400Number放大窗口的高度 注意:zoomType必须是Window
zoomWindowOffetx0Number设置Window X轴的偏移量
zoomWindowOffety0Number设置Window Y轴的偏移量
zoomWindowPosition11-16一旦定位,请使用zoomWindowOffetx,zoomWindowOffety进行调整
lensFadeInfalseNumber设置镜头淡入速度 eg:200
lensFadeOutfalseNumber设置镜头淡出速度 eg:200
zoomWindowFadeInfalseNumber设置窗口淡入速度 eg:200
zoomWindowFadeOutfalseNumber设置窗口的淡出速度 eg:200
zoomTintFadeInfalseNumber设置淡入着色的速度 eg:200
zoomTintFadeOutfalseNumber设置着色淡出的速度 eg:200
borderSize4Number镜头边框的尺寸 eg:1
zoomLenstruetrue, false设置为false隐藏镜头
borderColour#888#xxx镜头边框的颜色
lensBorder1Number镜头边框像素
lensShapesquareround,square设置镜头形状
zoomTypewindowLens, Window, Inner放大类型
containLensZoomfalseNumber在zommType为len时使用,确保镜头不会在边框外
lensColourwhite#hex, word (red, blue), or rgb(x, x, x)设置镜头背景
lensOpacity0.4Number镜头透明度
lenszoomfalsetrue, false设置镜头变焦
tintfalsetrue, false是否开启着色
tintColour#333#hex, word (red, blue), or rgb(x, x, x)设置色彩
tintOpacity0.4Number设置颜色透明度
cursordefaultdefault, cursor, crosshair设置鼠标的风格
gallerynullid设置关联缩略图
imageCrossfadefalsetrue, false设置缩略图激活时淡入淡出
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值