该组件已被弃用 如有需求请选择最新组件
最新组件previewImage-mobile-地址
新组件-仿微信js-sdk wx.previewImage JavaScript实现，支持图片预览，滑动切换，双指缩放，图片缓存;
html代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!------------------------浏览器内核------------------------>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--如果安装了GCF,则使用GCF来渲染页面.
如果未安装GCF,则使用最高版本的IE内核进行渲染.-->
<meta name="renderer" content="webkit">
<!--使用360等国内主流浏览器内核;
content的取值为webkit,ie-comp,ie-stand之一,区分大小写.
分别代表用webkit内核,IE兼容内核,IE标准内核.-->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!---禁止百度转码-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>图片放大测试</title>
<link rel="stylesheet" type="text/css" href="enlargepicture.css"><style> <span style="white-space:pre"> </span>.enlarge-blackground{background-color: #000 !important;position: fixed;top:0;left: 100%;overflow: hidden;z-index: 99999;width: 100%;}
<span style="white-space:pre"> </span>.enlarge-img-box{margin: 0;position: absolute;width: 1999px;}
<span style="white-space:pre"> </span>.enlarge-div{float: left;}
<span style="white-space:pre"> </span>.enlarge-number-tips{width:40px;height:30px;background-color:#555;background-clip:padding-box;border-radius: 50%;position: absolute;line-height: 30px;text-align: center;letter-spacing:-2px;right: 20px;top:20px;color: #f8f8f8;}
<span style="white-space:pre"> </span>.enlarge-number-tips-allnumber{font-size: 0.8em;}
</style>
</head>
<body>
<div class='enlarge-blackground '>
<div class='enlarge-number-box'>
<div class='enlarge-number-tips'>
<font class='enlarge-number-tips-indexpic'>1</font>
/
<font class='enlarge-number-tips-allnumber'>0</font>
</div>
</div>
<div class='enlarge-img-box'>
<div class='enlarge-div '>
<img class='enlarge-img' src='1.jpg'/>
</div>
<div class='enlarge-div '>
<img class='enlarge-img' src="2.jpg"/>
</div>
<div class='enlarge-div '>
<img class='enlarge-img' src="3.jpg"/>
</div>
<div class='enlarge-div '>
<img class='enlarge-img' src="4.jpg"/>
</div>
<div class='enlarge-div '>
<img class='enlarge-img' src="5.jpg"/>
</div>
</div>
</div>
<button>图片预览</button>
</body>
<script src='jquery.min.js'></script>
<script src='enlargepicture.js'></script>
<script>
startenLargePicture();
$('button').on('click',function(){
enLargePicture();
})
</script>js代码如下
function startenLargePicture(){
var ww=$(window).width();
var wh=$(window).height();
$('.enlarge-img').css('width',ww);
var img_number=$('.enlarge-img-box').children('.enlarge-div').length;
var imgh_s=$('.enlarge-img').height();
var imgw_s=ww;
$('.enlarge-number-tips-allnumber').html(img_number);
$('.enlarge-blackground').css('height',wh);
$('.enlarge-center-box').css('height',imgh_s);
$('.enlarge-img-box').css('width',imgw_s*img_number);
var theimg_h=$('.enlarge-img-box').height();
$('.enlarge-img-box').css('top',(wh-theimg_h)/2);
var set={ //全局设置
max_magnification: 2.0 , //最大放大倍数
re_magnification: 1.5 , //回弹放大倍数
changespeed: 0.4 , //换图灵敏度(0.1-0.9)
}
var touches={
number : null ,
one: { sy : 0 ,sx : 0 ,mx : 0 ,my : 0 ,ex : 0 ,ey : 0 ,},
two : {sy : 0 ,sx : 0 ,mx : 0 ,my : 0 ,ex : 0 ,ey : 0 ,},}
var sl = null; //初始距离
var _3d = null; var _2d = null; var scale = 1;
var global={scale : 1,offsetX : 0, offsetY : 0, is_scale : false, go_change:'static', moveX:0, allmoveX:img_number*imgw_s, indexpic:1, };
var img_offset={ left_s: 0 , top_s: 0 , left_m: 0 , top_m: 0 , left_e: 0 , top_e: 0 ,}
$('.enlarge-blackground').show();
$('.enlarge-div').on('touchstart touchmove touchend',function(e){
var imgh=$(this).children('.enlarge-img').height();
var imgw=$(this).children('.enlarge-img').width();
switch(e.type){
case 'touchstart':
global.go_change='static';
$(this).children('.enlarge-img').css({
'-moz-transition': '-moz-transform 0s',
'-webkit-transition': '-webkit-transform 0s',
'-o-transition': '-o-transform 0s',
'-ms-transition': '-ms-transform 0s',
'transition': 'transform 0s',
});
img_offset.left_s=$(this).children('.enlarge-img').offset().left;
img_offset.top_s=$(this).children('.enlarge-img').offset().top;
touches.number=e.originalEvent.touches;
if(touches.number.length==1){
touches.one.sx=e.originalEvent.targetTouches[0].pageX;
touches.one.sy=e.originalEvent.targetTouches[0].pageY;
//return;
}else{
touches.one.sx=e.originalEvent.targetTouches[0].pageX;
touches.one.sy=e.originalEvent.targetTouches[0].pageY;
touches.two.sy=e.originalEvent.targetTouches[1].pageY;
touches.two.sx=e.originalEvent.targetTouches[1].pageX;
sl=Math.ceil(Math.sqrt(Math.pow((touches.one.sy-touches.two.sy),2)+Math.pow((touches.one.sx-touches.two.sx),2))); //初始距离
}
break;
case 'touchmove':
img_offset.left_m=$(this).children('.enlarge-img').offset().left;
img_offset.top_m=$(this).children('.enlarge-img').offset().top;
if((touches.number.length==1)&&(global.scale>=1)){ //单手指
touches.one.ex=e.originalEvent.targetTouches[0].pageX;
touches.one.ey=e.originalEvent.targetTouches[0].pageY;
var stop_position_x=imgw/3;
var stop_position_y=imgh/3;
offsetX=(stop_position_x*(touches.one.ex-touches.one.sx))/(Math.abs((touches.one.ex-touches.one.sx))+stop_position_x)+global.offsetX;
offsetY=(stop_position_y*(touches.one.ey-touches.one.sy))/(Math.abs((touches.one.ey-touches.one.sy))+stop_position_y)+global.offsetY;
_3d='scale3d('+global.scale+','+global.scale+',1) '+' translate3d(' + offsetX + 'px,' + offsetY + 'px,0px)';
_2d='scale('+global.scale+','+global.scale+') '+' translate(' + offsetX + 'px,' + offsetY +'px)';
if((scale>1)&&(img_offset.left_m<=0)&&(img_offset.left_m<=-(imgw_s-imgw/global.scale))){
offsetY=touches.one.ey-touches.one.sy+global.offsetY;
offsetX=touches.one.ex-touches.one.sx+global.offsetX;
}
}else { //双手指
touches.one.ex=e.originalEvent.targetTouches[0].pageX;
touches.one.ey=e.originalEvent.targetTouches[0].pageY;
touches.two.ex=e.originalEvent.targetTouches[1].pageX;
touches.two.ey=e.originalEvent.targetTouches[1].pageY;
ml=Math.ceil(Math.sqrt(Math.pow((touches.one.ey-touches.two.ey),2)+Math.pow((touches.one.ex-touches.two.ex),2)));
global.is_scale?scale=global.scale*2.5*ml/sl/(1.5+ml/sl) :scale=2.5*ml/sl/(1.5+ml/sl); //放大阻尼效果
offsetX=Math.ceil((touches.one.ex+touches.two.ex)/2)-Math.ceil((touches.one.sx+touches.two.sx)/2)+global.offsetX;
offsetY=Math.ceil((touches.one.ey+touches.two.ey)/2)-Math.ceil((touches.one.sy+touches.two.sy)/2)+global.offsetY;
_3d='scale3d('+scale+','+scale+',1) '+' translate3d(' + offsetX + 'px,' + offsetY + 'px,0px)';
_2d='scale('+scale+','+scale+') '+' translate(' + offsetX + 'px,' + offsetY +'px)';
}
//console.log(offsetX,offsetY);
$(this).children('.enlarge-img').css({
'-webkit-transform': _3d,
'-o-transform': _2d,
'-ms-transform': _2d,
'-moz-transform': _2d,
'transform': _3d,
});
break;
case 'touchend':
img_offset.left_e=$(this).children('.enlarge-img').offset().left;
img_offset.top_e=$(this).children('.enlarge-img').offset().top;
if((touches.one.ex-touches.one.sx<=-imgw*set.changespeed)&&(global.moveX+imgw<global.allmoveX)&&(touches.one.ex!=0)){global.go_change='down';}else if((touches.one.ex-touches.one.sx>=imgw*set.changespeed)&&(global.moveX-imgw>=0)&&(touches.one.ex!=0)){global.go_change='up'; }else{global.go_change='static';} //判断图片是否切换
touches.one.ex=0;
if(scale<=1){
scale=1;
}else if(scale>set.max_magnification){
scale=set.re_magnification;
}
if((img_offset.top_e!=0|| img_offset.left_e!=0)&&(scale<=1)){ //缩小或未放大时图片回弹效果
offsetX=0;
offsetY=0;
}
if((img_offset.left_e>0)&&(scale>1)){ //放大时X轴图片回弹效果
offsetX=(imgw_s-imgw/scale)/2;
}else if((img_offset.left_e<0)&&(img_offset.left_e<=-(imgw_s-imgw/scale))&&(scale>1)){
offsetX=-(imgw_s-imgw/scale)/2;
}
if((img_offset.top_e>50)&&(scale>1)){ //放大时Y轴图片回弹效果
offsetY=0;
}else if((img_offset.top_e<-50)&&(scale>1)){
offsetY=0;
}
if(global.go_change=='down'){ //多图片切换下一张
scale=1;offsetX=0;offsetY=0;global.scale=1;
global.moveX+=imgw;
transFormMove(-global.moveX);
tansForm(scale,offsetX,offsetY);
global.indexpic+=1;
$('.enlarge-number-tips-indexpic').html(global.indexpic);
}else if(global.go_change=='up'){ //多图片切换上一张
scale=1;offsetX=0;offsetY=0;global.scale=1;
global.moveX-=imgw;
transFormMove(-global.moveX);
tansForm(scale,offsetX,offsetY);
global.indexpic-=1;
$('.enlarge-number-tips-indexpic').html(global.indexpic);
}else{ //多图片切换不变
tansForm(scale,offsetX,offsetY);
global.scale=scale;
global.offsetY=offsetY;
global.offsetX=offsetX;
global.is_scale=true;
}
break;
}
});
function tansForm(tran_scale,tran_offsetX,tran_offsetY){
var tran_3d='scale3d('+tran_scale+','+tran_scale+',1) '+' translate3d(' + tran_offsetX + 'px,' + tran_offsetY + 'px,0px)';
var tran_2d='scale('+tran_scale+','+tran_scale+') '+' translate(' + tran_offsetX + 'px,' + tran_offsetY +'px)';
$(event.target).css({
'-webkit-transform': tran_3d,
'-o-transform': tran_2d,
'-ms-transform': tran_2d,
'-moz-transform': tran_2d,
'transform': tran_3d,
'-moz-transition': '-moz-transform .3s ease-out',
'-webkit-transition': '-webkit-transform .3s ease-out',
'-o-transition': '-o-transform .3s ease-out',
'-ms-transition': '-ms-transform .3s ease-out',
'transition': 'transform .3s ease-out',
});
}
function transFormMove(tran_moveX){
var tran_3d=' translate3d(' + tran_moveX + 'px,' + '0' + 'px,0px)';
var tran_2d=' translate(' + tran_moveX + 'px,' + '0' +'px)';
$('.enlarge-img-box').css({
'-webkit-transform': tran_3d,
'-o-transform': tran_2d,
'-ms-transform': tran_2d,
'-moz-transform': tran_2d,
'transform': tran_3d,
'-moz-transition': '-moz-transform .3s ease-out',
'-webkit-transition': '-webkit-transform .3s ease-out',
'-o-transition': '-o-transform .3s ease-out',
'-ms-transition': '-ms-transform .3s ease-out',
'transition': 'transform .3s ease-out',
});
}
}
function forbidTouchmove(){
event.preventDefault();
}
$('.enlarge-blackground').bind('click',function(){
$('.enlarge-blackground').animate({left:'100%'});
$('body').unbind('touchmove',forbidTouchmove);//取消屏蔽
});
function enLargePicture(){ //触发函数
var wh=$(window).height();
var theimg_h=$('.enlarge-img-box').height();
$('.enlarge-img-box').css('top',(wh-theimg_h)/2);
$('.enlarge-blackground').animate({left:'0'});
$('body').bind('touchmove',forbidTouchmove);//屏蔽自带touchmove
}
demo下载
扫一扫
1801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
