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 ...

随机推荐

洛谷P1983车站分级题解
题目这个题非常毒瘤,只要还是体现在其思维难度上,因为要停留的车站的等级一定要大于不停留的车站的等级,因此我们可以从不停留的车站向停留的车站进行连边,然后从入度为0的点即不停留的点全都入队,然后拓扑排 ...
Hdoj 1392.Surround the Trees 题解
Problem Description There are a lot of trees in an area. A peasant wants to buy a rope to surround a ...
Poj 1659.Frogs' Neighborhood 题解
Description 未名湖附近共有N个大小湖泊L1, L2, ..., Ln(其中包括未名湖),每个湖泊Li里住着一只青蛙Fi(1 ≤ i ≤ N).如果湖泊Li和Lj之间有水路相连,则青蛙Fi和 ...
【BZOJ2324】[ZJOI2011]营救皮卡丘（网络流，费用流）
[BZOJ2324][ZJOI2011]营救皮卡丘(网络流,费用流) 题面 BZOJ 洛谷题解如果考虑每个人走的路径,就会很麻烦. 转过来考虑每个人破坏的点集,这样子每个人可以得到一个上升的序列. ...
AXURE 8弄一个轮播图的步骤
这个图是网上找到,7.0可以使用. 如果是8.0.没有找到"动态面板"这个地方,如下图所示
Shiro中的Rememberme后出现浏览器500错误
问题详述:在Shiro中添加Remember me功能后,只要勾选Remember me选项为true的时候,浏览器就会跳转到一个不可达页面,并且在Chrome中显示HTTP 500错误. 问题追踪: ...
编写高质量代码:改善Java程序的151个建议 --[65~78]
编写高质量代码:改善Java程序的151个建议 --[65~78] 原始类型数组不能作为asList的输入参数,否则会引起程序逻辑混乱. public class Client65 { public ...
js定时器setInterval()与setTimeout()
js定时器setInterval()与setTimeout() 1.setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setT ...
poj2083 Fractal
我一开始的想法是间断性的输出空格和solve(k-1) 但是发现问题很大. 雨菲:可以用一个数组保存啊我:那不爆了? 雨菲:不会爆. 我一算:729 × 729,还真没爆. 然后就直接WA了.... ...
浅谈CSRF（Cross-site request forgery）跨站请求伪造（写的非常好）
一 CSRF是什么 CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常缩写为CSRF或者X ...

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

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

随机推荐

热门专题