您的位置：首页 > 移动开发

zepto.js+animate.css实现Web端移动端相册

2017-09-11 16:43 337 查看 
<!DOCTYPE html>
<html>

<head>
<title>Bootstrap beign</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link href="css/animate.css" rel="stylesheet" />
<script src="js/zepto.min.js"></script>
<style>
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul,
img {
margin: 0;
padding: 0;
}

body {
background: #000;
}

ul {
list-style: none;
}

li {
overflow: hidden;
float: left;
}

.large {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
bottom: 0;
background-color: #000;
display: none;
}
</style>
</head>

<body>
<ul class="img-container" id="container"></ul>
<!--查看大图-->
<div class="large animated fadeIn" id="large_container">
<img id="large_img" />
</div>
<!--显示点击后的图片-->
<script>
//何避免出界，出现头部和底部的黑底
document.querySelector('body').addEventListener('touchstart', function(ev) {
event.preventDefault();
});
//属性值
var total = 17;
var padding = 2;
var tmpl = '';
var win = $(window);
var winWidth = win.width();
var picWidth = Math.floor((winWidth - padding * 3) / 4); //单张图片的宽度
//渲染图片
var rander = function() {
for(var i = 1; i <= total; i++) {
var p = padding;
if(i % 4 == 1) {
p = 0;
}
//data-id="' + i + '" 自定义属性   canvas GPU渲染;
tmpl += '<li data-id="' + i + '" class="animated bounceIn" style="width:' + picWidth + 'px;height:' + picWidth + 'px;padding-top:' + padding + 'px;padding-left:' + p + 'px;"><canvas id="cvs_' + i + '"></canvas></li>';
//小图
var imageObj = new Image();
imageObj.index = i;
imageObj.onload = function() {
var cvs = $("#cvs_" + this.index)[0].getContext("2d");
cvs.width = picWidth; //取图片的真实的宽度
cvs.height = picWidth; //取图片真实的高度
cvs.drawImage(this, 0, 0);
}
imageObj.src = 'img/' + i + '.jpg'; //请求图片的src 进入onload方法
}
$('#container').html(tmpl);
}
rander();

//查看大图
var wImage = $('#large_img');
var domImage = wImage[0]; //经过$包装后成为一个zepto对象，后面加[0]转换dom对象
//展示大图
var loadImg = function(id, callback) {
$('#large_container').css({
width: win.width(),
height: win.height()
}).show();
//大图
var imageObj = new Image();
var imgsrc = 'img/' + id + '.jpg';
imageObj.onload = function() {
var w = this.width; //取图片的真实的宽度
var h = this.height; //取图片真实的高度
var winWidth = win.width();
var winHeight = win.height();
//竖图
var paddingLeft = parseInt((winWidth - winHeight * w / h) / 2);
//横图
var paddingTop = parseInt((winHeight - winWidth * h / w) / 2);
//横图竖图切换前回复样式
$('#large_img').css({ 'width': 'auto', 'height': 'auto' });
$('#large_img').css({ 'padding-left': '0px', 'padding-top': '0px' });
//判断图片的类型
if(h / w > 1.2) {
//竖图
wImage.attr("src", imgsrc).css({ 'height': winHeight, 'padding-left': paddingLeft + 'px' });

} else {
//横图
wImage.attr("src", imgsrc).css({ 'width': winWidth, 'padding-top': paddingTop + 'px' });
}
callback && callback(); //兼容性处理
}
imageObj.src = 'img/' + id + '.jpg'; //1.请求图片的src 2.进入onload方法
}

//事件代理 防止额外的开销
var cid = 0; //图片的id
$('#container').delegate('li', 'tap', function() {
var id = cid = $(this).data('id'); //li
loadImg(id);
});

//点击图片隐藏
$('#large_container').tap(function() {
$(this).hide();
}).swipeLeft(function() {
//左滑图片
cid = Math.min(17, ++cid);
loadImg(cid, function() {
//执行之后进入事件
domImage.addEventListener("webkitAnimationEnd", function() {
wImage.removeClass('animated bounceInRight');
domImage.removeEventListener('webkitAnimationEnd', arguments.callee);
}, false);
wImage.addClass('animated bounceInRight');
});
}).swipeRight(function() {
//右滑图片
cid = Math.max(1, --cid);
loadImg(cid, function() {
//执行之后进入事件
domImage.addEventListener("webkitAnimationEnd", function() {
wImage.removeClass('animated bounceInLeft');
domImage.removeEventListener('webkitAnimationEnd', arguments.callee);
}, false);
wImage.addClass('animated bounceInLeft');
});

});
</script>
</body>

</html>
资源地址 https://gitee.com/WoZhuZ
994c
aiHaiBianXiHuanLang/WebYiDongDuanXiangCe
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航