手机端图片预览和缩放js
转至:http://blog.sina.com.cn/s/blog_c342e3090102vcxu.html
1.手机端的图片选择和预览
《input type="file" id="preview"/》《img id="theImg"/》
var oBtn = document.getElementByIdx_x_x('preview');
var oImg = document.getElementByIdx_x_x('theImg');
oBtn.addEventListener('change', handleFileSelect, false);
function handleFileSelect(evt) {
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function (theFile) {
return function (e) {
oImg.style.width = '10em';
oImg.src = event.target.result;
oImg.style.display = "block";
};
})(f);
reader.readAsDataURL(f);
}
}
2.手机端的两个手指缩放图片
《img src="http://www.jzqing.net/images/p9.jpg" id="img" style="width:100%;height:1000px;position:absolute;left:0;top:0;margin-top:0;"/》
//全局变量,触摸开始位置
var startX = 0, startY = 0;
var startX1 = 0, startY1 = 0;
var startDis = 0;
var dis = [];
//touchstart事件
function touchSatrtFunc(evt) {
try {
dis = [];
evt.preventDefault();//用来阻止手机的默认事件
}
catch (e) {
alert('touchSatrtFunc:' + e.message);
}
}
var theKey = 1;
//touchmove事件,这个事件无法获取坐标
function touchMoveFunc(evt) {
try {
// evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.targetTouches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
if (evt.targetTouches.length == 2) {
var touch1 = evt.targetTouches[1]; //获取第2个触点
var x1 = Number(touch1.pageX); //页面触点X坐标
var y1 = Number(touch1.pageY); //页面触点Y坐标
dis.push(Math.sqrt(Math.pow(x - x1, 2) + Math.pow(y - y1, 2)));
}
if (dis.length > 0) {
if (dis[0] > dis[dis.length - 1]) {
if (theKey <= 1) {
return false;
} else {
theKey -= 0.05;
}
document.getElementByIdx_x_x('img').style.webkitTransform = 'scale(' + theKey + ')';
} else {
theKey += 0.05;
document.getElementByIdx_x_x('img').style.webkitTransform = 'scale(' + theKey + ')';
return false;
}
}
}
catch (e) {
alert('touchMoveFunc:' + e.message);
}
}
//touchend事件
function touchEndFunc(evt) {
try {
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动
}
catch (e) {
alert('touchEndFunc:' + e.message);
}
}
//绑定事件
function bindEvent() {
document.addEventListener('touchstart', touchSatrtFunc, false);
document.addEventListener('touchmove', touchMoveFunc, false);
document.addEventListener('touchend', touchEndFunc, false);
}
document.getElementByIdx_x_x('img').onload = bindEvent;
3.图片点击之后居中显示
//windows.innerWidth是查看手机端浏览器的有效可视高度
function clickFun(evt, obj) {
var imgHeigt = windows.innerWidth * obj.height / obj.width; //获取大图片的高度
if (imgHeigt >= window.screen.height) {
obj.style.top = 0;
obj.style.marginTop = 0;
} else {
obj.style.top = '50%';
obj.style.marginTop = -1 * imgHeigt / 2 + 'px';
}
}
document.getElementByIdx_x_x_x('img').addEventListener('click', function () { clickFun(event, this) }, false);
解释:
手机端的触屏事件的顺序是touchstart,touchmove,touchend,click,如果想要禁止click事件可以在touchstart时调用evt.preventDefault(); 来阻止之后的默认行为,但是如果想在响应手指滑动事件之后,还继续触发click事件,那么可以:不要在touchstart和touchend里面写preventDefault,只需要在touchmove里面写就可以了。
最新文章
- Linux 系统命令笔记
- C#利用反射+特性实现简单的实体映射数据库操作类
- [CC]平面拟合
- Java入门记(二):向上转型与向下转型
- IntelliJ_13_配置tomcat
- expert C Programing notes
- [自动运维]weblogic自动发布
- 使用Xcode5开发时的icon取消高光效果
- 用java发送email邮件例子
- iptables学习笔记
- android百度定位
- SVN中tag branch trunk用法详解
- 【每日一摩斯】-Troubleshooting: High CPU Utilization (164768.1) - 系列5
- 专为webkit内核而生的javascript库mango正式发布
- ubuntu 学习笔记1--安装jdk
- Java 程序测试_循环语句中的break和continue
- 5.spark弹性分布式数据集
- 数据模型(LP32 ILP32 LP64 LLP64 ILP64 )
- WordPress 实现附件上传自动重命名但不改变附件标题
- img图片占不满整个div