3.练习3：抽奖大转盘

注意事项：需要使用Zepto.js，区别于zepto.min.js

实现效果：转盘转动抽奖

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 href="css/train3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="body">
    <div id="tmp"></div>
    <div class="main">
        <div class="pointer"></div>
        <div class="cj-bg" style="-webkit-transform: rotate(3680deg);"></div>
        <div class="start"></div>
    </div>
    <div class="date">
        <p>活动日期 即日起-8月30日</p>
    </div>
</div>
<!--<script src="js/zepto.min.js" type="text/javascript"></script>-->
<script src="js/zepto.js" type="text/javascript"></script>
<script>
    $(function () {
        var _deg = 0;
        $(".start").on("tap", function () {
            _deg = _deg + 920;
            $(".cj-bg").css("-webkit-transform", "rotate(" + _deg + "deg)");
            $(".cj-bg").css("-moz-transform", "rotate(" + _deg + "deg)");
            $(".cj-bg").css("-o-transform", "rotate(" + _deg + "deg)");
            $(".cj-bg").css("transform", "rotate(" + _deg + "deg)");
        })
    });
</script>

css

body{
   margin:0 auto;
   padding:0;

   background-size:100% 100%;
   max-width:640px;
   width:100%;

}
p{
   margin:0;
   padding:0;
}
a:link { text-decoration: none;color:black;}
a:active { text-decoration:none;color:black;}
a:hover { text-decoration:none;color:black;} 
a:visited { text-decoration: none;color:black;}
#body{
   width:285px;
   margin:0 auto;

}
#tmp{
   width:100%;
   height:60px;
}

.main{
   margin:0 auto;

}
.main .pointer{
   margin-left: auto;
   margin-right: auto;
   margin-top: -16px;
   width: 285px;
   height: 42px;
   background: url(../image/1.png) no-repeat;
   background-size: 100% 100%;
   z-index: 999;
   position: absolute;
}
.main .cj-bg{
   height:283px;
   width:283px;
   background: url(../image/3.png) no-repeat;
   background-size:100% 100%;
}
.main .cj-bg{
   -webkit-transition: -webkit-transform 2000ms;
   -webkit-transform: rotate(0deg);
   -moz-transition:-moz-transform 2000ms;
   -moz-transform: rotate(0deg);
   /*transition:transition 2000ms;
   transform:rotate(0deg);*/
}
.main .open{
   -webkit-transform: rotate(980deg);
}
.main .cj-bg .tmp{
   width:100%;
   height:100px;
}
.main .cj-bg .start{
   height:79px;
   width:79px;
   margin-left: auto;
   margin-right: auto;
   background: url(../image/2.png) no-repeat;
   background-size:100% 100%;
}
.main .cj-bg .start{
   height:79px;
   width:79px;
   margin-left: auto;
   margin-right: auto;
   background: url(../image/2.png) no-repeat;
   background-size:100% 100%;
}
.main  .start{
   height: 79px;
   width: 79px;
   margin-left: 105px;
   background: url(../image/2.png) no-repeat;
   background-size: 100% 100%;
   margin-top: -180px;
   z-index: 100;
   position: absolute;
}
.date{
   width: 100%;
   margin-top: 26px;
   margin-bottom: 30px;
}
.date p{
   text-align:center;
   color:white;
   font-weight: bold;
}

 4.练习4：移动触摸幻灯片

html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="css/train4.css">
    <title>移动端触摸滑动幻灯</title>
</head>
<body>
<!--slider-->
<div id="slider-box">
    <ul id="slider">
        <li><img src="img/1.jpg" alt="" /></li>
        <li><img src="img/2.jpg" alt="" /></li>
        <li><img src="img/3.jpg" alt="" /></li>
    </ul>
</div>

<!--js-->
<script src="js/zepto.min.js"></script>
<script src="js/zepto.touchSlider.js"></script>
<script>
    $(function(){
//    $('#slider-box').touchSlider();
        $('#slider-box').touchSlider({
            box: '#slider-box',
            arrow: false,
            auto: true,
            autoTime: 2000
        });
    });
</script>
</body>
</html>

css

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f2f2f2;
}

