jQuery图片缩放平移预览代码

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

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

以下是 jQuery图片缩放平移预览代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery图片缩放平移预览代码</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/imageviewer.css">
<style type="text/css">
	#image-gallery-1 {
	  max-width: 800px;
	  margin: 50px auto;
	}
	#image-gallery-1 .gallery-items {
	  float: left;
	  height: 200px;
	  margin-right: 10px;
	  margin-bottom: 10px;
	  cursor: pointer;
	}
</style>
</head>
<body>
<article class="htmleaf-container">
	<header class="htmleaf-header">
		<div class="htmleaf-demo center">
		  <a href="index.html" class="current">全屏模式</a>
		  <a href="index2.html">容器模式</a>
		  <a href="index3.html">图片模式</a>
		</div>
	</header>
	<p>图片全屏预览模式：点击图片可以切换到全屏查看图片的模式，全屏模式下可以缩放和平移图片。</p>
	<div id="image-gallery-1" class="cf">
		<img src="img/1.jpg" data-high-res-src="img/1_big.jpg" alt="" class="gallery-items">
		<img src="img/2.jpg" data-high-res-src="img/2_big.jpg" alt="" class="gallery-items">
		<img src="img/3.jpg" data-high-res-src="img/3_big.jpg" alt="" class="gallery-items">
		<img src="img/4.jpg" data-high-res-src="img/4_big.jpg" alt="" class="gallery-items">
	</div>
</article>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/imageviewer.min.js"></script>
<script type="text/javascript">
	$(function () {
		var viewer = ImageViewer();
		$('.gallery-items').click(function () {
			var imgSrc = this.src,
				highResolutionImage = $(this).data('high-res-img');

			viewer.show(imgSrc, highResolutionImage);
		});
	});
</script>
</body>
</html>

HTML代码(index2.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery图片缩放平移预览代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/imageviewer.css">
<style type="text/css">
	/** Gallery 2 css **/
	#image-gallery-2 {
	  width: 100%;
	  position: relative;
	  height: 650px;
	  background: #000;
	}
	#image-gallery-2 .image-container {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 50px;
	}
	#image-gallery-2 .prev,
	#image-gallery-2 .next {
	  position: absolute;
	  height: 32px;
	  margin-top: -66px;
	  top: 50%;
	}
	#image-gallery-2 .prev {
	  left: 20px;
	}
	#image-gallery-2 .next {
	  right: 20px;
	  cursor: pointer;
	}
	#image-gallery-2 .footer-info {
	  position: absolute;
	  height: 50px;
	  width: 100%;
	  left: 0;
	  bottom: 0;
	  line-height: 50px;
	  font-size: 24px;
	  text-align: center;
	  color: white;
	  border-top: 1px solid #FFF;
	}
</style>
</head>
<body>
<article class="htmleaf-container">
	<header class="htmleaf-header">
		<div class="htmleaf-demo center">
		  <a href="index.html">全屏模式</a>
		  <a href="index2.html" class="current">容器模式</a>
		  <a href="index3.html">图片模式</a>
		</div>
	</header>
	<p>容器模式：可以像幻灯片一样切换图片，使用鼠标滚轮可以缩放和平移图片。</p>
	<div id="image-gallery-2">
		<div class="image-container"></div>
		<img src="img/left.svg" class="prev"/>
		<img src="img/right.svg"  class="next"/>
		<div class="footer-info">
			<span class="current"></span>/<span class="total"></span>
		</div>
	</div>   
</article>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/imageviewer.min.js"></script>
<script type="text/javascript">
	$(function () {
		var images = [{
			small : 'img/1.jpg',
			big : 'img/1_big.jpg'
		},{
			small : 'img/2.jpg',
			big : 'img/2_big.jpg'
		},{
			small : 'img/3.jpg',
			big : 'img/3_big.jpg'
		},{
			small : 'img/4.jpg',
			big : 'img/4_big.jpg'
		}];

		var curImageIdx = 1,
			total = images.length;
		var wrapper = $('#image-gallery-2'),
			curSpan = wrapper.find('.current');
		var viewer = ImageViewer(wrapper.find('.image-container'));

		//display total count
		wrapper.find('.total').html(total);

		function showImage(){
			var imgObj = images[curImageIdx - 1];
			viewer.load(imgObj.small, imgObj.big);
			curSpan.html(curImageIdx);
		}

		wrapper.find('.next').click(function(){
			 curImageIdx++;
			if(curImageIdx > total) curImageIdx = 1;
			showImage();
		});

		wrapper.find('.prev').click(function(){
			 curImageIdx--;
			if(curImageIdx < 0) curImageIdx = total;
			showImage();
		});

		//initially show image
		showImage();
	});
