转至：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里面写就可以了。
