为了获取客户、回馈客户,平台一般会推出抽奖活动类的营销页。因此web页面中,有各式各样的抽奖效果。

  格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转盘),游戏式(砸蛋/拼图...)......

  这里来讲解下转盘抽奖效果。

  当用户进入这个抽奖页面时,一般会“华丽”的设计所吸引,虽然明知中奖几率几乎等于0,图个运气,都会去点“开始抽奖”,于是“折腾”开始了。

  你还没有登录,请登录后再来

  你还没有抽奖资格,请做做“什么”后再来

  你的抽奖机会用完了,请明天再来

  很抱歉,你没有中奖

  。。。

  来看下效果:

 

  在BKY预览效果无语了,弹出插件都不弹出了。

  实际是这样的:

  

  贴上代码,仅供参考: 

  页面代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<title>旋转-转盘-抽奖</title> <style type="text/css">
*{margin: 0; padding: 0;}
#ww_page{ overflow:hidden; width:100%;}
#ww_rotate{position: relative; margin: 0 auto; width:640px; height:640px; }
#ww_plate{position:absolute; top:0; left:0;width:640px; height:640px; background:url(http://i13.tietuku.com/416f769edc909de0.png) center no-repeat;background-size: 100% 100%; transition: none;}
#ww_arrow{position:absolute; top:205px; left:50%; z-index: 10;margin-left: -75px;width:150px;height:190px; background:url(http://i13.tietuku.com/0e0b1c875d346f4d.png) center no-repeat; }
</style> </head>
<body> <div id="ww_page">
<div id="ww_box">
<div id="ww_rotate">
<div id="ww_plate"></div>
<div id="ww_arrow"></div>
</div>
</div>
</div> <link rel="stylesheet" type="text/css" href="js/Tips/mTips.css" />
<script type="text/javascript" src="js/Tips/mTips.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="mRotate.js"></script> <script type="text/javascript">
//缩放
scalePage('#ww_box'); // 奖品数据
var prizeData = [
{
id: 1,
prize: "一等奖",
angle: 3600
}, {
id: 2,
prize: "二等奖",
angle: 3720
}, {
id: 3,
prize: "三等奖",
angle: 3840
}, {
id: 4,
prize: "再接再厉",
angle: 3750
}, {
id: 5,
prize: "要加油哦",
angle: 3865
}, {
id: 6,
prize: "谢谢参与",
angle: 3930
}
]; //旋转
var arrow = document.getElementById('ww_arrow'),
plate = document.getElementById('ww_plate'),
isRotate = false;
arrow.onclick = function() {
if (isRotate) return;
isRotate = true; var num = (Math.random() * prizeData.length) >> 0,
data = prizeData[num]; // console.log(num);
// console.time('计时');
new Rotate({
el: plate,
//angle: 90,
animateTo: data.angle,
duration: 5000,
easeing: 'easeInOutCirc',
end: function() {
// console.timeEnd('计时');
isRotate = false;
Tips.alert(data.prize);
}
});
};
</script> </body>
</html>

 旋转主程序mRotate.js

