jQuery产品图片缩放效果代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery产品图片缩放效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery产品图片缩放效果代码，属于站长常用代码" />
<title>jQuery产品图片缩放效果代码</title>
<link rel="stylesheet" href="css/lrtk.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.js"> </script>
</head>
<body>
<!-- 代码 开始 -->
<div class="product_main">
	<div class="clearfix product_main_inner" style="display: block; height: 499px;">
		<div class="product_img image_zoom" id="product_img">
		<div class="gallery_wrap">
			<div class="gallery levelB" style="position: absolute; overflow: hidden; opacity: 1; height: 360px; width: 360px; left: 54px; top: 29.5px;"><img alt="" src="image/360x360/b01_2.jpg" style="height: 360px; width: 360px;"></div>
			<div class="gallery gallery_mask" style="position: absolute; overflow: hidden; opacity: 1; display: none; height: 360px; width: 360px; left: 54px; top: 29.5px;"><img alt="" src="image/360x360/b01_2.jpg" style="height: 360px; width: 360px;"></div>
		</div>
		<div class="controller_wrap">
			<div class="controller" style="width: 446px;">
				<ul>
				<li><a data-index="0" href="javascript:;" class="current"><img width="64" height="64" alt="" src="images/64x64/b01_2.jpg"></a></li><li><a data-index="1" href="javascript:;" class=""><img width="64" height="64" alt="" src="images/64x64/b02_2.jpg"></a></li><li><a data-index="2" href="javascript:;" class=""><img width="64" height="64" alt="" src="images/64x64/b03_2.jpg"></a></li><li><a data-index="3" href="javascript:;" class=""><img width="64" height="64" alt="" src="images/64x64/b04_3.jpg"></a></li>
				</ul>
			</div>
			<a class="prev" href="javascript:;"><span>></span></a><a class="next" href="javascript:;"><span>></span></a>
		</div>
			<div class="close_wrap"><a class="close" href="javascript:;" style="display: none;">×</a></div>
		</div>
	</div>
