iphoneAlbum

功能描述

纯CSS3模拟iPhoneX背景切换动画相框展示

依赖的模块

woo_iphoneAlbum.css,woo_iphoneAlbum.js

快速使用

下部图片列表可以左右滑动

   <div class="workspace">
    <div class="bg-content"></div>
    <div class="mobile-body">
        <div class="top-bar">
            <div class="camera"></div>
            <div class="speaker"></div>
        </div>
        <div class="button volume-up"></div>
        <div class="button volume-down"></div>
        <div class="button silent"></div>
        <div class="button power"></div>
        <div class="layer-2"></div>
        <div class="layer-1"></div>
        <div class="layer-gradient-1"></div>
        <div class="layer-gradient-2"></div>
    </div>
    <div class="gallery-content" >
        <div class="gallery-content__img active" data-img="image/woo_bg-1.jpg"><img src="image/woo_bg-1.jpg"></div>
        <div class="gallery-content__img" data-img="image/woo_bg-2.jpg"><img src="image/woo_bg-2.jpg"></div>
        <div class="gallery-content__img" data-img="image/woo_bg-4.jpg"><img src="image/woo_bg-4.jpg"></div>
        <div class="gallery-content__img" data-img="image/woo_bg-9.jpg"><img src="image/woo_bg-9.jpg"></div>
        <div class="gallery-content__img" data-img="image/woo_bg-10.jpg"><img src="image/woo_bg-10.jpg"></div>
    </div>
</div>

特别说明

使用原生代码,进行循环赋值,此版本针对手机版浏览使用