该组件已被弃用如有需求请选择最新组件

新组件-仿微信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下载

自己写的一个类淘宝手机端图片浏览双指缩放的功能相关推荐

只用div+CSS做淘宝手机端首页
div+CSS教你做出淘宝手机端首页为什么只用div做网页网页代码网页效果展示需要更全面的SEO优化网站软件工具及软件操作文档可以联系博主,会有更详细的教程,系统的帮助您的网站关键词40天上百 ...
淘宝手机端-selenium破解过程详解
最近在解决完淘宝爬虫接口后,因为业务需要要用到商品截图的功能,于是研究了一下,分享一下其中的难点吧~ 这里我们以淘宝的某电饭煲商品为例-> 1.PC端登陆滑块验证:我们看到阿里的滑块验证很简洁 ...
复制淘宝手机端页面案例
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>淘 ...
淘宝手机端SEO优化，如何提升淘宝手机端搜索排名
最近在研究淘宝SEO, 店铺名欧式沙发520. 店铺地址http://shop113208383.taobao.com/ 在淘宝搜索 "韩式客厅小户型现代沙发" 在广东地区,P ...
淘宝手机端详情页的设置
图片设置的大小宽度在480px-620px,高度在960px,格式为jpg,png,jif都可,字号大于等于30,因为字号太小,放在手机上可能就看不清楚了手机端描述你可以选择这个选项,然后就可以上传 ...
写了一个jquery.imagesview插件，支持图片拖动、缩放类似ACDSEE效果
做项目的时候客户总是比较关心前台界面,这不最近又遇到一个难缠的客户.要求在前台的缩略图点开后查看高分辨率的图片,并且最好能像ACDSEE那样方便浏览,支持拖动.按比例放大缩小. 这样的效果记得在SIN ...
写一个类似淘宝的ios app需要用到哪些技术？
写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...
写给想加入淘宝的在校同学--广州实习生招聘感想
原文地址:http://www.blogjava.net/vanadies10/archive/2011/04/28/349153.html 写给想加入淘宝的在校同学--广州实习生招聘感想 2011淘 ...
家有妙招：教你一个在淘宝买东西打折的好方法
教你一个在淘宝买东西打折的好方法其实我们可以使用淘宝客来实现打折.下面是阿里妈妈对淘宝客的定义:淘宝客推广是一种按成交计费的推广模式,淘宝客只要从淘宝客推广专区获取商品代码,任何买家(包括您自己)经 ...

自己写的一个类淘宝手机端图片浏览双指缩放的功能

该组件已被弃用如有需求请选择最新组件

最新组件previewImage-mobile-地址

新组件-仿微信js-sdk wx.previewImage JavaScript实现，支持图片预览，滑动切换，双指缩放，图片缓存;

自己写的一个类淘宝手机端图片浏览双指缩放的功能相关推荐

最新文章

热门文章

自己写的一个类淘宝手机端图片浏览双指缩放的功能

该组件已被弃用 如有需求请选择最新组件

最新组件previewImage-mobile-地址

新组件-仿微信js-sdk wx.previewImage JavaScript实现，支持图片预览，滑动切换，双指缩放，图片缓存;

自己写的一个类淘宝手机端图片浏览双指缩放的功能相关推荐

最新文章

热门文章

该组件已被弃用如有需求请选择最新组件