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-640px;
   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{
   285px;
   margin:0 auto;
    
}
#tmp{
   100%;
   height:60px;
}
 
 
.main{
   margin:0 auto;
    
    
}
.main .pointer{
   margin-left: auto;
   margin-right: auto;
   margin-top: -16px;
    285px;
   height: 42px;
   background: url(../image/1.png) no-repeat;
   background-size: 100% 100%;
   z-index: 999;
   position: absolute;
}
.main .cj-bg{
   height:283px;
   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{
   100%;
   height:100px;
}
.main .cj-bg .start{
   height:79px;
   79px;
   margin-left: auto;
   margin-right: auto;
   background: url(../image/2.png) no-repeat;
   background-size:100% 100%;
}
.main .cj-bg .start{
   height:79px;
   79px;
   margin-left: auto;
   margin-right: auto;
   background: url(../image/2.png) no-repeat;
   background-size:100% 100%;
}
.main  .start{
   height: 79px;
    79px;
   margin-left: 105px;
   background: url(../image/2.png) no-repeat;
   background-size: 100% 100%;
   margin-top: -180px;
   z-index: 100;
   position: absolute;
}
.date{
    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;
     100%;
    height: 100%;
    overflow: hidden;
    background-color: #f2f2f2;
}

body {
    max- 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- 100%;
    height: auto;
     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;
     100%;
    height: 175px;
    overflow: hidden;
}

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

#slider li {
     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 {
     100%;
}

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

#arrow li {
     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);
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zeussbook/p/9101205.html