/**
* LBS Rotate
* Date: 2014-12-20
* ==================================
* opts.el 旋转对象(一个字符串的CSS选择器或者元素对象)
* opts.angle 初始角度 默认0
* opts.animateTo 目标角度
* opts.duration 持续时间 默认1000(毫秒)
* opts.easing 动画效果 (easeOutSine默认 easeInOutSine easeInOutCirc)
* opts.end 旋转完成 执行函数
* ==================================
**/
var Rotate = function(opts) {
opts = opts || {};
if (typeof opts.el === undefined) return;
this.el = typeof opts.el === 'string' ? document.querySelector(opts.el) : opts.el;
this.angle = opts.angle || 0;
this.animateTo = opts.animateTo || this.angle + 360;
this.duration = opts.duration || 1000;
this.easing = (opts.easing && this.tween[opts.easing]) || this.tween.easeOutSine;
this.end = opts.end || function() {};
this.animated = false;
this.init();
};
Rotate.prototype = {
init: function() {
this.rotate(this.angle);
this.start();
},
start: function() {
this.animate();
},
animate: function() {
if (this.animated) return;
var start = this.angle,
end = this.animateTo,
change = end - start,
duration = this.duration,
startTime = +new Date(),
ease = this.easing,
_this = this;
if (start == end) {
this.end && this.end();
return;
}
this.animated = true;
! function animate() {
var nowTime = +new Date(),
timestamp = nowTime - startTime,
delta = ease(timestamp / duration);
_this.rotate(start + delta * change);
if (duration <= timestamp) {
_this.rotate(end);
_this.animated = false;
_this.end && _this.end();
} else {
setTimeout(animate, 17);
}
}();
},
rotate: function(angle) {
this.setTransform(angle % 360);
},
setTransform: function(v) {
v = v || 0;
this.setStyle(this.el, 'transform', 'rotate(' + v + 'deg)');
},
setStyle: function(el, p, v) {
!this.cache && (this.cache = {});
!this.cache[el] && (this.cache[el] = {});
!this.cache[el][p] && (this.cache[el][p] = this.prefix(p));
el.style[this.cache[el][p] || this.prefix(p)] = v;
},
prefix: function(p) {
var style = document.createElement('div').style;
if (p in style) return p;
var prefix = ['webkit', 'Moz', 'ms', 'O'],
i = 0,
l = prefix.length,
s = '';
for (; i < l; i++) {
s = prefix[i] + '-' + p;
s = s.replace(/-\D/g, function(match) {
return match.charAt(1).toUpperCase();
});
if (s in style) return s;
}
},
tween: {
easeOutSine: function(pos) {
return Math.sin(pos * (Math.PI / 2));
},
easeInOutSine: function(pos) {
return (-.5 * (Math.cos(Math.PI * pos) - 1));
},
easeInOutCirc: function(pos) {
if ((pos /= 0.5) < 1) return -0.5 * (Math.sqrt(1 - pos * pos) - 1);
return 0.5 * (Math.sqrt(1 - (pos -= 2) * pos) + 1);
}
}
};

   很简单的代码,就是一个动画函数,改变元素的旋转rotate属性。

  CSS3 transform 属性:http://www.w3school.com.cn/cssref/pr_transform.asp

  动画函数如下,获得元素的初始角度(起点),目标角度(终点),要多久(持续的时间),动画效果(缓动公式)

animate: function() {
if (this.animated) return;
var start = this.angle, //起点
end = this.animateTo, //目的地
change = end - start, //距离
duration = this.duration, //持续时间
startTime = +new Date(),
ease = this.easing, //运动效果
_this = this;
if (start == end) {
this.end && this.end();
return;
}
this.animated = true;
!function animate() {
var nowTime = +new Date(),
timestamp = nowTime - startTime,
delta = ease(timestamp / duration);
_this.rotate(start + delta * change);
if (duration <= timestamp) {
_this.rotate(end);
_this.animated = false;
_this.end && _this.end();
} else {
setTimeout(animate, 17);
}
}();
}

  设置旋转属性

rotate: function(angle) {
this.setTransform(angle % 360);
},
setTransform: function(v) {
v = v || 0;
this.setStyle(this.el, 'transform', 'rotate(' + v + 'deg)');
},
setStyle: function(el, p, v) {
!this.cache && (this.cache = {});
!this.cache[el] && (this.cache[el] = {});
!this.cache[el][p] && (this.cache[el][p] = this.prefix(p));
el.style[this.cache[el][p] || this.prefix(p)] = v;
},
prefix: function(p) {
var style = document.createElement('div').style;
if (p in style) return p;
var prefix = ['webkit', 'Moz', 'ms', 'O'],
i = 0,
l = prefix.length,
s = '';
for (; i < l; i++) {
s = prefix[i] + '-' + p;
s = s.replace(/-\D/g, function(match) {
return match.charAt(1).toUpperCase();
});
if (s in style) return s;
}
}

  实际抽奖流程:点击抽奖按钮,发送ajax,得到一个结果数据,执行抽奖程序,显示结果。

  了解动画函数,结合缓动公式,是做出各种炫酷的效果的基础。