body {
    max-width: 640px;
    margin: 0 auto;
    box-shadow: 0 0 160px 0 #999;
    position: relative;
    font: .85em/1.4 "微软雅黑", "Microsoft Yahei", 'Arial', 'san-serif';
    color: #666;
}

img {
    max-width: 100%;
    height: auto;
    width: auto;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
}

ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

p {
    padding: 0 20px;
}

/*slider*/
#slider-box {
    position: relative;
    width: 100%;
    height: 175px;
    overflow: hidden;
}

#slider {
    height: 100%;
    overflow: hidden;
    *zoom: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

#slider li {
    width: 100%;
    height: 100%;
    float: left;
    display: none;
}

#slider li.active {
    display: block;
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

#slider li img {
    width: 100%;
}

#arrow {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

#arrow li {
    width: 12px;
    height: 12px;
    float: left;
    display: inline-block;
    margin: 0 3px;
    background-color: #d5dbd6;
    border-radius: 50%;
    -webkit-border-radius: 50%;
}

#arrow li.active {
    background-color: #c95122;
}

@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: translateX(0%) skewX(-15deg);
        transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        -ms-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        -ms-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: translateX(0%) skewX(-15deg);
        -ms-transform: translateX(0%) skewX(-15deg);
        transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(0%) skewX(0deg);
        -ms-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

js:zepto.touchSlider.js

/**
* zepto touchSlider - 移动端触摸滑动幻灯插件
* @version 1.0.0
* @author haibao <hhb219@163.com> <http://smwell.sinaapp.com/>
*/
;(function($) {    
   var a=0,b,n,s,s2;
   methods = {
        init: function (options) {
               return this.each(function() {
            var $this = $(this), opt = $this.data('touchSlider');
                if(typeof(opt) == 'undefined') {
                   var defaults = {
                      box: '#slider-box',
                      arrows: true,
                      auto: false,
                      autoTime: 2000
                   };
               opt = $.extend({}, defaults, options);
               $this.data('touchSlider', opt);
                }
                opt = $.extend({}, opt, options);

                //生成按钮
                n = $(this).find('ul').eq(0).find('li').length;
                if(n > 1){
               b = '<ul id="arrow">';
               for (var i=0; i<n; i++){
                  if(i == a){
                     $(this).find('li').eq(0).addClass('active');
                     b += '<li class="active"></li>';
                  }else{
                     b += '<li></li>';  
                  }
               }
               b += '</ul>';
               if(opt.arrows == true){
                  $(this).append(b);
               }else{
                  $(this).append(b).find('#arrow').hide();
               }
            }

                //自动播放
            if(opt.auto == true){ 
               methods.a(opt);
            }

                //按钮点击事件
            $(this).find('#arrow li').click(function(){
               methods.c(opt);
               a = $(this).index();
               methods.r(opt);
            });

            //左右滑动事件，也可以换成上下滑动
            $(this).swipeLeft(function(){
               methods.c(opt);
               methods.n(opt);
            }).swipeRight(function(){
               methods.c(opt);
               methods.p(opt);
            });
         });
        },
        n: function (o) {
           a = $('#arrow li.active').index() + 1;
         if(a >= $(o.box).find('ul').eq(0).find('li').length){ a = 0; }
         methods.r(o);
        },
        p: function (o) {
           a = $('#arrow li.active').index() - 1;
         if(a < 0){ a = $(o.box).find('ul').eq(0).find('li').length - 1; }
         methods.r(o);
        },
        r: function (o) {
           $(o.box).find('ul').eq(0).find('li').removeClass('active').eq(a).addClass('active');
         $(o.box).find('ul').eq(1).find('li').removeClass('active').eq(a).addClass('active');
        },
        a: function (o) {
           s = setInterval(function(){ methods.n(o); },o.autoTime);
        },
        c: function (o) {
           clearInterval(s);
         clearTimeout(s2);
         if(o.auto == true){
            s2 = setTimeout(function(){ methods.a(o); },o.autoTime);
         }
        }
    };

   $.fn.touchSlider = function (method) {
      if(methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        }else if(typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        }else {
            $.error('Error! Method' + method + 'does not exist on zepto.touchSlider！');
        }
   };
})(Zepto);

