为了获取客户、回馈客户，平台一般会推出抽奖活动类的营销页。因此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. go语言实现的目录共享程序

    其实程序很小,只不过是想写点东西了.后天晚上要回学校考试了,转眼已经出来了69天了,2个月多一点.工资加上老妈赞助的钱,不知道能不能买台电脑,作为程序员一直用着i3-3217u实在难受.回去找同学拷点 ...

  2. （转）使用Migrations更新数据库结构（Code First ）

    原文地址:http://blog.csdn.net/luoyeyu1989/article/details/8275237 背景 code first起初当修改model后,要持久化至数据库中时,总要 ...

  3. ExtJs 4.2 treePanel 点击树节点 传送参数到后台（多个参数）

    //***********************************************左边树开始********************************************** ...

  4. visio

    为您的产品密钥: 7DNWX-MRX4G-QCGX2-DG6BP-DC8RP   http://technet.microsoft.com/zh-cn/evalcenter/hh973399.aspx ...

  5. JAVA多线程synchronized详解

    Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 当两个并发线程访问同一个对象object中的这个synchronized(this)同 ...

  6. ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-12/175.html --------------- ...

  7. asp.net中@ Import 命令的使用

    @ Import  将命名空间显式导入到 ASP.NET 应用程序文件(如网页.用户控件.母版页或 Global.asax 文件)中,同时使导入的命名空间的所有类和接口可用于文件.导入的命名空间可以是 ...

  8. [转载]VS2012创建MVC3项目提示错误: 此模板尝试加载组件程序集 “NuGet.VisualStudio.Interop, Version=1.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a”。

    如果在没有安装vs2012 update3升级包的情况下,创建MVC3项目会出现下面的错误信息. 因为VS2012已经全面切换到使用NuGet这个第三方开源工具来管理项目包和引用模块了,使用VS201 ...

  9. 团体程序设计天梯赛-练习集L2-001. 紧急救援（dijkstra）

    L2-001. 紧急救援 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 作为一个城市的应急救援队伍的负责人,你有一张特殊的全国 ...

  10. uva 10730

    题意:如果数列中没有三个元素的子序列构成等差数列输出yes 不然no 标记每个数出现的位置  然后从0开始寻找三个元素的等差数列  如果这三个元素的位置满足条件则原数列中存在等差数列 #include ...