<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>移动端大图查看</title>
<script type="text/javascript" src="https://www.jb51.net/test_files/zepto.min.js" ></script>
<script type="text/javascript" src="https://www.jb51.net/test_files/ImageView.js" ></script>
</head>
<body>
<!--以上为HTML页面结构 -->
<!--以下为ImageView使用例子 -->
<script>
;(function(){
//获取 html 中的图片元素
var aImg=document.querySelectorAll("img"),
aImgSrc=[];
//为图片绑定单击事件
for(var i=0,l=aImg.length;i<l;i++){
aImg[i].index=i;
aImg[i].className+=" conPic";
aImgSrc.push(aImg[i].src);
}
for(var i=0;i<$(".conPic").length;i++){
if($(".conPic")[i].complete){
addTap($(".conPic")[i])
}else{
$(".conPic")[i].onload=function(){
addTap(this);
}
}
}
function addTap(obj){
$(obj).on("tap",function(){
//调用ImageView
ImageView($(obj)[0].index,aImgSrc);
})
}
})();
</script>
</body>
基于zepto.js实现仿手机QQ空间的大图查看组件Ima(3)
内容版权声明：除非注明，否则皆为本站原创文章。