Web前端框架与移动应用开发第七章：二的更多相关文章

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

    1.练习1:焦点图切换 html: <!doctype html><html><head> <meta charset="utf-8" / ...

  2. Web前端框架与移动应用开发第八章

    Web前端框架与移动应用开发:制作58招聘专题页 1.html代码: <!DOCTYPE html><html><head> <meta charset=&q ...

  3. React 还是 Vue: 你应该选择哪一个Web前端框架？

    学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西 ...

  4. 最受Web前端开发者欢迎的五大开发工具

    工其事,必利于器.好的开发工具毋容置疑会帮助Web前端开发者事半功倍,51CTO在上期主办的技术沙龙<大型网站PHP开发之道> 对现场的百余位Web开发者做了问卷调查,后经51CTO调研小 ...

  5. Web前端框架学习成本比较及学习方法

    就项目中自己用过的前端框架的学习成本比较与学习心得分享 刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理 ...

  6. 国内5款优秀的WEB前端框架

    1. JX(腾讯) 官网地址:http://alloyteam.github.io/JX/#home JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 ...

  7. Web前端框架与类库

    Web前端框架与类库的思考 说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此 ...

  8. Web前端框架与类库的思考

    说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技 ...

  9. Web前端框架汇总

    在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...

随机推荐

  1. Codeforces551 C. GukiZ hates Boxes

    二分答案 + 贪心 传送门:$>here<$ $Solution$ 二分时间+贪心验证.思维难度主要在验证上,然而坑人的点却在n的取值上.那么先来谈如何验证.在已知时间的条件下,能否用一种 ...

  2. Matplotlib学习---用matplotlib画直方图/密度图（histogram, density plot）

    直方图用于展示数据的分布情况,x轴是一个连续变量,y轴是该变量的频次. 下面利用Nathan Yau所著的<鲜活的数据:数据可视化指南>一书中的数据,学习画图. 数据地址:http://d ...

  3. jemter的使用

    1.启动jmeter

  4. 【XSY2707】snow 线段树 并查集

    题目描述 有\(n\)个人和一条长度为\(t\)的线段,每个人还有一个工作范围(是一个区间).最开始整条线段都是白的.定义每个人的工作长度是这个人的工作范围中白色部分的长度(会随着线段改变而改变).每 ...

  5. 【BZOJ3522】【BZOJ4543】【POI2014】Hotel 树形DP 长链剖分 启发式合并

    题目大意 ​ 给你一棵树,求有多少个组点满足\(x\neq y,x\neq z,y\neq z,dist_{x,y}=dist_{x,z}=dist_{y,z}\) ​ \(1\leq n\leq 1 ...

  6. Windows10 + Visual Studio 2017环境为C++工程安装使用ZMQ

    因为需要用 C++ 实现联机对战的功能,但是不想直接用 winsock ,因此选了ZMQ 框架(不知道合不合适).安装的过程还是挺艰辛的.但是也学到了些东西,记录一下.另外,Zmq 的作者 Piete ...

  7. python学习日记(文件操作)

    文件操作概述 计算机系统分为:操作系统,计算机硬件,应用程序. 我们用python或其他语言编写的应用程序若想要把数据永久保存下来,必须要保存于硬盘中,这就涉及到应用程序要操作硬件,众所周知,应用程序 ...

  8. JavaWeb项目：在线评测系统

    此项目为本人的Java大作业. 项目文件和相关资源已上传到本人的GitHub 一.项目概况 1.1设计内容 一个在线评测系统,分用户和管理员两种身份.用户能够通过注册登录,参加比赛,最后实时得到比赛结 ...

  9. selenium js

    这几天的任务量比较大,还有一个挺棘手的网站cfda,不巧的是数据量还挺大,40W关于企业信息.上来就是debugger pause,调试中断,开始还是挺懵逼的,但这个还算简单毕竟google,百度,就 ...

  10. 定时自动从FTP服务器取数据脚本

    环境需求:某些情况下经常需要向FTP服务器取文件,可以用定时任务执行简单脚本自动去取相应文件. 一般用法: ~]# ftp  IP地址  端口 //ftp命令可以通过yum install ftp方式 ...