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. new Date()导致日期增加了一天

    问题是:将字符串 "Sun Nov 12 14:00:00 CST 2017"  转成Date类型 有一个简单的方法是直接使用new Date(),但是这个方法对于某些日期的计算, ...

  2. Hdoj 1233.还是畅通工程 题解

    Problem Description 某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府"畅通工程"的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直 ...

  3. Android 可展开列表组件 ExpandableListView

    ExpandableListView 是ListView的子类,它把应用中的列表项分为几组,每组里可包含多个列表项. 所显示的列表项应该由ExpandableListAdapter 接口提供,实现Ex ...

  4. [复习]动态dp

    [复习]动态dp 你还是可以认为我原来写的动态dp就是在扯蛋. [Luogu4719][模板]动态dp 首先作为一个\(dp\)题,我们显然可以每次修改之后都进行暴力\(dp\),设\(f[i][0/ ...

  5. pip 安装第三方包提示Unknown or unsupported command 'install'

    Unknown or unsupported command 'install' Unknown or unsupported command 'show' Unknown or unsupporte ...

  6. Speech语音播报

    System.Speech 这个命名空间,报可以阅读文字和播放音频. 环境  W10 VS2017 CMMT 1.添加程序集引用 System.Speech 2.实例化播音类,并且播放一个文本 Spe ...

  7. [CQOI2017]老C的方块

    题目描述 https://www.lydsy.com/JudgeOnline/problem.php?id=4823 题解 观察那四种条件 有没有什么特点? 我们可以把蓝线两边的部分看做两个区域,这样 ...

  8. 自动驾驶技术之——无人驾驶中的CAN总线

    CAN总线在整个无人驾驶系统中有着十分重要的作用.除了在VCU信号需要通过CAN总线进行传输外,无人车上的某些传感器(如雷达.Mobileye)的信号传递也是通过CAN实现的. 前言 本文主要内容是— ...

  9. 洛谷P2414 阿狸的打字机

    题意:以trie的形式给出n个字符串,每次询问第x个字符串在第y个字符串中出现了几次. 解:总串长是n2级别的,所以不能用什么后缀自动机... [update]可以建triesam但是不知道trie上 ...

  10. A1088. Rational Arithmetic

    For two rational numbers, your task is to implement the basic arithmetics, that is, to calculate the ...