jQuery大风车转盘效果

基本信息
源码名称：jQuery大风车转盘效果
源码大小：0.16M
文件格式：.zip
开发语言：js
更新时间：2019-05-05
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 2 元　
源码介绍
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=1024">
    <title>jQuery大风车转盘转起来</title>
    <link href="css/min.css" rel="stylesheet">
    <script src="js/min.js"></script>
    <script src="js/jquery-transform-animate.js"></script>
    <script src="js/jquery-wheel.js"></script>
</head>
<body id="home-fx">
<div id="wrapper">
<div id="header"><h2>Jquery大转盘：JqueryWheel</h2></div>
<div id="doc">
<div id="main-feature">
    <div id="wheel-frame" class="a">
        <span id="spin" onclick="javascript:window.switchPage()"><img src="images/spinner.png" alt="Click to Spin" height="90" width="89"></span>
        <div id="wheel" onclick="javascript:window.switchPage()">
            <div id="section-a" class="section">WordPress</div>
            <div id="section-b" class="section">PhpWind </div>
            <div id="section-c" class="section">Discuz X</div>
        </div>
        <img src="images/stand.png" alt="" id="wheel-stand">
        <div id="wheel-creature"></div>
        <div id="wheel-panel" class="pager pager-no-history">
            <div class="pager-content">
                <div class="wheel-panel-contents" id="feature-a">
                    <script>// <![CDATA[
                    document.getElementById('feature-a').id = 'page-feature-a';
                    // ]]></script>
                    <h3>jQuery<span>手册网</span></h3>
                    <p>本站致力于收集jQuery插件和提供各种jQuery特效的详细使用方法,在线预览，jQuery插件下载及教程</p>
                    <a href="#">去看看吧 &raquo;</a>
                </div>
                <div class="wheel-panel-contents" id="feature-c">
                    <script>// <![CDATA[
                    document.getElementById('feature-c').id = 'page-feature-c';
                    // ]]></script>
                    <a href="#">去看看吧 &raquo;</a>
                </div>
                <div class="wheel-panel-contents" id="feature-b">
                    <script>// <![CDATA[
                    document.getElementById('feature-b').id = 'page-feature-b';
                    // ]]></script>
                    <h3>Discuz X <span>2.0测试版发布喽</span></h3>
                    <p>手册网 X2 在继承和完善 手册网 X1.5 "经典"宗旨的基础上，针对"运营拓展"，"负载性能"，"用户体验"和"管理体验"几大方面，全面优化和打造。</p>
                    <a href="#">去看看吧 &raquo;</a>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
    <script>
    $(document).ready(function() {
        var $container = $('#wheel-frame');
        var panelId     = 'wheel-panel';
        var $panel     = $('#wheel-panel');
        var wheel       = document.getElementById('wheel');
        var $wheel     = $(wheel);
        var page        = 0;
        var useTransitions = false;
        (function() {
            var div = document.createElement('div');
            div.innerHTML = '<div style="'
                  '-webkit-transition: color 1s linear;'
                  '-moz-transition: color 1s linear;'
                  '-ms-transition: color 1s linear;'
                  '-o-transition: color 1s linear;'
                  '"></div>';
            useTransitions =
                   (div.firstChild.style.webkitTransition !== undefined)
                || (div.firstChild.style.MozTransition !== undefined)
                || (div.firstChild.style.msTransition !== undefined)
                || (div.firstChild.style.OTransition !== undefined);
            delete div;
        })();
        var angle;
        if (useTransitions) {
            angle = -360.0; // start at an angle to fix font rendering in Windows
        } else {
            angle = 0.0;
        }
        if (typeof wheel.addEventListener != 'undefined') {
            wheel.addEventListener(
                'webkitTransitionEnd',
                showPanel,
                true
            );
            wheel.addEventListener(
                'transitionend',
                showPanel,
                true
            );
        } else {
            wheel.addEvent(
                'transitionend',
                showPanel
            );
        }
        function showPanel()
        {
            Mozilla.Pager.pagers[panelId].setPage(
                Mozilla.Pager.pagers[panelId].pages[page]
            );
            if (useTransitions) {
                $panel
                    .css('opacity', 1.0)
                    .css('bottom', 0);
            } else {
                $panel.animate({ opacity: 1.0, bottom: 0 }, 400);
            }
        }
        function switchPage()
        {
            hidePanel();
            spinWheel();
            if($container.hasClass('a')) {
                $container.removeClass('a');
                $container.addClass('b');
                page = 1;
            } else if ($container.hasClass('b')) {
                $container.removeClass('b');
                $container.addClass('c');
                page = 2;
            } else if ($container.hasClass('c')) {
                $container.removeClass('c');
                $container.addClass('a');
                page = 0;
            }
        }
        function hidePanel()
        {
            if (useTransitions) {
                $panel
                    .css('opacity', 0)
                    .css('bottom', -278);
            } else {
                $panel.animate({ opacity: 0.0, bottom: -278 }, 400);
            }
        }
        function spinWheel()
        {
            angle -= 480.0;
            if (useTransitions) {
                $wheel.rotate(angle);
            } else {
                $wheel.animate({rotate: angle}, 800, 'linear', showPanel);
            }
        }
        window.switchPage = switchPage;
    });
    </script>
</body>
</html>