Web前端框架与移动应用开发第七章

其他 2018-05-28 17:11:45 阅读次数: 2

1.练习1：焦点图切换

html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>第七章上机练习一</title>
    <link rel="stylesheet" href="css/train1.css"/>
    <script>
        /*直接设置样式*/
        document.getElementsByTagName("html")[0].style.fontSize=window.screen.width/10+"px";
    </script>
</head>
<body>
<section id="picWrap">
    <div id="picList">
        <img src="image/img1.jpg" />
        <img src="image/img2.jpg" />
        <img src="image/img3.jpg" />
        <img src="image/img4.jpg" />
    </div>
</section>
<p id="picBtns">
    <span class="active"></span>
    <span></span>
    <span></span>
    <span></span>
</p>
<script>
    document.addEventListener('touchmove',function(e) {
        e.preventDefault();
    },false);

    window.onload=function()
    {
        var oPicList=document.getElementById("picList");
        var aBtns=document.getElementById("picBtns").children;
        var iScroll=0;
        var iStartX=0;
        var iStartPageX=0;
        var iNow=0;
        oPicList.addEventListener('touchstart',function(ev)
        {
            iStartPageX=ev.changedTouches[0].pageX;
            iStartX=iScroll;
            oPicList.style.WebkitTransition=oPicList.style.MozTransition=oPicList.style.transition="none";
        },false);

        oPicList.addEventListener('touchmove',function(ev)
        {
            var iDis=ev.changedTouches[0].pageX-iStartPageX;
            iScroll=iStartX+iDis;
            setStyle();
        },false);

        oPicList.addEventListener('touchend',function(ev)
        {
            var iDis=ev.changedTouches[0].pageX-iStartPageX;
            var iNub=Math.round(iDis/window.screen.width);
            iNow-=iNub;
            if(iNow<0)
            {
                iNow=0;
            }
            if(iNow>=aBtns.length)
            {
                iNow=aBtns.length-1;
            }
            iScroll=-iNow*window.screen.width;
            oPicList.style.WebkitTransition=oPicList.style.MozTransition=oPicList.style.transition=".5s";
            for(var i=0;i<aBtns.length;i++)
            {
                aBtns[i].className="";
            }
            aBtns[iNow].className="active";
            setStyle();
        },false);
        function setStyle()
        {
            oPicList.style.WebkitTransform=oPicList.style.MozTransform=oPicList.style.transform="translateX("+iScroll+"px)";
        }
    };
</script>
</body>
</html>

css:
@charset "UTF-8";
body{background:#f3f2f3;margin:0; font-size:0.5rem;}
#picWrap{width:100%; overflow:hidden;}
#picList{width:40rem;overflow:hidden;}
#picList img{width:10rem;float:left;}
#picBtns{height:0.3rem;padding:0.2rem 0;margin:0; text-align:center;}
#picBtns span{width:0.3rem;height:0.3rem;margin:0 0.1rem; border:1px solid #000; display:inline-block; box-sizing:border-box; border-radius:0.15rem; vertical-align:top;}
#picBtns .active{background:#f60;}

效果：
可实现滑动切换图片

2.练习2：开启宝箱，zepto.min.js下载点击

html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="css/train2.css">
    <title>开启宝箱</title>
</head>
<body ontouchstart="" class="open-body">
<div class="wrapper">
    <div class="bg rotate"></div>
    <div class="open-has ">
        <h3 class="title-close"><span class="user">开心小窝</span>给你发了一个宝箱</h3>
        <h3 class="title-open">恭喜你，谢良潘</br>成功领取<span class="user">开心小窝</span>发的全民打飞机大战冠军宝箱</h3>

        <div class="mod-chest">

            <div class="chest-close show ">
                <div class="gift"></div>
                <div class="tips">
                    <i class="arrow"></i>
                </div>
            </div>
            <div class="chest-open ">
                <div class="mod-chest-cont open-cont">
                    <div class="content">
                        <div class="gift">
                            <div class="icon"><img src="image/chest-icon-zuan.png"></div> x 500
                        </div>
                        <div class="func">
                            <button class="chest-btn">查看详情并提取</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript">
    $(".chest-close").click(function(){
        $(this).addClass("shake");
        var that=this;
        this.addEventListener("webkitAnimationEnd", function(){
            $(that).closest(".open-has").addClass("opened");
            setTimeout(function(){
                $(that).removeClass("show");
                $(that).closest(".mod-chest").find(".chest-open").addClass("show");
            },200)
        }, false);
    })
    $(".chest-btn").click(function(){
        window.location.reload();//重复
    })
</script>
</body>
</html>

css

/*button*/
body {
    background: #FFF4D2;
    background-size: 320px auto;
}

select {
    -webkit-appearance: none;
    -webkit-padding-end: 20px;
    -webkit-padding-start: 6px;
    background: url(../image/select-arrow.png) no-repeat #fff right 0px;
    background-size: 34px auto;
    border: #cfba8a 1px solid;
    box-sizing: border-box;
    width: 100%;
    height: 33px;
    outline: none;
    font-size: 12px;
    color: #9e702f;
    padding: 0px 8px;
}

input[type="text"] {
    -webkit-appearance: none;
    border: #cfba8a 1px solid;
    border: #cfba8a 1px solid;
    box-sizing: border-box;
    width: 100%;
    height: 33px;
    outline: none;
    font-size: 12px;
    color: #9e702f;
    padding: 0px 8px;
}

.c-orange {
    color: #ff5400;
}

.c-red {
    color: #cd0000;
}

.c-gray {
    color: rgba(134, 85, 0, .7);
}

.chest-btn {
    width: 100%;
    display: block;
    color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffa200), to(#ffa200));
    height: 44px;
    line-height: 44px;
    border-radius: 3px;
    font-size: 17px;
}

.chest-btn:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f09902), to(#f09902));
}

