<!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="#">去看看吧 »</a> </div> <div class="wheel-panel-contents" id="feature-c"> <script>// <![CDATA[ document.getElementById('feature-c').id = 'page-feature-c'; // ]]></script> <a href="#">去看看吧 »</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="#">去看看吧 »</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>
评论