zepto移动端web相册

最新推荐文章于 2023-07-07 12:59:19 发布

UIEngineer

最新推荐文章于 2023-07-07 12:59:19 发布

阅读量322

点赞数

分类专栏： webApp

本文链接：https://blog.csdn.net/zjsfdx/article/details/89706685

版权

webApp 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

参考慕课网

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="zepto.min.js"></script>
    <link rel="stylesheet" href="animate.css">
    <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: black;
            overflow: hidden;
        }
        ul{
            list-style: none;
        }
        .clearfix:after{
            display: block;
            content: "\20";/* "\20"就是空格，\空格的ASCII HEX值。 */
            height: 0;
            clear: both;
            overflow: hidden;
            visibility: hidden;
        }/* ie8以上 */
        .img-container li img{}
        .img-container li{overflow: hidden;float: left;}
        .large{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: black;
        }
    </style>
</head>
<body>
    <ul class="img-container clearfix" id="container">

    </ul>
    <div class="large animated fadeInDown" id="large_container" style="display:none;">
        <img id="large_img">
    </div>

    <script>
        var total = 17;//    共17张小图，17张对应小图的大图
        var zWin = $(window);

        // 函数
        var render = function(){
            var tmpl = '';
            var padding = 2;
            var scrollBarWidth = 2;
            var winWidth = $(window).width();// 获取窗口宽度
            var picWidth = Math.floor((winWidth - padding * 3 - scrollBarWidth) / 4)//  获取每张小图的宽度
            for(var i = 1;i <= total;i++){
                var p = padding;
                if(i % 4 == 1){
                    p = 0;  // 每行4张图，第一张图padding-left为0
                }
                tmpl += '<li data-id="' + i +'" class="animated bounceIn" style="width:' + picWidth + 'px;height:' + picWidth +'px;padding-left:' + p +'px;padding-top:' + padding +'px;"><img src="img/' + i +'.jpg"</li>'
            }
            $('#container').html(tmpl)//    追加小图
        }
        render();// 调用函数
        var wImage = $('#large_img');// 获取大图片
        var domImage = wImage[0];
        
        // 加载大图函数
        var loadImg = function(id,callback){
            $('#container').css({height:zWin,'overflow':'hidden'})//	设置图片容器样式，高度为窗口高
			$('#large_container').css({//	设置大图容器样式，并显示
				width:zWin.width(),
				height:zWin.height()
			}).show();
			var imgsrc = 'img/' + id + '.large.jpg'//	大图路径
			
			//	图片预加载，可以开启GPU渲染
			var ImageObj = new Image();
			ImageObj.src = imgsrc;
			ImageObj.onload = function(){
				var w = this.width;
				var h = this.height;
				// console.log('当前图片尺寸为:',w,h)
				var winWidth = zWin.width()//	获取整个窗口宽高
				var winHeight = zWin.height()
				
				var realw = parseInt((winWidth - winHeight*w/h)/2)//	paddingLeft
				var realh = parseInt((winHeight - winWidth*h/w)/2)//	paddingTop

                //  重置样式
                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',winHeight).css('padding-left',realw + 'px')
				}else{
					wImage.attr('src',imgsrc).css('width',winWidth).css('padding-top',realh + 'px')
				}
				
				//	执行回调函数
				callback&&callback()
			}
        }
        /* delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

        使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。 */
        $('#container').delegate('li','tap',function(){
            var _id = cid = $(this).attr('data-id') //  获取小图名字
            loadImg(_id);// 根据小图名字加载大图
        })
		
		/* 点击大图容器，隐藏大图 */
		$('#large_container').tap(function(){
			$('#container').css({height:'auto','overflow':'auto'})
			$(this).hide()
		})
        $('#large_container').mousedown(function(e){
            e.preventDefault()//    阻止浏览器的默认事件
        })
        
        var lock = false
        $('#large_container').swipeLeft(function(){
            if(lock){
                return
            }
            cid++// 下一张图片名称
            lock = true
            loadImg(cid,function(){//   加载大图
                // 侦听动画结束事件
                domImage.addEventListener('webkitAnimationEnd',function(){
                    wImage.removeClass('animated bounceInRight')//..移除样式
                    domImage.removeEventListener('webkitAnimationEnd')//    移除事件侦听
                    lock = false
                },false)
                wImage.addClass('animated bounceInRight')
            })
        })

        $('#large_container').swipeRight(function(){
            if(lock){
                return
            }
            cid--
            if(cid > 0){
                loadImg(cid,function(){
                    domImage.addEventListener('webkitAnimationEnd',function(){
                        wImage.removeClass('animated bounceInLeft')
                        domImage.removeEventListener('webkitAnimationEnd')
                        lock = false
                    },false)
                    wImage.addClass('animated bounceInLeft')
                })
            }else{
                cid = 1
            }
        })

    </script>

</body>
</html>

在这里插入图片描述