效果图:
所需图片素材:
这张图是pointer.png的位置的。
turntable-bg.jpg这张是转盘背景图,在背景位置。
这张是turntable.png位置的。
需要这三张图片,如果要实现一下,直接另存这三图片引入进去即可。如果不会请修改成对应的图片名字,放到同一个文件下。
基本原理:
1,通过设置CSS样式的position属性,z-index属性等实现背景图,转盘图与指针图的层叠摆放;
2,通过设置元素style.transform = "rotate(0deg)"实现旋转效果。
完整代码如下:
1
2
3
4
5
6
7
转盘抽奖效果
8
9
10 #bg{
11 width:650px;
12 height:600px;
13 margin:0 auto;
14 background:url(turntable-bg.jpg) no-repeat;
15 position:relative;
16 }
17
18 img[src^="pointer"]{
19 position:absolute;
20 z-index:10;
21 top:155px;
22 left:247px;
23 }
24
25 img[src^="turntable"]{
26 position:absolute;
27 z-index:5;
28 top:60px;
29 left:116px;
30 transition:all 4s;
31 }
32
33
34
35
36
如果觉得《幸运抽奖java技术文档_原生js轮盘抽奖实例分析(幸运大转盘抽奖)》对你有帮助,请点赞、收藏,并留下你的观点哦!