JavaScript

超轻量级php框架startmvc

基于zepto.js实现手机相册功能

更新时间:2020-05-23 19:54:01 作者:startmvc
看完老师的视频做的一个手机相册,对我这种菜鸟来说还是直接上代码吧!里面用到17张小

看完老师的视频做的一个手机相册,对我这种菜鸟来说还是直接上代码吧!里面用到17张小图,17张大图,还有animate.css和zepto.min.js ,都可以在网上找到。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
<title>photo</title>
<link rel="stylesheet" href="animate.css"/>
<script src="zepto.min.js"></script>
<style type="text/css">
 blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,ul,li,img{
 margin: 0;
 padding: 0;
 }
 .clearfix::before,.clearfix::after{
 content:"";
 height: 0;
 line-height: 0;
 display: block;
 visibility: hidden;
 clear: both;
 }
 body{
 background-color: black;overflow: hidden;
 }
 ul{
 list-style: none;
 }
 .container li{ 
 float: left;
 overflow: hidden; 
 }
 .large{
 height: 100%;
 width: 100%;
 position: absolute;
 left: 0;
 top: 0;
 background-color: black;
 }
</style>
</head>
<body>
 
<ul class="container clearfix" id="container"> 
</ul>

<div class="large animated fadeInDown" id="large_container" style="display: none;">
 <img id="large_img" />
</div>
<script>
 var num=17;
 var zWin=$(window);
 var render=function(){
 var padding=2;
 var winWidth=zWin.width();
 var picWidth=Math.floor((winWidth-padding*3)/4);
 var tmpl="";
 for (var i = 1; i <=num; i++) {
 var p = padding;
 var imgSrc='img/'+i+'.jpg';
 if (i%4==1) {
 p=0;
 }
 tmpl+='<li class="animated bounceIn" data-id="'+i+'" style=" width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'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=this.width;
 cvs.height=this.height;
 cvs.drawImage(this,0,0);
 }
 imageObj.src=imgSrc;
 } 
 $("#container").html(tmpl);
 }
 render();
 var wImage = $('#large_img');
 var domImage = wImage[0]; //image对象的DOM应用
 var loadImg = function (id,callback) {
 $('#container').css({height:zWin.height(),'overflow':'hidden'})
 // $('#container').css({'display':'none'})
 $('#large_container').css({
 width:zWin.width(),
 height:zWin.height()
 }).show();
 //加载大图
 var imgsrc = 'img/'+id+'.large.jpg';
 var imageObj = new Image();
 imageObj.onload = function () {
 var w = this.width; //图片的宽高
 var h = this.height;
 var winWidth = zWin.width(); //window的宽高
 var winHidth = zWin.height();
 var realw = winHidth*w/h;
 var paddingLeft = parseInt((winWidth - realw)/2);
 var realh = winWidth*h/w;
 var paddingTop = parseInt((winHidth - realh)/2);
 //横图和竖图切换时需要重置大图的css样式
 wImage.css('width','auto').css('height','auto');
 wImage.css('padding-left','0px').css('padding-top','0px');
 //计算图片的宽高比,判断是横图还是竖图
 if (h/w>1.2) {
 //图片显示出来
 wImage.attr('src',imgsrc).css('height',winHidth).css('padding-left',paddingLeft)
 }else{
 wImage.attr('src',imgsrc).css('width',winWidth).css('padding-top',paddingTop)
 }
 callback&&callback();
 }
 imageObj.src = imgsrc; 
 }
 var cid;
 //给LI做事件绑定;
 $('#container').delegate('li','tap',function(){
 var _id = cid = $(this).attr('data-id')
 loadImg(_id)
 });

 //点击大图,返回相册
 $('#large_container').tap(function() {
 $('#container').css({height:'auto','overflow':'auto'})
 // $('#container').css({'display':'block'})
 $(this).hide();
 }).swipeLeft(function(){
 cid++;
 if(cid>num){
 cid = num;
 }else{
 loadImg(cid,function(){ //事件监听
 domImage.addEventListener('webkitAnimationEnd',function(){ //动画结束之后执行函数
 wImage.removeClass('animated bounceInRight');
 domImage.removeEventListener('webkitAnimationEnd')
 },false) //控制事件是否冒泡用false参数
 wImage.addClass('animated bounceInRight');
 });
 }
 }).swipeRight(function(){
 cid--;
 if(cid<1){
 cid = 1;
 }else{
 loadImg(cid,function(){
 domImage.addEventListener('webkitAnimationEnd',function(){
 wImage.removeClass('animated bounceInLeft');
 domImage.removeEventListener('webkitAnimationEnd')
 },false)
 wImage.addClass('animated bounceInLeft');
 });
 }
 })

</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。