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