js轮盘彩票案例分析

现在已经学会了过渡效果，开始有了制作动画效果的意识，会意识到一些眼花缭乱的小玩意。在网页中加入过渡动画效果，会让人看起来很美，不生硬有趣。动画是网页美的主要表现形式之一。让我们用过渡效应做一个彩票的例子。

首先来看效果图：

这个的实现需要使用一些js代码。

需要图片：

这张照片显示了pointer.png的位置。

Turntable-bg.jpg这是背景图片，在背景位置。

这个在turntable.png。

这三张图是需要的。如果你想实现它们，就保存它们并介绍它们。如果没有，请改为相应的图片名称，放在同一个文件下。

代码：

！doctype html lang=' en ' head meta charset=' utf-8 ' title draw/title！-这里是css部分样式# bg { width: 650px px高度： 600 px；margin: 0 auto背景： url(转盘-bg.jpg)无重复；相对位置：} img[src^='pointer']{绝对位置：z-index : 10；top: 155pxleft: 247px} img[src^='turntable']{绝对位置：z-index : 5；top: 60pxleft: 116pxtransition:所有4s；}/style/head dy！-这里是HTML结构部分-div id=' BG ' img src=' http : pointer . png ' alt=' pointer ' img src=' http 3360 turn table . png ' alt='转盘'/div！-这里是js部分-scriptvar o指针=document . getelementsbytagname(' img ')[0]；var oTurntable=document . getelementsbytagname(' img ')[1]；var cat=51.4var num=0；var offOn=truedocument.title=opotinter . onclick=function(){ if(OfOn){ oturnTable . style . transform=' rotate(0deg)'；offOn=！offOnrating()；} }函数ratating(){ var timer=null；var RDM=0；clearInterval(计时器)；timer=setInterval(function(){ if(math . floor(RDM/360)3){ RDM=math . floor(math . random()* 3600)；} else { oturntable . style . transform=' rotate(' RDM ' deg)'；clearInterval(计时器)；setTimeout(function(){ FOFn=！offOnnum=rdm60If(num=cat*1){ alert('4999元')；}else if(num=cat*2){ alert ('50元')；}else if(num=cat*3){ alert('10元')；}else if(num=cat*4){ alert('5元')；}else if(num=cat*5){ alert('免息服务')；}else if(num=cat*6){ alert('提交白金卡')；}else if(num=cat*7){ alert('未中奖')；} },4000);} },30);} /script/body/HTML css和HTML代码不多，主要用于过渡设置，对于层叠，使用位置定位将元素从文档流中分离出来。js代码是获取元素和事件的点击，点击指针会旋转，所以需要在指针中添加一个点击事件，然后判断旋转是否停止。如果不点击，就不能调用ratating()函数。该功能执行转盘的旋转并判断指针停在哪里，然后弹出相应的内容。在函数中实现旋转的过程是获取转盘的元素，然后用js控制css-transform的属性：rotate()。我们不是用这个属性直接让它实现css中的旋转效果吗？它是通过与伪类选择器：hover和转换属性一起使用来实现的。因为css不能实现数字操作和鼠标点击，所以让js实现和控制css属性，实现点击旋转的功能。然而，计时器的使用暂时没有提及。思路是用js实现数字化操作，鼠标点击控制css属性实现旋转的效果。Math.random()是随机数的生成，Math.floor()向下舍入。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。