首頁 > 開發者 > 網站開發

jquery 大轉盤,jQueryRotate,源碼

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！ 

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>jquery圓形轉盤抽獎</title>    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>    <script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>    <script type="text/javascript" src="js/jquery.easing.min.js"></script>    <style type="text/css">        /*背景*/        #lottery {            width: 450px;            height: 450px;            position: relative;            background: url("images/disc-bg.gif") no-repeat scroll 0 0 transparent;            z-index: 99991;            margin: 0px auto;            margin-top: 30px;        }            /*轉盤*/            #lottery .img {                position: absolute;                left: 49px;                top: 49px;                width: 352px;                height: 352px;                z-index: 99992;            }            /*指標*/            #lottery .arrow {                width: 32px;                height: 191px;                position: absolute;                left: 209px;                top: 85px;                background: url("images/arrow.png") no-repeat scroll 0 0 transparent;                z-index: 99993;            }            /*抽獎按鈕*/            #lottery .lot-btn {                width: 92px;                height: 92px;                display: block;                position: absolute;                cursor: pointer;                left: 179px;                top: 183px;                overflow: hidden;                background: url("images/buttons_01.png") no-repeat scroll 0 0 transparent;                z-index: 99994;            }    </style></head><body>    <div id="lottery">        <img src="images/disc-rotate.gif" class="img" />        <div class="arrow"></div>        <div class="lot-btn" onclick="javascript:DZP(10,6);"></div>    </div></body></html><script>    //先轉n圈,選擇m第個    function DZP(n, m) {        //停止動畫        $('.img').stopRotate();        //轉        $(".img").rotate({            angle: 0,  //起始角度            animateTo: 360 * n + 26 + 52 * m,  //結束的角度            duration: 2500, //轉動時間            callback: function () {                //得到角度                var r = $('.img').getRotateAngle();            }, //回呼函數            easing: $.easing.stopRotare //定義運動的效果，需要引用jquery.easing.min.js的檔案        });    }</script>


源碼：http://download.csdn.net/detail/dhfekl/7106035


本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More