</script>
</body>
</html>

JS代码(imageviewer.min.js):

/* ImageViewer v 1.1.0 Author:Sudhanshu Yadav Copyright (c) 2015 to Sudhanshu Yadav - ignitersworld.com,released under the MIT license. Demo on:http://ignitersworld.com/lab/imageViewer.html*/
!function(i,e,t,n){
	"use strict";
	function a(i,e,t,n){
	return i/=n,i--,-t*(i*i*i*i-1)+e}
function o(i){
	return i.complete&&("undefined"==typeof i.naturalWidth||0!==i.naturalWidth)}
function s(i,e){
	this.container=i,this.onStart=e.onStart||l,this.onMove=e.onMove||l,this.onEnd=e.onEnd||l,this.sliderId=e.sliderId||"slider"+Math.ceil(1e6*Math.random())}
function r(e,t){
	var n=this;
	e.is("#iv-container")&&(n._fullPage=!0),n.container=e,t=n.options=i.extend({
}
,r.defaults,t),n.zoomValue=100,e.find(".snap-view").length||e.prepend(v),e.addClass("iv-container"),"static"==e.css("position")&&e.css("position","relative"),n.snapView=e.find(".iv-snap-view"),n.snapImageWrap=e.find(".iv-snap-image-wrap"),n.imageWrap=e.find(".iv-image-wrap"),n.snapHandle=e.find(".iv-snap-handle"),n.zoomHandle=e.find(".iv-zoom-handle"),n._viewerId="iv"+Math.floor(1e6*Math.random())}
var h,m,c,l=function(){
}
,d=15,u=5;
	!function(){
	for(var i=0,t=["ms","moz","webkit","o"],n=0;
	n<t.length&&!e.requestAnimationFrame;
	++n)e.requestAnimationFrame=e[t[n]+"RequestAnimationFrame"],e.cancelAnimationFrame=e[t[n]+"CancelAnimationFrame"]||e[t[n]+"CancelRequestAnimationFrame"];
	e.requestAnimationFrame||(e.requestAnimationFrame=function(t,n){
	var a=(new Date).getTime(),o=Math.max(0,16-(a-i)),s=e.setTimeout(function(){
	t(a+o)}
,o);
	return i=a+o,s}
),e.cancelAnimationFrame||(e.cancelAnimationFrame=function(i){
	clearTimeout(i)}
)}
();
	var v='<div class="iv-loader"></div> <div class="iv-snap-view"><div class="iv-snap-image-wrap"><div class="iv-snap-handle"></div></div><div class="iv-zoom-slider"><div class="iv-zoom-handle"></div></div></div><div class="iv-image-view" ><div class="iv-image-wrap" ></div></div>';
	i(function(){
	h=i("body"),m=i(e),c=i(t),h.append('<div id="iv-container">'+v+'<div class="iv-close"></div><div>')}
),s.prototype.init=function(){
	var i=this,e=(this.container,"."+this.sliderId);
	return this.container.on("touchstart"+e+" mousedown"+e,function(t){
	var n=("touchstart"==t.type?"touchmove":"mousemove")+e,a=("touchstart"==t.type?"touchend":"mouseup")+e,o=t.originalEvent,s=o.clientX||o.touches[0].clientX,r=o.clientY||o.touches[0].clientY,h=i.onStart(t,{
	x:s,y:r}
);
	if(h!==!1){
	var m=function(e){
	e.preventDefault(),o=e.originalEvent;
	var t=o.clientX||o.touches[0].clientX,n=o.clientY||o.touches[0].clientY;
	i.onMove(e,{
	dx:t-s,dy:n-r,mx:t,my:n}
)}
,l=function(){
	c.off(n,m),c.off(a,l),i.onEnd()}
;
	c.on(n,m),c.on(a,l)}
}
),this}
,r.prototype={
	constructor:r,_init:function(){
	function i(i){
	x||e.zoomValue<=100||!e.loaded||(clearTimeout(z),x=!0,e.snapView.css("opacity",1),i||(z=setTimeout(function(){
	e.snapView.css("opacity",0),x=!1}
,4e3)))}
var e=this,t=e.options,n=!1,o=this.container,r="."+e._viewerId,h=this.snapHandle,l=this.snapImageWrap,v=this.imageWrap,f=new s(l,{
	sliderId:e._viewerId,onStart:function(){
	if(!e.loaded)return!1;
	var i=h[0].style;
	this.curHandleTop=parseFloat(i.top),this.curHandleLeft=parseFloat(i.left),this.handleWidth=parseFloat(i.width),this.handleHeight=parseFloat(i.height),this.width=l.width(),this.height=l.height(),clearInterval(p.slideMomentumCheck),cancelAnimationFrame(p.sliderMomentumFrame)}
,onMove:function(i,t){
	var n=this.curHandleLeft+100*t.dx/this.width,a=this.curHandleTop+100*t.dy/this.height;
	n=Math.max(0,n),n=Math.min(100-this.handleWidth,n),a=Math.max(0,a),a=Math.min(100-this.handleHeight,a);
	var o=e.containerDim,s=e.imageDim.w*(e.zoomValue/100),r=e.imageDim.h*(e.zoomValue/100),m=s<o.w?(o.w-s)/2:-s*n/100,c=r<o.h?(o.h-r)/2:-r*a/100;
	h.css({
	top:a+"%",left:n+"%"}
),e.currentImg.css({
	left:m,top:c}
)}
}
).init(),p=e._imageSlider=new s(v,{
	sliderId:e._viewerId,onStart:function(i,t){
	if(!e.loaded)return!1;
	if(!n){
	var a=this;
	f.onStart(),a.imgWidth=e.imageDim.w*e.zoomValue/100,a.imgHeight=e.imageDim.h*e.zoomValue/100,a.positions=[t,t],a.startPosition=t,e._clearFrames(),a.slideMomentumCheck=setInterval(function(){
	a.currentPos&&(a.positions.shift(),a.positions.push({
	x:a.currentPos.mx,y:a.currentPos.my}
))}
,50)}
}
,onMove:function(i,e){
	n||(this.currentPos=e,f.onMove(i,{
	dx:-e.dx*f.width/this.imgWidth,dy:-e.dy*f.height/this.imgHeight}
))}
,onEnd:function(){
	function i(){
	60>=s&&(e.sliderMomentumFrame=requestAnimationFrame(i)),r+=a(s,t/3,-t/3,60),h+=a(s,o/3,-o/3,60),f.onMove(null,{
	dx:-(r*f.width/e.imgWidth),dy:-(h*f.height/e.imgHeight)}
),s++}
if(!n){
	var e=this,t=this.positions[1].x-this.positions[0].x,o=this.positions[1].y-this.positions[0].y;
	if(Math.abs(t)>30||Math.abs(o)>30){
	var s=1,r=e.currentPos.dx,h=e.currentPos.dy;
	i()}
}
}
}
).init(),g=0;
	v.on("mousewheel"+r+" DOMMouseScroll"+r,function(n){
	if(t.zoomOnMouseWheel&&e.loaded){
	e._clearFrames();
	var a=Math.max(-1,Math.min(1,n.originalEvent.wheelDelta||-n.originalEvent.detail)),s=e.zoomValue*(100+a*d)/100;
	if(s>=100&&s<=t.maxZoom?g=0:g+=Math.abs(a),!(g>u)){
	n.preventDefault();
	var r=o.offset(),h=n.pageX-r.left,m=n.pageY-r.top;
	e.zoom(s,{
	x:h,y:m}
),i()}
}
}
),v.on("touchstart"+r,function(i){
	if(e.loaded){
	var t=i.originalEvent.touches[0],a=i.originalEvent.touches[1];
	if(t&&a){
	n=!0;
	var s=o.offset(),r=Math.sqrt(Math.pow(a.pageX-t.pageX,2)+Math.pow(a.pageY-t.pageY,2)),h=e.zoomValue,m={
	x:(a.pageX+t.pageX)/2-s.left,y:(a.pageY+t.pageY)/2-s.top}
,l=function(i){
	i.preventDefault();
	var t=i.originalEvent.touches[0],n=i.originalEvent.touches[1],a=Math.sqrt(Math.pow(n.pageX-t.pageX,2)+Math.pow(n.pageY-t.pageY,2)),o=h+(a-r)/2;
	e.zoom(o,m)}
,d=function(){
	c.off("touchmove",l),c.off("touchend",d),n=!1}
;
	c.on("touchmove",l),c.on("touchend",d)}
}
}
);
	var w,M=0;
	v.on("click"+r,function(i){
	0==M?(M=Date.now(),w={
	x:i.pageX,y:i.pageY}
):Date.now()-M<500&&Math.abs(i.pageX-w.x)<50&&Math.abs(i.pageY-w.y)<50?(e.zoomValue==t.zoomValue?e.zoom(200):e.resetZoom(),M=0):M=0}
);
	var z,x,y=e.snapView.find(".iv-zoom-slider");
	new s(y,{
	sliderId:e._viewerId,onStart:function(i){
	return e.loaded?(this.leftOffset=y.offset().left,this.handleWidth=e.zoomHandle.width(),void this.onMove(i)):!1}
,onMove:function(i,n){
	var a=(i.pageX||i.originalEvent.touches[0].pageX)-this.leftOffset-this.handleWidth/2;
	a=Math.max(0,a),a=Math.min(e._zoomSliderLength,a);
	var o=100+(t.maxZoom-100)*a/e._zoomSliderLength;
	e.zoom(o)}
}
).init();
	v.on("touchmove"+r+" mousemove"+r,function(){
	i()}
);
	var F={
}
;
	F["mouseenter"+r+" touchstart"+r]=function(){
	x=!1,i(!0)}
,F["mouseleave"+r+" touchend"+r]=function(){
	x=!1,i()}
,e.snapView.on(F),t.refreshOnResize&&m.on("resize"+r,function(){
	e.refresh()}
),e._fullPage&&(o.on("touchmove"+r+" mousewheel"+r+" DOMMouseScroll"+r,function(i){
	i.preventDefault()}
),o.find(".iv-close").on("click"+r,function(){
	e.hide()}
))}
,zoom:function(i,e){
	function t(){
	l++,20>l&&(n._zoomFrame=requestAnimationFrame(t));
	var d=a(l,s,i-s,20),u=d/s,v=n.imageDim.w*d/100,f=n.imageDim.h*d/100,p=-((e.x-m)*u-e.x),g=-((e.y-c)*u-e.y);
	120>i&&(p=(h.w-v)/2,g=(h.h-f)/2),r.css({
	height:f+"px",width:v+"px",left:p+"px",top:g+"px"}
),n.zoomValue=d,n._resizeHandle(v,f,p,g),n.zoomHandle.css("left",(d-100)*n._zoomSliderLength/(o-100)+"px")}
i=Math.round(Math.max(100,i)),i=Math.min(this.options.maxZoom,i),e=e||{
	x:this.containerDim.w/2,y:this.containerDim.h/2}
;
	var n=this,o=this.options.maxZoom,s=this.zoomValue,r=this.currentImg,h=this.containerDim,m=parseFloat(r.css("left")),c=parseFloat(r.css("top"));
	n._clearFrames();
	var l=0;
	t()}
,_clearFrames:function(){
	clearInterval(this._imageSlider.slideMomentumCheck),cancelAnimationFrame(this._imageSlider.sliderMomentumFrame),cancelAnimationFrame(this._zoomFrame)}
,resetZoom:function(){
	this.zoom(this.options.zoomValue)}
,_calculateDimensions:function(){
	var i=this,e=i.currentImg,t=i.container,n=i.snapView,a=e.width(),o=e.height(),s=t.width(),r=t.height(),h=n.innerWidth(),m=n.innerHeight();
	i.containerDim={
	w:s,h:r}
;
	var c,l,d=a/o;
	c=a>o&&r>=s||d*r>s?s:d*r,l=c/d,i.imageDim={
	w:c,h:l}
,e.css({
	width:c+"px",height:l+"px",left:(s-c)/2+"px",top:(r-l)/2+"px","max-width":"none","max-height":"none"}
);
	var u=c>l?h:c*m/l,v=l>c?m:l*h/c;
	i.snapImageDim={
	w:u,h:v}
,i.snapImg.css({
	width:u,height:v}
),i._zoomSliderLength=h-i.zoomHandle.outerWidth()}
,refresh:function(){
	this.loaded&&(this._calculateDimensions(),this.resetZoom())}
,_resizeHandle:function(i,e,t,n){
	var a=this.currentImg,o=i||this.imageDim.w*this.zoomValue/100,s=e||this.imageDim.h*this.zoomValue/100,r=Math.max(100*-(t||parseFloat(a.css("left")))/o,0),h=Math.max(100*-(n||parseFloat(a.css("top")))/s,0),m=Math.min(100*this.containerDim.w/o,100),c=Math.min(100*this.containerDim.h/s,100);
	this.snapHandle.css({
	top:h+"%",left:r+"%",width:m+"%",height:c+"%"}
)}
,show:function(i,e){
	this._fullPage&&(this.container.show(),i&&this.load(i,e))}
,hide:function(){
	this._fullPage&&this.container.hide()}
,options:function(i,e){
	return e?void(this.options[i]=e):this.options[i]}
,destroy:function(i,e){
	var t="."+this._viewerId;
	return this._fullPage?(container.off(t),container.find('[class^="iv"]').off(t)):this.container.remove('[class^="iv"]'),m.off(t),null}
,load:function(e,t){
	function n(){
	a.loaded=!0,a.zoomValue=100,h.show(),a.snapImg.show(),a.refresh(),a.resetZoom(),s.find(".iv-loader").hide()}
var a=this,s=this.container;
	s.find(".iv-snap-image,.iv-large-image").remove();
	var r=this.container.find(".iv-snap-image-wrap");
	r.prepend('<img class="iv-snap-image" src="'+e+'" />'),this.imageWrap.prepend('<img class="iv-large-image" src="'+e+'" />'),t&&this.imageWrap.append('<img class="iv-large-image" src="'+t+'" />');
	var h=this.currentImg=this.container.find(".iv-large-image");
	this.snapImg=this.container.find(".iv-snap-image"),a.loaded=!1,s.find(".iv-loader").show(),h.hide(),a.snapImg.hide(),o(h[0])?n():i(h[0]).on("load",n)}
}
,r.defaults={
	zoomValue:100,snapView:!0,maxZoom:500,refreshOnResize:!0,zoomOnMouseWheel:!0}
,e.ImageViewer=function(e,t){
	var n,a,o;
	e&&("string"==typeof e||e instanceof Element||e[0]instanceof Element)||(t=e,e=i("#iv-container")),e=i(e),e.is("img")?(n=e,a=n[0].src,o=n.attr("high-res-src")||n.attr("data-high-res-src"),e=n.wrap('<div class="iv-container" style="display:inline-block;
	overflow:hidden"></div>').parent(),n.css({
	opacity:0,position:"relative",zIndex:-1}
)):(a=e.attr("src")||e.attr("data-src"),o=e.attr("high-res-src")||e.attr("data-high-res-src"));
	var s=new r(e,t);
	return s._init(),a&&s.load(a,o),s}
,i.fn.ImageViewer=function(t){
	return this.each(function(){
	var n=i(this),a=e.ImageViewer(n,t);
	n.data("ImageViewer",a)}
)}
}
(window.jQuery,window,document);

CSS代码(normalize.css):

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}

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