PPT制作转盘抽奖活动游戏示例教程,比用希沃白板好做,效果更好

发布网友 发布时间:2022-04-23 07:19

我来回答

1个回答

懂视网 时间:2022-04-20 18:30

现在学习到了过渡效果了,已经开始有做动画效果的意识了,会实现一些比较炫的小玩意,

一个网页加入过渡动画效果,会让人看起来很有美观,不僵硬,有看头,动画是一个网页

美观的主要体现之一,下面做个使用个过渡效果实现的抽奖例子。

先来效果图:

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

所需图片:

这张图是pointer.png的位置的。

turntable-bg.jpg这张是背景图,在背景位置。

这张是turntable.png位置的。

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

代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>抽奖</title>
 <!-- 这里是css部分 -->
 <style>
 #bg{
  width: 650px;
  height: 600px;
  margin: 0 auto;
  background: url(turntable-bg.jpg) no-repeat;
  position: relative;
 }
 img[src^="pointer"]{
  position: absolute;
  z-index: 10;
  top: 155px;
  left: 247px;
 }
 img[src^="turntable"]{
  position: absolute;
  z-index: 5;
  top: 60px;
  left: 116px;
  transition: all 4s;
 }
 
 </style>
</head>
<body>
<!-- 这里是HTML结构部分 -->
 <div id="bg">
 <img src="pointer.png" alt="pointer">
 <img src="turntable.png" alt="turntable">
 </div>
 <!-- 这里是js部分 -->
 <script>
 var oPointer=document.getElementsByTagName("img")[0];
 var oTurntable=document.getElementsByTagName("img")[1];
 var cat=51.4;
 var num=0;
 var offOn=true;
 document.title="";
 
 oPointer.onclick=function(){
  if(offOn){
  oTurntable.style.transform="rotate(0deg)";
  offOn=!offOn;
  ratating();
  }
 }

 function ratating(){
  var timer=null;
  var rdm=0;
  clearInterval(timer);
  timer=setInterval(function(){
  if(Math.floor(rdm/360)<3){
   rdm=Math.floor(Math.random()*3600); 
  }else{
   oTurntable.style.transform="rotate("+rdm+"deg)";
   clearInterval(timer);
   setTimeout(function(){
   offOn=!offOn;
   num=rdm%360;
   if(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代码不多,主要是为了实现过渡设置,还有为了实现层叠而使用position定位,让元素脱离文档流,js代码在于获取元素和

事件的点击,点击指针会旋转,所以要给指针加个点击事件,然后是判断旋转是否停止,如果没有就点击也不能调用函数ratating(),这个

函数执行转盘的旋转和判断指针停在什么位置,然后弹出相应的内容,而函数里实现旋转的过程,是获取转盘的元素,然后使用js控制css

的属性-transform:rotate(),我们不是使用过这个属性在css里直接使它实现旋转的效果吗?就是和伪类选择器:hover及过渡属性一起使

用去实现的,那么因为css实现不了数字的运算和鼠标点击,所以让js去实现且控制css属性,实现到点击旋转这个功能,然而定时器的使用

暂时不说,思路就是使用js实现数字的运算和鼠标的点击及css属性的控制达到旋转的效果。

Math.random()是随机数的生成,Math.floor()向下取整。

再来个今天某人说过的例子:

纯css下拉菜单:

效果图

这个的实现很简单,主要是:hover和过渡属性transition的使用。

代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>css</title>
 <style>
 *{
  margin: 0;
  padding:0;
  font-size: 16px;
  font-family: "微软雅黑";
 }
 #container{
  width: 100px;
  margin: 0 auto;
  text-align: center;
  position: relative;
 }
 #container ul{
  list-style: none;
 }
 #container span{
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
 }
 #container ul{
  height: 0;
  width: 100px;
  overflow: hidden;
  transition: all 1s;
  position: absolute;
  top: 30px;
  left: 0px;
 }
 #container:hover ul{
  height: 330px;
 } 
 #container ul li{
  background: #eee;
  margin-top: 3px;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
 }
 </style>
</head>
<body>
 <div id="container">
 <span>移动</span>
 <ul>
  <li>这里有1</li>
  <li>这里有2</li>
  <li>这里有3</li>
  <li>这里有4</li>
  <li>这里有5</li>
  <li>这里有6</li>
  <li>这里有7</li>
  <li>这里有8</li>
  <li>这里有9</li>
  <li>这里有10</li>
 </ul>
 </div>
</body>
</html>

因为ul是个伸缩对象,所以要让它脱离文档流,不是在实用时会影响到布局,给它一个绝对定位即可。

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com