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);

转载于:https://www.cnblogs.com/zeussbook/p/9101205.html

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值