</div>
<script type="text/javascript" charset="utf-8" src="js/imagezoom.js"> </script>
<script type="text/javascript" charset="utf-8" src="js/product_img.js"> </script>
<!-- 代码 结束 -->
<style>
/* 非必要样式 */
body{text-align:center;padding-left:200px;}
.product_img{border:solid 1px #000}
.product_main {left:-100px;position:relative;}
</style>
</body>
</html>

JS代码(imagezoom.js):

/*** ImgZoom.js* 基于jQuery扩展插件 ImgZoom* create:2012.02.03* update:2013.05.23* admin@laoshu133.com-- 参数说明 --@options{
	Object}
-{
	tmpl:'<div class="gallery_wrap">{
	gallery}
</div><div class="controller_wrap"><div class="controller">{
	controllers}
</div><a href="javascript:;
	" class="prev"><span>&#171;
	</span></a><a href="javascript:;
	" class="next"><span>&#187;
	</span></a></div><div class="close_wrap">{
	closeButton}
</div>',items:[],shell:null,basePath:'images/',levelASize:[60,60],levelBSize:[240,240],levelCSize:[450,450],levelDSize:[1200,1200],gallerySize:[600,400],effectDuration:400,limitDrag:true,drag:true,esc:true,onZoom:noop,onBeforeZoom:noop}
-- 参数说明 end --*/
;
	(function(global,document,$,undefined){
	varnoop = $.noop,hasCapture = !!document.documentElement.setCapture,levelHash ={
	A:0,B:1,C:2,D:3}
,levelMap = ['A','B','C','D'],galleryTmpl = '<div class="gallery"><img src="{
	src}
" alt="" /></div>',ImageZoom = global.ImageZoom = function(ops){
	this.init(ops ||{
}
);
}
;
	ImageZoom.prototype ={
	constructor:ImageZoom,init:function(ops){
	$.each(ImageZoom.defaultOptions,function(k,val){
	if(ops[k] === void 0){
	ops[k] = val;
}
}
);
	this.shell = $(ops.shell);
	this.index = -1;
	this.level = 0;
	this.ops = ops;
	if(ops.items.length > 0 && this.shell.length > 0){
	this.buildDOM();
	this.initEvent();
	this.zoomTo(0,1);
}
}
,buildDOM:function(){
	var ops = this.ops,shell = this.shell;
	this.placeHTML = shell.html();
	varhtml = ops.tmpl,controllerHTML = '<ul>',galleryHTML = galleryTmpl.replace('{
	src}
',ops.basePath + ops.items[0].levelB);
	html = html.replace('{
	gallery}
',galleryHTML);
	$.each(ops.items,function(i){
	controllerHTML += ['<li><a href="javascript:;
	" data-index="',i,'"><img src="',ops.basePath + this.levelA,'" height="',ops.levelASize[0],'" width="',ops.levelASize[0],'" alt="" /></a></li>'].join('');
}
);
	controllerHTML += '</ul>';
	html = html.replace('{
	controllers}
',controllerHTML);
	html = html.replace('{
	closeButton}
','<a href="javascript:;
	" class="close">×</a>');
	shell.html(html).addClass('image_zoom');
	var gallery = this.gallery = shell.find('.gallery').eq(0);
	this.galleryPanel = gallery.parent().css({
	height:ops.gallerySize[1],width:ops.gallerySize[0],position:'relative',overflow:'hidden'}
);
	gallery.css('position','absolute').css('overflow','hidden').css('opacity',0);
	this.fakeGallery = gallery.clone().hide().addClass('gallery_mask');
	this.controllers = shell.find('.controller a');
	this.fakeImage = this.fakeGallery.find('img');
	this.image = gallery.find('img');
	this.galleryPanel.append(this.fakeGallery);
}
,initEvent:function(){
	var timer,self = this,zoomTo = function(){
	clearTimeout(timer);
	self.zoomTo.apply(self,arguments);
}
;
	this.shell.delegate('.controller a','mouseenter',function(){
	if(self.level < 3){
	var trigger = this;
	clearTimeout(timer);
	timer = setTimeout(function(){
	zoomTo(~~trigger.getAttribute('data-index'),self.level);
}
,240);
}
}
).delegate('.controller a','mouseleave',function(){
	clearTimeout(timer);
}
).delegate('.controller a','click',function(e){
	e.preventDefault();
	zoomTo(~~this.getAttribute('data-index'),2);
}
).delegate('.close','click',function(e){
	e.preventDefault();
	zoomTo(self.index,1);
}
).delegate('a.prev,a.next','click',function(e){
	e.preventDefault();
	var index = this.className.indexOf('prev')>-1 ? self.index-1:self.index+1;
	zoomTo(index,Math.min(2,self.level));
}
);
	this.gallery.bind('click',function(e){
	e.preventDefault();
	zoomTo(self.index,self.level < 3 ? self.level+1:2,[e.pageX,e.pageY]);
}
);
	this.fakeGallery.bind('mousedown click',function(e){
	return false;
}
);
	if(this.ops.esc){
	$(document).bind('keydown.image_zoom',function(e){
	if(!self.zooming && self.level > 1 && e.keyCode === 27){
	zoomTo(self.index,self.level-1);
}
}
);
}
}
,zoomTo:function(index,level,pointXY){
	varself = this,ops = this.ops,prevIndex = this.index,prevLevel = this.level;
	level = Math.max(1,levelHash[String(level).toUpperCase()] || ~~level);
	index = ~~index % ops.items.length;
	index = index < 0 ? ops.items.length + index:index;
	if(!this.draging &&(index !== prevIndex || level !== prevLevel) &&ops.onBeforeZoom.call(this,index,level,prevIndex,prevLevel) !== false){
	//console.log(levelMap[level],index,level,prevIndex,prevLevel);
	varlevelName = levelMap[level],size = ops['level' + levelName + 'Size'],image = this.image,gallery = this.gallery,fakeImage = this.fakeImage,fakeGallery = this.fakeGallery,galleryCSSProps ={
	height:size[1],width:size[0],opacity:1}
,imageCSSProps ={
	height:size[1],width:size[0]}
,zoomGallery = function(){
	var imageUrl = ops.basePath + ops.items[index]['level' + levelName];
	loadImage(imageUrl,function(){
	fakeImage.attr('src',imageUrl).css(imageCSSProps);
	fakeGallery.stop().css(galleryCSSProps).css('opacity',0).show();
	fakeGallery.animate({
	opacity:1}
,ops.effectDuration,function(){
	gallery[0].className = 'gallery level' + levelName;
	image.attr('src',imageUrl);
	fakeGallery.hide();
}
);
	if(index !== prevIndex){
	self.controllers.eq(prevIndex).removeClass('current');
	self.controllers.eq(index).addClass('current');
	self.index = index;
}
self[ops.drag && level >= 3 ? 'initDrag':'releaseDrag']();
	self.zooming = false;
	self.level = level;
	ops.onZoom.call(self,index,level,prevIndex,prevLevel);
}
);
}
;
	if(level >= 3){
	vargalleryOffset = gallery.offset(),panelOffset = this.galleryPanel.offset(),prevSize = ops['level' + levelMap[prevLevel] + 'Size'],position = [galleryOffset.left - panelOffset.left,galleryOffset.top - panelOffset.top];
	if(!pointXY || pointXY.length !== 2){
	pointXY = [galleryOffset.left + prevSize[0]/2,galleryOffset.top + prevSize[1]/2];
}
varoffset = [pointXY[0] - galleryOffset.left,pointXY[1] - galleryOffset.top],ratio = [offset[0]/prevSize[0],offset[1]/prevSize[1]],xy = this.getLimitXY(position[0] - size[0]*ratio[0] + offset[0],position[1] - size[1]*ratio[1] + offset[1]);
	galleryCSSProps.left = xy[0];
	galleryCSSProps.top = xy[1];
}
else{
	galleryCSSProps.left = (ops.gallerySize[0] - size[0]) / 2;
	galleryCSSProps.top = (ops.gallerySize[1] - size[1]) / 2;
}
this.zooming = true;
	if(level !== prevLevel){
	fakeGallery.stop().hide();
	image.stop().animate(imageCSSProps,ops.effectDuration);
	gallery.stop().animate(galleryCSSProps,ops.effectDuration,zoomGallery);
}
else{
	zoomGallery();
}
}
return this;
}
,getLimitXY:function(x,y,level){
	var ops = this.ops,size = ops['level' + (levelMap[level] || 'D') + 'Size'];
	return [Math.min(0,Math.max(ops.gallerySize[0] - size[0],~~x)),Math.min(0,Math.max(ops.gallerySize[1] - size[1],~~y))];
}
,initDrag:function(){
	var self = this,ops = this.ops;
	if(!ops.limitDrag){
	this.getLimitXY = function(){
	return arguments;
}
;
}
varoffset = [0,0],doc = $(document),gallery = this.gallery,galleryStyle = gallery[0].style,moveHandler = function(e){
	varpanelOffset = self.galleryPanel.offset(),xy = self.getLimitXY(e.pageX - panelOffset.left - offset[0],e.pageY - panelOffset.top - offset[1]);
	galleryStyle.left = xy[0] + 'px';
	galleryStyle.top = xy[1] + 'px';
	self.draging = true;
}
;
	gallery.bind('mousedown.image_zoom',function(e){
	e.preventDefault();
	var galleryOffset = gallery.offset();
	offset[0] = e.pageX - galleryOffset.left;
	offset[1] = e.pageY - galleryOffset.top;
	hasCapture && gallery[0].setCapture();
	doc.bind('mousemove',moveHandler).one('mouseup',function(){
	hasCapture && gallery[0].releaseCapture();
	doc.unbind('mousemove',moveHandler);
}
);
	gallery.one('click',function(){
	self.draging = false;
}
);
	self.releaseDrag = function(){
	this.gallery.unbind('mousedown.image_zoom');
	delete this.releaseDrag;
}
;
}
);
}
,releaseDrag:noop,prev:function(){
	return this.zoomTo(this.index-1,this.level);
}
,next:function(){
	return this.zoomTo(this.index+1,this.level);
}
,destroy:function(){
	this.shell.html(this.placeHTML);
	this.shell = null;
}
}
;
	ImageZoom.defaultOptions ={
	tmpl:'<div class="gallery_wrap">{
	gallery}
</div><div class="controller_wrap"><div class="controller">{
	controllers}
</div><a href="javascript:;
	" class="prev"><span>&#171;
	</span></a><a href="javascript:;
	" class="next"><span>&#187;
	</span></a></div><div class="close_wrap">{
	closeButton}
</div>',items:[],shell:null,basePath:'images/',levelASize:[60,60],levelBSize:[240,240],levelCSize:[450,450],levelDSize:[1200,1200],gallerySize:[600,400],effectDuration:400,limitDrag:true,drag:true,esc:true,onZoom:noop,onBeforeZoom:noop}
;
	String('B,C,D').replace(/\w+/g,function(k){
	ImageZoom.prototype['zoomTo' + k] = function(){
	this.zoomTo(this.index,levelHash[k]);
}
;
}
);
	//Extend FunsvarimgCache ={
}
,loadImage = function(url,callback){
	var cache = imgCache[url];
	if(!cache){
	cache = imgCache[url] ={
	callbackQueue:[]}
;
}
if(cache.loaded){
	(callback || noop).call(null,url);
}
else if(typeof callback === 'function'){
	cache.callbackQueue.push(callback);
	var img = new Image();
	img.onload = img.onerror = function(){
	img.onload = img.onerror = null;
	for(var i=0,len=cache.callbackQueue.length;
	i<len;
	i++){
	cache.callbackQueue[i].call(null,url);
}
cache.callbackQueue = [];
	cache.loaded = true;
}
;
	img.src = url;
}
}
;
}
)(window,document,jQuery);

