JS新手案例-----点击效果的实现

最新推荐文章于 2021-04-06 19:36:41 发布

popping_Sun

最新推荐文章于 2021-04-06 19:36:41 发布

阅读量702

点赞数

分类专栏：新手教学文章标签： html javascript css css3

本文链接：https://blog.csdn.net/popping_sun/article/details/112852665

版权

新手教学专栏收录该内容

8 篇文章 1 订阅

订阅专栏

hello!大家好，今天我们要练习的案例特别的有趣，就是实现鼠标点击页面的动画效果。我们在浏览一些页面时，点击页面就会有文字或者图片出现，看起来很高大上！这样的效果也能由js实现，好我们还是先看下效果在这里插入图片描述

当我们点击页面时就会有文字效果，并且颜色会随机
代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .body {
        width: 500px;
        height: 500px;
        background: orange;
      }
    </style>
  </head>
  <body>
    <div class="body"></div>
    <script src="../../P302/js/jquery-3.4.1.min.js"></script>
    <script>
      var index = 0 //文字显示下标
      //鼠标事件：
      $('.body').mousedown(function (e) {
        var arr = [
          '富强',
          '民主',
          '文明',
          '和谐',
          '自由',
          '平等',
          '公正',
          '法制',
          '爱国',
          '敬业',
          '诚信',
          '友善',
        ]
        //左键点击
        switch (e.which) {
          case 1: {
            if (index >= 12) {
              index = 0
            }
            var x = e.originalEvent.x || e.originalEvent.layerX || 0
            var y = e.originalEvent.y || e.originalEvent.layerY || 0
            var text = arr[index]
            //调用文字显示函数
            creatText(x, y, text)
            //一定时间内消失
            $('.newdiv').hide(0)
            index++
          }
        }
      })
      //显示函数
      function creatText(x, y, text) {
        //文字颜色
        var colorArr = ['red', 'yellow', 'green', 'blue', 'purple', 'black']
        //随机取出颜色
        var colorIndex = Math.floor(Math.random() * colorArr.length)
        var color = colorArr[colorIndex]
        //创建一个div用来显示文字
        newDiv = $('<div></div>')
        newDiv.css({
          position: 'absolute',
          width: '40px',
          height: '30px',
          left: x - 15 + 'px',
          top: +y - 20 + 'px',
          'text-align': 'center',
          color: color,
        })
        newDiv.addClass('newdiv')
        $('.body').html(newDiv)
        $('.newdiv').html(text)
        //动画效果
        $('.newdiv').animate({ top: +y - 35 + 'px' })
      }
    </script>
  </body>
</html>