当前位置:   article > 正文

前端开发实现点击出现不断向上可变色心形的效果_js 每秒变色心型雨

js 每秒变色心型雨

如何实现前端开发效果,点击屏幕时展现心形,自动向上移动,并随着向上移动而逐渐透明直到消失

我先给大家说一下这个效果的实现原理,大家明白了原理,代码怎么写都行,就是那些东西而已

首先,它的原理就是页面上有一个div盒子,这个盒子处于隐藏状态,这个盒子里面有放了一个图片,这个图片如果没有特别要求,大家也不用去自己ps,我们直接导入一个公共的矢量切片服务器上的资源就可以,这里说的矢量切片大家不理解也没有关系,就理解为一个专门存放图片的服务器就可以

其次这个盒子对应的效果我们在css准备好,之后用js给整个页面添加一个点击事件,点击任意一个地方的时候,触发事件,复制这个盒子,并让他展示出来,随后按照我们想要的效果控制这个盒子的展示效果,整个实现流程中用到的js也直接导入公共的就可以,当然你自己下载一个js包也可以

现在开始上代码

首先是盒子部分

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/common_star.css" />
<div id="div_dom">
	<svg t="1611984899556" class="icon" viewBox="0 0 1169 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1962" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink">
		<path d="M1045.333 117.333C919.467-6.4 716.8-10.667 584.533 106.667 452.267-10.667 249.6-6.4 123.733 117.333c-128 128-130.133 337.067-2.133 467.2l4.267 4.267 384 384c40.533 40.533 106.666 42.667 149.333 2.133l2.133-2.133 384-384c128-128 130.134-337.067 4.267-465.067-2.133-4.266-2.133-4.266-4.267-6.4z" p-id="1963" />
	</svg>
</div>
<script src="../js/common_star.js"></script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

其次是css部分

.icon{
	fill:currentColor;/* 让svg的颜色随着所在盒子而变化 */
}

#div_dom{
	display: none;/* 隐藏要拷贝的盒子 */
}

div{
	position: absolute;/* 必须加定位,div才可以不影响整个文档流的前提下变换位置 */
}

.opacity1 {
	opacity: 0.6;/* 透明度0.6 */
}

.opacity2 {
	opacity: 0.3;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

最后是js部分

window.onclick = function(e) {
	//存储需要的颜色
	var arr = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#9AECDB", "#f1c40f", "#e67e22", "#e74c3c", "#9980FA","#c0392b", "#d35400", "#f39c12"];
	//随机产生一个颜色
	var heartNum = Math.floor(Math.random() * arr.length);
	
	var domss=document.getElementById("div_dom"); // 获得要克隆的节点对象 
	var div=domss.cloneNode(true);//克隆
	
	div.style.color=arr[heartNum];
	
	div.setAttribute("id", "");//取消id值,变为可见
	div.setAttribute("class", "opacity0");
	
	//获得鼠标的x,y轴的位置,整合成盒子初始的位置,使爱心的中心点和鼠标头重合,加强视觉效果
	var x = e.pageX - 15;
	var y = e.pageY - 15;
	div.style.left = x + "px";
	div.style.top = y + "px";
	
	//将dom追加到body中
	document.body.appendChild(div);
	//准备一个状态的累加器
	var num = 1;
	//使用可循环定时器实现最终效果
	var timer = setInterval(() => {
		num++;
		if (num == 10) div.setAttribute("class", "opacity1");
		if (num == 20) div.setAttribute("class", "opacity2");
		y -= 5;
		div.style.left = x + "px";
		div.style.top = y + "px";
		//如果超出一定的范围,则删除此节点
		if (num == 30) {
			clearInterval(timer);
			div.remove();
		}
	}, 70);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/92717
推荐阅读
相关标签
  

闽ICP备14008679号