JS代码(product_img.js):

var zoomController,zoomControllerUl,zoomControllerUlLeft = 0,shell = $('#product_img'),shellPanel = shell.parent().hide(),heightOffset = 80,minGallerySize = [468,shellPanel.height() - heightOffset],imageZoom = new ImageZoom({
	shell:shell,basePath:'',levelASize:[64,64],levelBSize:[360,360],gallerySize:minGallerySize,onBeforeZoom:function(index,level){
	if(!zoomController){
	zoomController = shell.find('div.controller');
}
var self = this,duration = 320,width = minGallerySize[0],height = minGallerySize[1],zoomFx = function(){
	self.ops.gallerySize = [width,height];
	self.galleryPanel.stop().animate({
	width:width,height:height}
,duration);
	shellPanel.stop().animate({
	height:height + heightOffset}
,duration);
	zoomController.animate({
	width:width-22}
,duration);
	shell.stop().animate({
	width:width}
,duration);
}
;
	if(level !== this.level && this.level !== 0){
	if(this.level === 1 && level > 1){
	height = Math.max(520,shellPanel.height());
	width = shellPanel.width();
	zoomFx();
}
else if(level === 1){
	zoomFx();
}
}
}
,onZoom:function(index,level,prevIndex){
	if(index !== prevIndex){
	if(!zoomControllerUl){
	zoomControllerUl = zoomController.find('ul').eq(0);
}
var width = 76,ops = this.ops,count = ops.items.length,panelVol = ~~((zoomController.width() + 10)/width),minLeft = width * (panelVol - count),left = Math.min(0,Math.max(minLeft,-width * ~~(index-panelVol/2)));
	if(zoomControllerUlLeft !== left){
	zoomControllerUl.stop().animate({
	left:left}
,320);
	zoomControllerUlLeft = left;
}
}
shell.find('a.prev,a.next')[level<3 ? 'removeClass':'addClass']('hide');
	shell.find('a.close').css('display',[level>1 ? 'block':'none']);
}
,items:[{
	title:'�ձ�MAXELL/������� SMS10 ���۵�ʱ��ͷ������ �����߿����-��ɫ',levelA:'images/64x64/b01_2.jpg',levelB:'images/360x360/b01_2.jpg',levelC:'images/450x450/b01_2.jpg',levelD:'images/1200x1200/b01_2.jpg'}
,{
	title:'�ձ�MAXELL/������� SMS10 ���۵�ʱ��ͷ������ �����߿����-��ɫ',levelA:'images/64x64/b02_2.jpg',levelB:'images/360x360/b02_2.jpg',levelC:'images/450x450/b02_2.jpg',levelD:'images/1200x1200/b02_2.jpg'}
,{
	title:'�ձ�MAXELL/������� SMS10 ���۵�ʱ��ͷ������ �����߿����-��ɫ',levelA:'images/64x64/b03_2.jpg',levelB:'images/360x360/b03_2.jpg',levelC:'images/450x450/b03_2.jpg',levelD:'images/1200x1200/b03_2.jpg'}
,{
	title:'�ձ�MAXELL/������� SMS10 ���۵�ʱ��ͷ������ �����߿����-��ɫ',levelA:'images/64x64/b04_3.jpg',levelB:'images/360x360/b04_3.jpg',levelC:'images/450x450/b04_3.jpg',levelD:'images/1200x1200/b04_3.jpg'}
]}
);
	shell.data('imageZoom',imageZoom);
	shellPanel.show();

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
/* common */
body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
body{background:#f9f9f9;font:12px/1.5 "\5FAE\8F6F\96C5\9ED1",Arial,HELVETICA;min-width:1200px;_background-image:url(about:blank);_background-attachment:fixed;}
img{border:0;}
ol,ul{list-style:none;}
:link,:visited,ins{text-decoration:none;}
table{border-collapse:collapse;border-spacing:0;}
sub,sup{font-size:100%;vertical-align:baseline;}
blockquote,q{quotes:"\201C" "\201D" "\2018" "\2019";}
blockquote:before,blockquote:after,q:before,q:after{content:"";content:none;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;resize:vertical;vertical-align:top;}
i,cite,em,address{font-style:normal;}
a{color:#333;text-decoration:none;}
a:hover{color:#09F;text-decoration:none;}
a.disabled,a.disabled:hover{cursor:default;pointer-events:none;}
.clearfix:before,.clearfix:after{display:block;content:"\200b";height:0;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
.hide,.tmpl{display:none;}
.wrap{margin:0 auto;width:1186px;}
/* product_img */
.product_img{background:#fff;height:100%;width:468px;position:absolute;left:0;top:0;overflow:hidden;}
.product_img .gallery_wrap,.product_img .gallery{height:100%;width:100%;position:absolute;left:0;top:0;}
.product_img .place_gallery{margin-left:-180px;left:50%;top:4%;}
.product_img img{display:block;-ms-interpolation-mode:bicubic;}
.product_img .levelB,.product_img .levelC{cursor:url(../images/zoom.png),-moz-zoom-in;cursor:url(../images/zoom.cur),pointer;}
.product_img .levelD{cursor:url(../images/hand.png),-moz-grab;cursor:url(http://www.fengbuy.com/skin/frontend/fengbuy/default/images/hand.cur),move\9;}
.product_img .controller_wrap{background:#fafafa;background:rgba(255,255,255,.7);border:1px solid #f0f0f0;padding:10px 0;position:absolute;left:0;bottom:0;}
.product_img .controller{margin:0 10px;height:66px;width:446px;position:relative;overflow:hidden;}
.product_img .controller ul{width:300%;position:absolute;left:0;top:0;}
.product_img .controller li{float:left;padding-right:10px;}
.product_img .controller a{display:block;border:1px solid #fafafa;}
.product_img .controller a:hover,.product_img .controller .current{border-color:#476db9;}
.product_img .prev,.product_img .next{display:none;background:#fff;background:rgba(255,255,255,.4);border-radius:0 56px 56px 0;height:56px;width:28px;position:absolute;left:4px;top:-240px;filter:Alpha(opacity=40);}
.product_img:hover .prev,.product_img:hover .next{display:block;}
.product_img .prev:hover,.product_img .next:hover{background:rgba(255,255,255,.8);filter:Alpha(opacity=80);}
.product_img .prev span,.product_img .next span{display:block;background:url(../images/bg_hor.png) no-repeat 0 -14px;cursor:pointer;margin:18px 0 0 4px;height:20px;width:15px;overflow:hidden;text-indent:-99px;}
.product_img .hide,.product_img:hover .hide{display:none;}
.product_img .next{border-radius:56px 0 0 56px;left:auto;right:4px;}
.product_img .next span{background-position:-15px -14px;margin-left:9px;}
.product_img .close_wrap{position:absolute;right:8px;top:6px;}
.product_img .close_wrap a{display:none;background:#fff url(../images/bg_hor.png) no-repeat -80px -127px;height:15px;width:15px;overflow:hidden;text-indent:-99px;}
.product_img .close_wrap a:hover{background-position:-95px -127px;}

附件:下载该文件资源,减少时间成本(增值服务)