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

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前端框架与移动应用开发第七章：二的更多相关文章

Web前端框架与移动应用开发第七章
1.练习1:焦点图切换 html: <!doctype html><html><head> <meta charset="utf-8" / ...
Web前端框架与移动应用开发第八章
Web前端框架与移动应用开发:制作58招聘专题页 1.html代码: <!DOCTYPE html><html><head> <meta charset=&q ...
React 还是 Vue: 你应该选择哪一个Web前端框架？
学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue 如果你喜欢简单和“能用就行”的东西 ...
最受Web前端开发者欢迎的五大开发工具
工其事,必利于器.好的开发工具毋容置疑会帮助Web前端开发者事半功倍,51CTO在上期主办的技术沙龙<大型网站PHP开发之道> 对现场的百余位Web开发者做了问卷调查,后经51CTO调研小 ...
Web前端框架学习成本比较及学习方法
就项目中自己用过的前端框架的学习成本比较与学习心得分享刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理 ...
国内5款优秀的WEB前端框架
1. JX(腾讯) 官网地址:http://alloyteam.github.io/JX/#home JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 ...
Web前端框架与类库
Web前端框架与类库的思考说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此 ...
Web前端框架与类库的思考
说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技 ...
Web前端框架汇总
在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...

随机推荐

LOJ#2019. 「AHOI / HNOI2017」影魔
题意: 在一个序列中如果有一个子区间它有一个端点是区间最大值另一个端点不是这个区间的次大值就会有p2的贡献它两个端点分别是最大值次大值就会有p1的贡献我们发现这两个条件有一个重合的部分 ...
android startActivityForResult 使用实例
ActivityForResult.java public class ActivityForResult extends Activity { Button bn; EditText city; @ ...
洛谷【P2257】YY的GCD
YY的GCD 原题链接这应该是我做的第一道莫比乌斯反演的题目. 题目描述神犇YY虐完数论后给傻×kAc出了一题给定N, M,求1<=x<=N, 1<=y<=M且gcd(x ...
One-hot encoding 独热编码
http://blog.sina.com.cn/s/blog_5252f6ca0102uy47.html
cf351B Jeff and Furik (树状数组)
逆序对数=0的时候,这个数列是有序的然后交换相邻的,看哪个比较大,逆序对数会加1或减1 Jeff用的是最优策略所以他肯定让逆序对数-1 设f[i]表示Jeff操作前,逆序对数为i,最终的期望次数那 ...
centos7修改默认网卡名称
问题场景: 使用centos7有好一阵子了,安装过centos7的朋友都会发现网卡命名跟6.x系统的不一样,类似ifcfg-eno16780032, ens192,或者enp2s0等其他不习惯的.不容 ...
linux(fedora) 第三课
树形打印所有进程名:pstree pstree | grep pstree -A2 -B2(查看pstree前后两行) NI的值[-20,20) nice(改变NI的值):改变程序优先级 nice - ...
Spring 整合 Hibernate 时启用二级缓存实例详解
写在前面: 1. 本例使用 Hibernate3 + Spring3: 2. 本例的查询使用了 HibernateTemplate: 1. 导入 ehcache-x.x.x.jar 包: 2. 在 a ...
Docker普通用户不使用sudo提权
解决方法 sudo groupadd docker 添加Docker用户组 sudo gpasswd -a ${USER} docker 添加你的用户到Docker用户组 reboot 重启系统.也可 ...
洛谷P4219 大融合
LCT新姿势:维护子树信息. 不能带修,子树修改就要toptree了... 题意:动态加边,求子树大小. 解: 维护子树信息只要额外维护虚边连的儿子的信息即可.这里把siz的定义变成子树大小. 哪里会 ...

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

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

随机推荐

热门专题