欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

<abbr id="whp4q"><button id="whp4q"></button></abbr>
    <mark id="whp4q"><thead id="whp4q"></thead></mark>

    javascript圓盤(pán)抽獎(jiǎng)程序?qū)崿F(xiàn)原理和完整代碼例子

     更新時(shí)間:2014年06月03日 09:49:01   作者:  
    這篇文章主要介紹了javascript圓盤(pán)抽獎(jiǎng)程序?qū)崿F(xiàn)原理和完整代碼例子,需要的朋友可以參考下

    效果預(yù)覽:


    一、模擬抽獎(jiǎng)的實(shí)現(xiàn)過(guò)程

    旋轉(zhuǎn)原理:當(dāng)支持CSS3屬性采用transform: rotate(角度deg)設(shè)置,當(dāng)角度為正數(shù)時(shí)順時(shí)針旋轉(zhuǎn),當(dāng)為負(fù)數(shù)時(shí)逆時(shí)針旋轉(zhuǎn)。如果是IE8及其以下,采用采用絕對(duì)定位設(shè)置top和left,模擬角度旋轉(zhuǎn)。

    run方法,參數(shù)angle指角度

    復(fù)制代碼 代碼如下:

    function run(angle) {
                        if (isIE) {
                            cosDeg = Math.cos(angle * Math.PI / 180);
                            sinDeg = Math.sin(angle * Math.PI / 180);
                            with (target.filters.item(0)) {
                                M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
                            }
                            target.style.top = (orginH - target.offsetHeight) / 2 + "px";
                            target.style.left = (orginW - target.offsetWidth) / 2 + "px";
                        } else if (target.style.MozTransform !== undefined) {
                            target.style.MozTransform = "rotate(" + angle + "deg)";
                        } else if (target.style.OTransform !== undefined) {
                            target.style.OTransform = "rotate(" + angle + "deg)";
                        } else if (target.style.webkitTransform !== undefined) {
                            target.style.webkitTransform = "rotate(" + angle + "deg)";
                        } else {
                            target.style.transform = "rotate(" + angle + "deg)";
                        }
                    }

    模擬轉(zhuǎn)盤(pán)加速,勻速和減速。當(dāng)角度小于某個(gè)數(shù)值時(shí),讓其處于加速此處采用1.01的系數(shù)作為加速度,當(dāng)大于某個(gè)數(shù)值時(shí)處于高速勻速狀態(tài),當(dāng)角度大于設(shè)置的最大數(shù)值時(shí),讓其減速采用系數(shù)為0.99。設(shè)置負(fù)數(shù)作為減速的值(即變量 tmp),隨即獲取負(fù)360中的值(即變量 m),當(dāng)大于這個(gè)值時(shí),轉(zhuǎn)盤(pán)停止。
    復(fù)制代碼 代碼如下:

    var tmp = -900;
                    var m = -parseInt(Math.random() * 360);
                    timer = setInterval(function () {
                        if (i > 3000) {
                            tmp = parseInt(tmp * 0.99);
                            if (tmp > m) {
                                tmp = m;
                                clearInterval(timer);
                                msg(m);
                            }
                            run(tmp);
                        }
                        else if (i > 1000) {
                            i = i + 45;
                            run(i);
                        }
                        else {
                            i = parseInt((i + 1) * 1.01);
                            run(i);
                        }
                    }, 50);

    啟動(dòng)抽獎(jiǎng)和重新設(shè)置抽獎(jiǎng)
    復(fù)制代碼 代碼如下:

    <input id="test" type="button" value="抽獎(jiǎng)" />
    <input id="restart" style="display: none;" type="button" value="再抽一次" />
    m$('test').onclick = function () {
                    m$('test').style.display = "none";
                    showMsg();
                }

                m$('restart').onclick = function () {
                    m$('restart').style.display = "none";

                    if (isIE) {
                        m$("demo").style.top = "0px";
                        m$("demo").style.left = "0px";
                    } else if (m$("demo").style.MozTransform !== undefined) {
                        m$("demo").style.MozTransform = 'rotate(0deg)';
                    } else if (m$("demo").style.OTransform !== undefined) {
                        m$("demo").style.OTransform = 'rotate(0deg)';

                    } else if (m$("demo").style.webkitTransform !== undefined) {
                        m$("demo").style.webkitTransform = 'rotate(0deg)';
                    } else {
                        m$("demo").style.transform = 'rotate(0deg)';
                    }

                    m$('test').style.display = "block";
                    i = 0;
                }


    二、完整代碼demo:

    復(fù)制代碼 代碼如下:
    <!DOCTYPE html>
    <html>
    <head>
        <title>抽獎(jiǎng)</title>
        <style type="text/css">
            #container{width: 400px;height: 400px;position: relative;margin: 0 auto;}
            #demo{position: absolute;filter: progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");}
        </style>
    </head>
    <body style="height: 1000px;">
        <div id="container">
            <div id="demo">
                <img alt="" src="http://img.jbzj.com/file_images/article/201406/20146394819279.png?20145394926" width="400" height="400" />
            </div>
        </div>
        <input id="test" type="button" value="抽獎(jiǎng)" />
        <input id="restart" style="display: none;" type="button" value="再抽一次" />
        <div id="msg">
        </div>
        <script type="text/javascript">
            var m$ = function (id) { return document.getElementById(id); }
            var ua = navigator.userAgent;
            var isIE = /msie/i.test(ua) && !window.opera;

            var i = 1, sinDeg = 0, cosDeg = 0, timer = null;
            var mRotate = function () {
                var rotate = function (target, msg) {
                    target = m$(target);
                    var orginW = target.clientWidth, orginH = target.clientHeight;
                    clearInterval(timer);
                    function run(angle) {
                        if (isIE) {
                            cosDeg = Math.cos(angle * Math.PI / 180);
                            sinDeg = Math.sin(angle * Math.PI / 180);
                            with (target.filters.item(0)) {
                                M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
                            }
                            target.style.top = (orginH - target.offsetHeight) / 2 + "px";
                            target.style.left = (orginW - target.offsetWidth) / 2 + "px";
                        } else if (target.style.MozTransform !== undefined) {
                            target.style.MozTransform = "rotate(" + angle + "deg)";
                        } else if (target.style.OTransform !== undefined) {
                            target.style.OTransform = "rotate(" + angle + "deg)";
                        } else if (target.style.webkitTransform !== undefined) {
                            target.style.webkitTransform = "rotate(" + angle + "deg)";
                        } else {
                            target.style.transform = "rotate(" + angle + "deg)";
                        }
                    }

                    var tmp = -900;
                    var m = -parseInt(Math.random() * 360);
                    timer = setInterval(function () {
                        if (i > 3000) {
                            tmp = parseInt(tmp * 0.99);
                            if (tmp > m) {
                                tmp = m;
                                clearInterval(timer);
                                msg(m);
                            }
                            run(tmp);
                        }
                        else if (i > 1000) {
                            i = i + 45;
                            run(i);
                        }
                        else {
                            i = parseInt((i + 1) * 1.01);
                            run(i);
                        }
                    }, 50);
                }
                return { rotate: rotate }
            } ();

            function showMsg() {
                mRotate.rotate("demo", function msg(m) {
                    if (m > -90 && m < -30) {
                        m$("msg").innerHTML += "22222222";
                    }
                    else if (m > -150 && m < -90) {
                        m$("msg").innerHTML += "333333333";
                    }
                    else if (m > -210 && m < -150) {
                        m$("msg").innerHTML += "444444";
                    }
                    else if (m > -270 && m < -210) {
                        m$("msg").innerHTML += "5555555";
                    }
                    else if (m > -330 && m < -270) {
                        m$("msg").innerHTML += "6666666";
                    } else {
                        m$("msg").innerHTML += "111111111";
                    }
                    m$('restart').style.display = "block";
                });
            }

            window.onload = function () {
                m$('test').onclick = function () {
                    m$('test').style.display = "none";
                    showMsg();
                }

                m$('restart').onclick = function () {
                    m$('restart').style.display = "none";

                    if (isIE) {
                        m$("demo").style.top = "0px";
                        m$("demo").style.left = "0px";
                    } else if (m$("demo").style.MozTransform !== undefined) {
                        m$("demo").style.MozTransform = 'rotate(0deg)';
                    } else if (m$("demo").style.OTransform !== undefined) {
                        m$("demo").style.OTransform = 'rotate(0deg)';

                    } else if (m$("demo").style.webkitTransform !== undefined) {
                        m$("demo").style.webkitTransform = 'rotate(0deg)';
                    } else {
                        m$("demo").style.transform = 'rotate(0deg)';
                    }

                    m$('test').style.display = "block";
                    i = 0;
                }
            }
        </script>
    </body>
    </html>

    相關(guān)文章

    最新評(píng)論