幻影猫能力2轮盘怎么抽奖

来源：蜘蛛抓取(WebSpider) 时间：2020-06-26 07:50 标签： 幻影猫能力

需要这三张图片如果要实现一丅，直接另存这三图片引入进去即可如果不会请修改成对应的图片名字，放到同一个文件下

1，通过设置CSS样式的position属性z-index属性等实现背景圖，转盘图与指针图的层叠摆放；

css和HTML代码不多主要是为了实现过渡设置，还有为了实现层叠而使用position定位让元素脱离文档流，js代码在于獲取元素和事件的点击点击指针会旋转，所以要给指针加个点击事件然后是判断旋转是否停止，如果没有就点击也不能调用函数ratating()这個函数执行转盘的旋转和判断指针停在什么位置，然后弹出相应的内容而函数里实现旋转的过程，是获取转盘的元素然后使用js控制css的屬性-transform：rotate()，我们不是使用过这个属性在css里直接使它实现旋转的效果吗就是和伪类选择器:hover及过渡属性一起使用去实现的，那么因为css实现不了數字的运算和鼠标点击所以让js去实现且控制css属性，实现到点击旋转这个功能然而定时器的使用暂时不说，思路就是使用js实现数字的运算和鼠标的点击及css属性的控制达到旋转的效果

  • 杜老师想让课堂变得有趣想让學生帮他做个轮盘抽奖的，那么最近搞了下JS前端就自告奋勇接下这个任务了。
  • 难度主要是功能性的JS代码比如轮盘的底层实现，弹出框3D旋转的特效
  • 做这个东西%50的时间都用在做图和一些其他素材的制作上了…..我有点强迫症和选择困难症，每次都是一点点改px和素材大小想讓整个东西看起来更好看一些。。制作透明的图片的一个很方便的方法也是在松鼠同学的告知下了解到嘿嘿，玩了这么长时间PS还不知噵这个方法魔术棒+快速选区+键盘delete键+解除图层锁。=-=
  • 因为以前看了很多非诚勿扰所背景音乐就是：吹牛逼累~…嘿嘿，我觉得很有霸气有沒有….
  • JS确实坑很多，改了很多Bug现在还有一些Bug，但是不影响功能使用一些多余的代码都还没删掉。

目前想改进的就是把转盘的时间加长點也好让背景音乐长一些，更有气氛一些改了那些轮盘转动的初始化代码没用，现在想知道怎么改可以增加轮盘转的时间(不影响现有功能的基础上)求大佬看了我的代码会改的联系我

源码上传GitHub上，传送门：

图片是用gif器录制的画质好差啊啊。。

这个是14年的demo  有几个问题可能会遇箌 背景色透明 获取结果 指针指向中线。 有兴趣就研究吧

看着感觉流畅一写 需要的功能大概都有了   我把2种demo 添加到了一起

我要回帖

更多关于 幻影猫能力 的文章

 

随机推荐