web旋转式的更多相关文章

  1. web:转盘抽奖

    移动web:转盘抽奖(幸运大转盘)   为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转 ...

  2. 移动web:转盘抽奖(幸运大转盘)

    为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转盘),游戏式(砸蛋/拼图...).... ...

  3. C# Web应用调试开启外部访问

    在用C#开发Web应用时有个痛点,就是本机用VS开启Web应用调试时外部机器无法访问此Web应用.这里将会介绍如何通过设置允许局域网和外网机器访问本机的Web应用. 目录 1. 设置内网访问 2. 设 ...

  4. 网页提交中文到WEB容器的经历了些什么过程....

    先准备一个网页 <html><meta http-equiv="Content-Type" content="text/html; charset=gb ...

  5. 闲来无聊,研究一下Web服务器 的源程序

    web服务器是如何工作的 1989年的夏天,蒂姆.博纳斯-李开发了世界上第一个web服务器和web客户机.这个浏览器程序是一个简单的电话号码查询软件.最初的web服务器程序就是一个利用浏览器和web服 ...

  6. java: web应用中不经意的内存泄露

    前面有一篇讲解如何在spring mvc web应用中一启动就执行某些逻辑,今天无意发现如果使用不当,很容易引起内存泄露,测试代码如下: 1.定义一个类App package com.cnblogs. ...

  7. 对抗密码破解 —— Web 前端慢 Hash

    (更新:https://www.cnblogs.com/index-html/p/frontend_kdf.html ) 0x00 前言 天下武功,唯快不破.但在密码学中则不同.算法越快,越容易破. ...

  8. 使用 Nodejs 搭建简单的Web服务器

    使用Nodejs搭建Web服务器是学习Node.js比较全面的入门教程,因为要完成一个简单的Web服务器,你需要学习Nodejs中几个比较重要的模块,比如:http协议模块.文件系统.url解析模块. ...

  9. 一步步开发自己的博客 .NET版(11、Web.config文件的读取和修改)

    Web.config的读取 对于Web.config的读取大家都很属性了.平时我们用得比较多的就是appSettings节点下配置.如: 我们对应的代码是: = ConfigurationManage ...

随机推荐

  1. 自定义UICollectionViewLayout并添加UIDynamic - scorpiozj(转)

    转载自:http://www.tuicool.com/articles/jM77Vf     自定义UICollectionViewLayout并添加UIDynamic UICollectionVie ...

  2. 【BZOJ 3172】 [Tjoi2013]单词

    Description 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想知道每个单词分别在论文中出现多少次. Input 第一个一个整数N,表示有多少个单词,接下来N ...

  3. 分布式日志收集系统--Chukwa

    1. 安装部署 1.1 环境要求 1.使用的JDK的版本必须是1.6或者更高版本,本实例中使用的是JDK1.6 2.使用的hadoop的版本必须是Hadoop0.20.205.1及以上版本,本实例中使 ...

  4. 读书笔记 (一) ———Fundamentals of Multiagent Systems with NetLogo Examples by Prof. Jose M Vidal

    在网上发现Prof. Jose M Vidal用NetLogo仿真Multi-agent system的视频,随后下载他的著作Fundamentals of Multiagent Systems wi ...

  5. Unity3d大会的部分总结

    原地址:http://blog.csdn.net/sgnyyy/article/details/23775219 一.项目开发,管理和发布策略 1.       四大准则 a.       美术的资源 ...

  6. Linux bash shell脚本语法入门

    1.基础 #!/bin/bash   //bash脚本第一句都是这个,他会让系统指定以bash来解释这个脚本 #                 //shell脚本注释符号 2.变量和使用 HOME= ...

  7. Tornado,展示一下模板渲染

    按网上一步一步走一下. 感觉模板和DJANGO的差不多,但更灵活,不限制PYTHON的使用. 前端和后端,这模板使用的规则在哪里呢? import os.path import tornado.htt ...

  8. MVC 文件上传和图片剪辑

    http://www.cnblogs.com/hinton/archive/2012/03/01/2375465.html http://gallery.kissyui.com/uploader/1. ...

  9. EASYUI Dialog的基本使用

    1.基本使用 代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server&q ...

  10. UIcollectionView的使用(首页的搭建1)

    今天做一个首页的效果:  首页是用UICollectionView做的.下面我来结合首页的效果介绍一下: 一.创建基类继承自UIViewController 01 创建基类继承自UIViewContr ...