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>
里面随机出现的文字和颜色可以自己修改,各自加油敲代码吧!