jQuery掷骰子动画代码-jquery案例-前端日记簿

首页 jquery案例正文

jQuery掷骰子动画代码

2023-12-01 73

效果图：

当点击骰子的时候骰子会进行一个旋转动画然后固定在一个点并且在文本中会显示出几点这次主要时是通过js以及css中设置好的类进行一个替换实现的动画

html：

骰子部分主要是通过图片进行展示通过弹性布局让盒子进行水平垂直居中显示筛子部分通过margin在盒子内居中

通过对图片的定位跳转设置好六个面显示的位置

 .dice-1 {
        background-position: -5px -4px;
      }

      .dice-2 {
        background-position: -5px -107px;
      }
      .dice-3 {
        background-position: -5px -212px;
      }
      .dice-4 {
        background-position: -5px -317px;
      }
      .dice-5 {
        background-position: -5px -427px;
      }
      .dice-6 {
        background-position: -5px -535px;
      }

通过下面三个类来配合js进行一个骰子的动画翻转

先获取到demo 每次点击demo时将筛子上的类只设置一个dice 就是初始化并且声明一个变量去接收跟骰子相对应面的数字用于最后去显示哪一面

紧接着对骰子进行animate设置通过给dice添加类然后添加延时这样重复的去操作实现动画的效果

最后给dice上面的类都移除并且添加上先前设置好任意一面对应的类进行展示并且将骰子下面的文本一起进行改变

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery掷骰子动画代码</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .wrap {
        width: 90px;
        height: 90px;
        margin: 120px auto 30px auto;
        position: relative;
      }
      .dice {
        width: 90px;
        height: 90px;
        background: url(./img/dice.png) no-repeat;
        cursor: pointer;
      }
      .dice-1 {
        background-position: -5px -4px;
      }

      .dice-2 {
        background-position: -5px -107px;
      }
      .dice-3 {
        background-position: -5px -212px;
      }
      .dice-4 {
        background-position: -5px -317px;
      }
      .dice-5 {
        background-position: -5px -427px;
      }
      .dice-6 {
        background-position: -5px -535px;
      }
      .dice-t {
        background-position: -5px -651px;
      }
      .dice-s {
        background-position: -5px -763px;
      }
      .dice-e {
        background-position: -5px -876px;
      }
      .Txt {
        text-align: center;
        font-size: 16px;
      }
      .Txt span {
        font-weight: bold;
        color: #f30;
        margin: 6px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="wrap">
        <div class="dice dice-1" id="dice"></div>
      </div>
      <p class="Txt">请直接点击上面的色子！</p>
    </div>
  </body>
</html>
<script src="./js/jquery.js"></script>
<script>
  var dice = $("#dice");
  dice.click(function () {
    dice.attr("class", "dice"); //将demo上的类初始化 恢复最初
    dice.css("currsor", "default");
    var num = Math.floor(Math.random() * 6 + 1); //随机数字 最大为骰子大面可以理解为点数
    dice
      .animate({ left: "2px" }, 100, function () {
        dice.addClass("dice-t");
      })
      .delay(200)
      .animate({ top: "-2px" }, 100, function () {
        dice.removeClass("dice-t").addClass("dice-s");
      })
      .delay(200)
      .animate({ opacity: "show" }, 600, function () {
        dice.removeClass("dice-s").addClass("dice-e");
      })
      .delay(100)
      .animate({ left: "-2px", top: "2px" }, 100, function () {
        dice.removeClass("dice-e").addClass("dice-" + num);
        $(".Txt").html("您掷得点数是<span>" + num + "</span>");
        dice.css("cursor", "pointer");
      });
  });
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=235

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。