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

8 篇文章 0 订阅
6 篇文章 0 订阅

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

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

首先,它的原理就是页面上有一个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>

其次是css部分

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

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

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

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

.opacity2 {
	opacity: 0.3;
}

最后是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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值