jquery 实现心漫天动画效果

最新推荐文章于 2022-01-22 09:45:47 发布

三宝鸭

最新推荐文章于 2022-01-22 09:45:47 发布

阅读量121

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_43542074/article/details/97404955

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

效果图
代码如下

<!doctype html>
<html onselectstart='return false'>
<head>
<meta charset="utf-8">
<title>心漫天</title>
<style type="text/css">
*{margin:0; padding:0;}
html,body{ width:100%; height:100%; overflow:hidden;}
.box{ position:absolute; width:100%; height:100%;}
.box .heart{ width:40px; height:40px; border-radius:0 0 50% 50%; position:absolute;}
.box .left{ width:20px; height:20px; border-radius:50% 50% 0 5px; position:absolute; top:5px; left:0; z-index:1}
.box .right{ width:20px; height:20px; border-radius:50% 50% 5px 0; position:absolute; top:5px; right:0; z-index:1}
.box .cover{ width:40px; height:20px; background:white; position:absolute; top:0; left:0;}
</style>
</head>

<body>
	<div class="box" id="box">
		
	</div>
	<script src="js/jquery-1.11.3.min.js"></script>
	
	<script>
		var box=document.getElementById('box');
		var bd=document.getElementsByTagName('body')[0];
		var w=bd.offsetWidth;
		var h=bd.offsetHeight;
		var hid=[];
		var dir=1;
		var count=0;
		//var op=0;
		function heart(){
			dir=-dir;
			count++;
			var color=Math.ceil(16777215*Math.random()).toString(16);
			var l=Math.floor(Math.random()*w);
			var t=Math.floor(Math.random()*h);
			var o=Math.random();
				//color1=new Array(6-color.length).join(0);
			var left=document.createElement('div');
				left.setAttribute('class','left');
				left.style.background='#'+color;
			var right=document.createElement('div');
				right.setAttribute('class','right');
				right.style.background='#'+color;
			var cover=document.createElement('div');
				cover.setAttribute('class','cover');
			var heart=document.createElement('div');
				heart.setAttribute('class','heart ');
				heart.setAttribute('dir',dir);
				heart.style.background='#'+color;
			heart.appendChild(left);
			heart.appendChild(right);
			heart.appendChild(cover);
			box.appendChild(heart);
			
			heart.style.left=l+'px';
			heart.style.top=t+'px';
			heart.style.opacity=o+0.1;
		}
		//heart();
		
		function create(){
			var n=parseInt(Math.random()*20)+1;
			for(var i=0; i<n; i++){
				heart();
			}
		};
		create();
		function move(){
			var tm=Math.random()*5;
			var lm=Math.random()*5;
			var hrt=$('.heart');
			for(var i=0; i<count; i++){
				tm+=1; lm+=1;
				if(hrt.eq(i).css('top') && hrt.eq(i).css('left')){
					var top=hrt.eq(i).css('top');
					var lft=hrt.eq(i).css('left');
					var op=hrt.eq(i).css('opacity');
					var td=hrt.eq(i).attr('dir');
					var ld=hrt.eq(i).attr('dir');
					top=parseInt(top.substring(0,top.length-2));
					lft=parseInt(lft.substring(0,lft.length-2));
					top+=tm*td;lft+=lm*ld;
					//op==0?op=0.6:op=0;
					op+=td*0.5;
					if(op<0){
						op+=0.1;
					}else if(op>=1){
						op=0.1;
					};
					if(top>h||lft>w||top<0||lft<0){
						hrt.eq(i).remove();
					};
					
					hrt.eq(i).css({'top':top,'left':lft,'opacity':op});
					
					if(hrt.length<=10){
						create();
					};
				};
				
				//console.log(typeof top,lft);
			};
			
		};
		var time=setInterval(move,200);
		$('.heart').click(function(){
			$(this).remove();
		});
	</script>
</body>
</html>

三宝鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 实现心漫天动画效果

代码如下<!doctype html><html onselectstart='return false'><head><meta charset="utf-8"><title>心漫天</title><style type="text/css">*{margin:0; padding:0;}htm...
复制链接

扫一扫

专栏目录