类似烟花的点击特效

最新推荐文章于 2022-01-05 12:55:29 发布

原创最新推荐文章于 2022-01-05 12:55:29 发布 · 809 阅读

0 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用JavaScript和CSS3创建一个仿烟花绽放的点击特效，当用户在网页上点击时，彩色的烟花从点击位置升起，营造出绚烂的视觉效果。通过结合动画技术和事件监听，为网页增添互动趣味。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	html,body{height: 100%;}
	.ball{width: 15px; height: 15px; border-radius: 50%; position: absolute;}
	</style>
	</head>
	<body>
	<script>
	//定义一个获取随机色的函数
	function randColor(){
	var color = "#";
	var str = "0123456789abcdef";
	for(var i = 1;i<7;i++){
	var index = Math.floor(Math.random()*16);
	color+=str[index];
	}
	return color;
	}
	//定义一个获取随机速度的函数 -10 10 -20 20
	function randSpeed(min,max){
	return Math.floor(Math.random()*(max-min+1))+min;
	}
	/*
	球对象属性
	对应的标签元素
	背景颜色bg
	起始横坐标
	起始纵坐标
	水平移动速度
	垂直移动速度
	类样式

	方法：移动

	*/
	//定义一个小球的构造函数
	function Ball(ele,x,y){
	this.ele = ele;
	this.color = randColor();
	this.x = x;
	this.y = y;
	this.speedX = randSpeed(-20,20); //15
	this.speedY = randSpeed(-20,20);
	this.outLook = "ball";
	//初始化元素对象在页面中的css样式
	this.init = function(){
	this.ele.style.background = this.color;
	this.ele.style.left = this.x+"px";
	this.ele.style.top = this.y+"px";
	this.ele.className = this.outLook;
	document.body.appendChild(this.ele);
	}

	//添加一个小球移动的方法
	this.move = function(){
	var obj = this;
	setInterval(function(){
	if(obj.ele.offsetLeft<0\|\|obj.ele.offsetLeft>document.body.offsetWidth\|\|obj.ele.offsetTop<0\|\|obj.ele.offsetTop>document.body.offsetHeight){
	document.body.removeChild(obj.ele);
	}
	obj.ele.style.left =obj.ele.offsetLeft+obj.speedX+"px";
	obj.ele.style.top = obj.ele.offsetTop+obj.speedY++ +"px";
	},30);
	}


	}

	window.onclick = function(e){
	var e = e\|\|event;
	for(var i = 0;i<60;i++){
	var div = document.createElement("div");
	var b = new Ball(div,e.clientX,e.clientY);
	b.init();
	b.move();
	}
	}
	console.log(document.body.offsetHeight);

	</script>
	</body>
	</html>