html5 放大动画效果图,HTML5 手机图片触摸放大效果(多个图片)

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

(function(e, t) {

var n = ["touchstart", "touchmove", "touchend"];

e.enlarge = function(e, t, i) {

//var s = document.getElementById(e);

var els = document.getElementsByClassName(e);

for (var idx = 0; idx < els.length; idx++) {

var s = els[idx];

var a = s.getElementsByTagName("img")[0];

var o = {

x: a.width / (t - a.width),

y: a.height / (i - a.height)

};

s.style.overflow = "hidden";

s.style.position = "relative";

s.innerHTML += '';

var l = s.getElementsByTagName("img")[1];

l.style.position = "absolute";

l.style.left = "0px";

l.style.top = "0px";

l.style.width = t + "px";

l.style.height = i + "px";

l.style.display = "none";

s.onclick = function() {

return false

};

var d = function(e) {

e.preventDefault();

l = this.getElementsByTagName("img")[1];

a = this.getElementsByTagName("img")[0];

var t = e.changedTouches[0].pageX - this.offsetLeft;

var n = e.changedTouches[0].pageY - this.offsetTop;

if (t < 0) t = 0;

if (n < 0) n = 0;

if (t > a.width) t = a.width;

if (n > a.height) n = a.height;

l.style.display = "block";

l.style.left = 0 - t / o.x + "px";

l.style.top = 0 - n / o.y + "px";

};

var h = function() {

l.style.display = "none"

};

s.addEventListener(n[0], d);

s.addEventListener(n[1], d);

s.addEventListener(n[2], h);

l.addEventListener(n[1], d);

l.addEventListener(n[2], h)

}

}

})(window);

window.onload = function() {

enlarge("demo", 1000, 1180);

}