KISSY.add("mui/detail-review/mallphotos", function(e, t, a, r, i, s) {
var n = ".",
l = "",
o = e.all,
c, d = false;
var u = {};
var v = {};
e.mix(v, {
init: function(a, i) {
c = this;
c.el = t.get(a);
if (!e.isArray(i)) return;
var s = new r(f()).render(p(i));
c.el.innerHTML = s;
h()
},
run: function(e, r) {
c = this;
h(t.get(e));
a.fire(r, "click")
}
});
function f() {
return '<p class="tm-m-photos"><ul class="tm-m-photos-thumb"> {{#each pics}} <li src="{{this}}_400x400.jpg" > <img src="{{this}}_40x40.jpg"> <b class="tm-photos-arrow"></b> </li> {{/each}}</ul><p class="tm-m-photo-viewer" style="width:400px;height:400px;"><img src=""></p></p>'
}
function p(e) {
return {
pics: e
}
}
function h(r) {
c.viewer = t.get(".tm-m-photo-viewer", r);
var i = t.query("li", r);
e.each(i, function(s, n) {
a.on(s, "click", function(a) {
e.log(t.attr(this.l, "src"));
var r = t.css(this.v, "display");
var s = !t.equals(t.get(this.l), t.get(".tm-current", this.e));
if (r === "none" || s) {
r = g(t.attr(this.l, "src"), this.v);
t.removeClass(i, "tm-current");
t.addClass(this.l, "tm-current")
} else {
r = m(this.v, i)
}
}, {
v: c.viewer,
l: s,
e: r
})
});
a.on(c.viewer, "click", function(e) {
if (e.target.tagName.toUpperCase() != "I" && e.target.tagName.toUpperCase() != "A") {
m(this.v, i)
}
}, {
v: c.viewer
});
if (e.UA.ie && parseInt(e.UA.ie) < 8 || o(c.viewer).prev().children().length < 2) {
o(c.viewer).all("a").remove()
} else {
var s = t.query("a", c.viewer);
a.on(s, "click", function(e) {
var a = t.query(this),
r = t.parent(a);
y(r, a)
});
a.on(s, "mouseenter", function(e) {
var t = o(this),
a = t.parent().prev(),
r = a.one(".tm-current").index(),
i = t.index();
if (i == 1 && r == 0 || i > 1 && r == a.children().length - 1) {
t.css("cursor", "default").one("i").hide()
} else {
if (d) {
var s = t.height() / 2 - 10;
t.css("cursor", "pointer").one("i").css("top", s).show()
}
}
});
a.on(s, "mouseleave", function(e) {
o(this).one("i").hide()
})
}
}
function g(e, a) {
s.gm("8.2.7");
var r = 410,
n = 410;
var l = function() {
t.attr(t.get("img", a), "src", e);
t.css(a, {
display: "block",
width: 400,
height: 400
});
t.css(t.get("img", a), {
width: 400
})
};
s.loadImage(e, function(s) {
if (s.width > n || s.height > r) {
l();
d = true
} else {
t.attr(t.get("img", a), "src", e);
new i(a, {
display: "block",
width: s.width + 2,
height: s.height + 2
}, .25, "linear", function() {
d = true;
var e = o(a).all("a");
e.css("width", o(a).width() / 3)
}).run();
new i(t.get("img", a), {
width: s.width + 2,
height: s.height + 2
}, .25, "linear", function() {}).run()
}
}, function(e) {
l()
});
return true
}
function m(e, a) {
new i(e, {
display: "none",
width: 0,
height: 0
}, .5, "linear", function() {
d = false
}).run();
t.removeClass(a, "tm-current");
return false
}
function y(e, a) {
var e = o(e),
a = o(a),
r = e.prev(),
n = r.one(".tm-current"),
l = a.index(),
c = l == 2 ? n.next() : n.prev();
if (c) {
var d = c.index(),
u = c.attr("src");
n.removeClass("tm-current");
c.addClass("tm-current");
s.loadImage(u, function(s) {
e.one("img").attr("src", u);
new i(e, {
display: "block",
width: s.width + 2,
height: s.height + 2
}, .25, "linear", function() {
a.css("width", e.width() / 3)
}).run();
if (l == 1 && d == 0 || l == 2 && d == r.children().length - 1) {
a.css("cursor", "default").one("i").hide()
} else {
var n = (s.height + 6) / 2 - 10;
a.show();
new i(a.css("cursor", "pointer").one("i"), {
top: n
}, .2, "linear", function() {}).run()
}
new i(t.get("img", e), {
width: s.width + 2,
height: s.height + 2
}, .25, "linear", function() {}).run()
})
}
}
return v
}Ich möchte dieses Bild in der HTM-Datei verwenden. Klicken Sie, um das JS zu vergrößern, und verwenden Sie diesen Code dann direkt im HTM
<p class="tm-m-photos"><ul class="tm-m-photos-thumb"> {{#each pics}} <li src="{{this}}_400x400.jpg" > <img src="{{this}}_40x40.jpg"> <b class="tm-photos-arrow"></b> </li> {{/each}}</ul><p class="tm-m-photo-viewer" style="width:400px;height:400px;"><img src=""></p></p>
上面不是写着KISSY框架吗，所以要使用的话:
引入kissy，这一步你可以下载对应的文件或者直接使用cdn
//g.alicdn.com/kissy/k/1.4.8/seed-min.js在页面文件中
<script>引入你提到的js内容，或者用外联一个js文件也可以在html页面文件，使用相应的格式的代码，一般框架都对应了一些特定形式的
class或者其他属性，比如bootstrap用的data-大体流程如上，具体KISSY的使用方式看KISSY的文档KISSY