JQuery轉盤抽獎是一種非常有趣和廣泛應用的互動方式,許多企業在運營過程中會利用這種方式來吸引用戶關注并提高用戶參與度。下面介紹如何制作一個簡單的JQuery轉盤抽獎活動。
1.首先,需要先引用JQuery庫文件,代碼如下:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
2.制作轉盤抽獎頁面,包括抽獎按鈕和轉盤,代碼如下:
<input type="button" value="開始抽獎" id="btn" /> <canvas id="canvas" width="300" height="300"></canvas>
3.使用JQuery編寫轉盤抽獎動畫代碼,代碼如下:
$(function () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var cWidth = canvas.width; var cHeight = canvas.height; var img_bg = new Image(); img_bg.src = "bg.png"; var img_btn = new Image(); img_btn.src = "btn.png"; img_bg.onload = function () { context.drawImage(img_bg, 0, 0, canvas.width, canvas.height); } $("#btn").click(function () { var index = Math.ceil(Math.random() * 8); var deg = -45 - 45 * index; context.rotate(deg * Math.PI / 180); context.drawImage(img_bg, 0, 0, canvas.width, canvas.height); context.drawImage(img_btn, 0, 0, 60, 60); context.rotate(-deg * Math.PI / 180); }); });
4.最后在服務器上運行程序,用戶即可點擊開始抽獎按鈕進行轉盤抽獎活動。