.btn-weak {
    background: #ff9600;
}

.btn-weak:active {
    background: #ec8c03;
}

.wrapper .ui-border-top {
    border-top: 1px solid #eccf88
}

.wrapper .ui-border-btm {
    border-bottom: 1px solid #eccf88
}

.wrapper .ui-border-tb {
    border-top: #eccf88 1px solid;
    border-bottom: #eccf88 1px solid;
    background-image: none
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .wrapper .ui-border-top {
        border-top: 0
    }

    .wrapper .ui-border-btm {
        border-bottom: 0
    }

    .wrapper .ui-border-top {
        background-position: left top;
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, #eccf88), to(#eccf88))
    }

    .wrapper .ui-border-btm {
        background-position: left bottom;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, #eccf88), to(#eccf88))
    }

    .wrapper .ui-border-top, .wrapper .ui-border-btm {
        background-repeat: repeat-x;
        background-size: 100% 1px
    }

    .wrapper .ui-border-tb {
        background: -webkit-gradient(linear, left bottom, left top, color-stop(.50, transparent), color-stop(.50, #eccf88), to(#eccf88)) left top repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #eccf88), to(#eccf88)) left bottom repeat-x;
        border-top: 0;
        border-bottom: 0
    }

    .wrapper .ui-border-tb {
        background-size: 100% 1px;
        -wekit-background-size: 100% 1px
    }
}

.mod-chest-cont {
    background: url(../image/open-bg-top.png) center top no-repeat, url(../image/open-bg-bottom.png) center bottom no-repeat;
    background-size: 276px auto;
    width: 276px;
    margin: 27px auto 118px;
    position: relative;
}

.mod-chest-cont:before {
    width: 100%;
    position: absolute;
    top: 12px;
    bottom: 80px;
    left: 0px;
    content: "";
    background: #fff;
    border-left: #e59c00 1px solid;
    border-right: #e59c00 1px solid;
    box-sizing: border-box;
}

.mod-chest-cont .content {
    position: relative;
    z-index: 2;
    padding: 13px;
}

.mod-chest-cont h3 {
    color: #865500;
    font-size: 15px;
}

.mod-chest {
    position: relative;
    width: 100%;
}

.mod-chest .chest-close {
    width: 320px;
    height: 135px;
    opacity: 0;
    position: relative;
    z-index: 1;
    position: absolute;
    left: 50%;
    top: 0px;
    margin-left: -160px;
}

.mod-chest .chest-close .gift {
    width: 320px;
    height: 135px;
    background: url(../image/chest.png) no-repeat 0px 0px;
    background-size: 320px auto;
    position: absolute;
    left: 0;
    top: 0px;
}

.mod-chest .chest-open {
    width: 320px;
    height: 150px;
    background: url(../image/chest.png) no-repeat 0px -137px;
    background-size: 320px auto;
    opacity: 0;
    position: relative;
    z-index: 1;
    position: absolute;
    left: 0px;
    top: 0px;
}

.mod-chest .chest-open .mod-chest-cont {
    position: absolute;
    bottom: -27px;
    left: 50%;
    margin-left: -138px;
}
/*show显示元素*/
.mod-chest .show {
    z-index: 2;
    opacity: 1;
}

.chest-icon-zuan {
    position: relative;
    width: 50px;
    overflow: visible;
    height: 0px;
    vertical-align: middle;
    display: inline-block;
}

.chest-icon-zuan:after {
    display: block;
    content: "";
    width: 75px;
    height: 50px;
    position: absolute;
    top: -30px;
    left: 0px;
    background: url(../image/chest-icon-zuan.png) 0px 0px no-repeat;
    background-size: 75px auto;
    left: -10px;
}

.icon-state-doing, .icon-state-finish, .icon-state-expired {
    display: block;
    width: 112px;
    height: 45px;
    background: url(../image/chest-state.png) 0px 0px no-repeat;
    background-size: 112px auto;
}

.icon-state-doing {
    background-position: 0px -45px;
}

.icon-state-expired {
    background-position: 0px -90px;
}

.icon-gift-xin, .icon-gift-zuan {
    position: relative;
    width: 15px;
    overflow: visible;
    height: 0px;
    vertical-align: middle;
    display: inline-block;
    margin: 0px 3px;
}

.icon-gift-xin:after, .icon-gift-zuan:after {
    display: block;
    content: "";
    width: 15px;
    height: 13px;
    position: absolute;
    top: -8px;
    left: 0px;
    background: url(../image/chest-icon-sprite.png) 0px 0px no-repeat;
    background-size: 100px auto;
}

.icon-gift-xin:after {
    background-position: -20px 0px;
}

.icon-dot {
    width: 6px;
    height: 6px;
    display: inline-block;
    overflow: hidden;
    background: #ff0000;
    border-radius: 6px;
}

.ui-round {
    -webkit-mask: url(../image/radius-mask.png) 0px 0px no-repeat;
    -webkit-mask-size: 100% auto;
}

.wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.open-body {
    width: 100%;
    overflow: hidden;
}

.open-body .bg {
    position: absolute;
    z-index: 1;
    background: url(../image/light.png) 0px 0px no-repeat;
    background-size: 452px auto;
    width: 452px;
    height: 510px;
    max-height: 100%;
    left: 50%;
    margin-left: -226px;
    top: -25px;
}

.open-body .bg.rotate {
    -webkit-animation: rotate 10s infinite linear;
}

.open-has {
    position: relative;
    z-index: 2;
    height: 450px;
    width: 320px;
    margin: 0px auto;
}

.open-has .title-close {
    opacity: 1;
    -webkit-transition: all .5s;
    width: 100%;
    text-align: center;
}

.open-has .title-open {
    opacity: 0;
    -webkit-transition: all .5s;
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
    width: 100%;
}

.open-has h3 {
    color: #865500;
    font-size: 15px;
    text-align: center;
    padding-top: 75px;
    padding-bottom: 33px;
}

.open-has h3 .user {
    color: #ff5400;
    margin: 0px 5px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
    position: relative;
    white-space: nowrap;
    vertical-align: top;
}

.open-has .title-close .user {
}

.mod-chest .chest-close .tips {
    width: 166px;
    height: 60px;
    background: url(../image/txt-tips-open.png) 0px 0px no-repeat;
    background-size: 190px auto;
    position: absolute;
    left: 70px;
    top: 145px;
    -webkit-transition: all .5s;
}

.mod-chest .chest-close .tips .arrow {
    width: 26px;
    height: 60px;
    background: url(../image/txt-tips-open.png) right 0px no-repeat;
    background-size: 190px auto;
    position: absolute;
    display: block;
    top: 0px;
    right: -28px;
    -webkit-animation: move .7s linear infinite alternate;
}

.mod-chest .chest-close:after {
    width: 320px;
    height: 300px;
    position: absolute;
    top: -100px;
    left: -61px;
    content: "";
    display: block;
}

.mod-chest .chest-close:active {
    -webkit-transform: scale(1.05);
    -webkit-transition: all .3s;
}
/*shake可以让宝箱摇晃*/
.mod-chest .chest-close.shake .gift {
    -webkit-animation: shake 1.2s linear;
    -webkit-animation-fill-mode: forwards;
}

.mod-chest .chest-close.shake .tips {
    opacity: 0;
}

.mod-chest .chest-open {
}

.mod-chest .chest-open.blur:after {
    width: 320px;
    height: 68px;
    background: url(../image/chest-open-blur.png) no-repeat 0px 0px;
    background-size: 320px auto;
    position: relative;
    z-index: 1;
    position: absolute;
    left: 0px;
    top: -5px;
    content: "";
    display: block;
}
/*opened能显示需要显示元素*/
.open-has.opened .title-open {
    opacity: 1;
}

.open-has.opened .title-close {
    opacity: 0;
}

/*.open-has.opened .mod-chest{-webkit-transform:translate(0px,150px);}*/
.open-has.opened .mod-chest .chest-open {
    -webkit-transform: translate(0px, 150px);
}

.open-has .mod-chest-cont {
    padding: 30px 0px 50px;
    text-align: center;
    overflow: hidden;
    opacity: 0;
    -webkit-transform: translate(0px, 30px); /*-webkit-transition:all .3s .3s;-webkit-transition:all .3s .3s cubic-bezier(.53,1.5,.69,1.81);*/
    z-index: 9;
    -webkit-animation-fill-mode: forwards;
}

.open-has .chest-open.show .mod-chest-cont {
    /*-webkit-transform:translate(0px,0px);opacity: 1;*/
    -webkit-animation: move2 .2s .0s linear;
    -webkit-animation-fill-mode: forwards;
}

.open-has .mod-chest-cont .gift {
    color: #ff6000;
    font-size: 24px;
    line-height: 30px;
    padding-bottom: 30px;
}

.open-has .mod-chest-cont .gift .icon {
    width: 58px;
    height: 0px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.open-has .mod-chest-cont .gift img {
    width: 75px;
    height: 50px;
    position: absolute;
    top: -28px;
    left: -5px;
}

.open-none {
    position: relative;
    z-index: 2;
    height: 450px;
    width: 320px;
    margin: 0px auto;
}

.open-none .mod-chest {
    height: 150px;
}

.open-none h3 {
    font-size: 15px;
    color: #865500;
    text-align: center;
    padding-top: 35px;
    padding-bottom: 40px;
}

.open-none .func {
    padding: 18px 35px 30px;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }

}

@-webkit-keyframes move {
    0% {
        -webkit-transform: translate(0px, 0px);
    }
    100% {
        -webkit-transform: translate(0px, -5px);
    }

}

@-webkit-keyframes move2 {
    0% {
        -webkit-transform: translate(0px, 30px);
        opacity: 0;
    }
    70% {
        -webkit-transform: translate(0px, -20px);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        opacity: 1;
    }

}

@-webkit-keyframes shake {
    0% {
        transform: scale(1);
        -webkit-transform: scale3d(1, 1, 1);

    }

    6% {
        -webkit-transform: scale(.9) rotate(-8deg);
        -webkit-transform: scale3d(1, 1, 1) rotate(0, 0, 1, -8deg);
    }

    18%, 30%, 42% {
        -webkit-transform: scale(1.1) rotate(8deg);
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 8deg);

    }

    12%, 24%, 36%, 48% {
        -webkit-transform: scale(1.1) rotate(-8deg);
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -8deg);

    }
    54% {
        -webkit-transform: scale(1);
        -webkit-transform: scale3d(1, 1, 1);
    }

    60% {
        -webkit-transform: scale(1);
        -webkit-transform: scale3d(1, 1, 1);
    }

    80% {
        -webkit-transform: scale(1) translate(0px, 150px);
        -webkit-transform: scale3d(1, 1, 1) translate3d(0px, 150px, 0);
    }
    90% {
        -webkit-transform: scale(1) translate(0px, 130px);
        -webkit-transform: scale3d(1, 1, 1) translate3d(0px, 130px, 0);
    }
    100% {
        -webkit-transform: scale(1) translate(0px, 150px);
        -webkit-transform: scale3d(1, 1, 1) translate3d(0px, 150px, 0);
    }

}

.chest-notice {
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    position: relative;
    color: #ff6000;
    padding-bottom: 10px;
}

.chest-notice input {
    position: relative;
    top: 3px;
}

效果：

点击宝箱

抖动，掉落

 

猜你喜欢

转载自www.cnblogs.com/zeussbook/p/9100967.html
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
SVN服务端安装在阿里云
实战 | 相机标定
webpack核心概念
note20——》只要肯低头吃苦，人生就会有救
PAT甲级 1062 Talent and Virtue （25 分）排序
NG Toolset开发笔记--5GNR Resource Grid（26）
如何对待上司
oracle命令
第9章 STL迭代器
logstash使用es映射模板
每日归档
更多
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022