【JS】网页点击悬浮小苹果+小虫子追踪鼠标位置（可替换）

想去潘达利亚的Bush

已于 2023-01-19 22:08:23 修改

阅读量556

点赞数 1

分类专栏： JavaScript 文章标签： js html css 网页设计

于 2020-06-09 19:08:06 首次发布

本文链接：https://blog.csdn.net/qq_42799236/article/details/106648727

版权

JavaScript 专栏收录该内容

6 篇文章 5 订阅

订阅专栏

只是一个很简单的JS+CSS特效。

效果说明：

1、在网页任意位置点击会轮流出现不同颜色的苹果🍎；
2、一只小虫子会跟随鼠标点击的位置，靠近苹果🐛；
3、用户单击掉小虫子🐛后，苹果会说Thanks！

================================================================
在这里插入图片描述

================================================================

HTML部分

<!doctype html>
<html>
<head>
<meta charset="GB2312">
<title>点击悬浮苹果和bug跟随</title>
<!--以下为点击苹果附件-->
<link rel="stylesheet" type="text/css" href="css/apple.css">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<!--以下为bug和苹果跟随附件-->
<link rel="stylesheet" type="text/css" href="css/AppleAndBug.css">
<script src="js/AppleAndBug.js"></script>
<style>
	#wrapper{
		width:100%;
		height:800px;
		border:1px dotted red;
		margin:0 ;
		padding:0;
	}	
</style>
</head>

<body>

<div id="wrapper">
	(两个特效都需要导入jQuery)
<div class="wrap_apple">
		<img class= "apple" id="1" src="images/app_red.png"/>
		<img class= "apple" id="2" src="images/app_yellow.png"/>
		<img class= "apple" id="3" src="images/app_blue.png"/>
		<img class= "apple" id="4" src="images/app_green.png"/>
		<img class= "apple" id="5" src="images/app_pink.png"/>
		<img class= "apple" id="6" src="images/app_purple.png"/>
		<img class= "apple" id="7" src="images/app_brown.png"/>
		<img class= "apple" id="8" src="images/app_black.png"/>
		<img class= "apple" id="9" src="images/app_eat.png"/>
</div>
<div id="wrap_appleandbug">
<div id="app"><img  src="images/app_red.png"/><span id="app_text"></span></div>
<div id="bug"><img  id="bug_img" src="images/bug.png"/><span id="bug_text"></span></div>		
	</div>	

</div>
</body>
</html>

JS部分

	//物品需要设置为绝对定位absolute
	function change(x,y){//改变物品位置方法
		var app = document.getElementById("app");
		app.style.left=(x)+"px";
		app.style.top=(y)+"px";
	};
	function bug_move(){//bug移动
		var bug = document.getElementById("bug");
		var app = document.getElementById("app");
		var app_x=app.style.left.replace("px","")*1;
		var app_y=app.style.top.replace("px","")*1;
		var bug_x=bug.style.left.replace("px","")*1;
		var bug_y=bug.style.top.replace("px","")*1;
		console.log("app位置"+app_x+"   "+app_y+"		");
		console.log("bug位置"+bug_x+"   "+bug_y);
		console.log("============");
		bug.style.left=(app_x+15)+"px";
		bug.style.top=(app_y-5)+"px";
	};
	function bug_trun(){//bug转身
		var bug = document.getElementById("bug");
		var app = document.getElementById("app");
		var app_x=app.style.left.replace("px","")*1;
		var app_y=app.style.top.replace("px","")*1;
		var bug_x=bug.style.left.replace("px","")*1;
		var bug_y=bug.style.top.replace("px","")*1;
		if(app_x>bug_x){
		bug.classList.add("right");
			console.log("转身");
		}else if(app_x<bug_x){
			bug.classList.remove("right");
		}
	}
	function app_say(){//app喊话
		var app_text = document.getElementById("app_text");
		if(app_text.textContent==""){
		app_text.innerHTML="Help!";
		setInterval(function(){
			app_text.classList.toggle("flash");
		},1000);
	};};
	function bug_kill(){
		var bug_img = document.getElementById("bug_img");
		bug_img.parentNode.removeChild(bug_img);
	}
	//网页加载完毕后进行脚本
	$(document).ready(function(){//调用流程
		$("#bug_img").click(function(){
			$(this).remove();
			$("#app_text").text("Thanks!");
			});
		$("body").mousedown(function(e) {  
     var positionX=e.pageX-$(this).offset().left; //获取当前鼠标相对img的X坐标  
     var positionY=e.pageY-$(this).offset().top; //获取当前鼠标相对img的Y坐标 
	change(positionX,positionY);
	bug_trun();
	bug_move();
	app_say();
 });
//document
});
function create_apple(x,y,i){
		var apple = document.getElementById(i);
		var capple = apple.cloneNode(true);
		$(capple).css("left",(x-10)+"px");
		$(capple).css("top",(y-30)+"px");
		$(capple).css("display","block");
		$("body").append(capple);
		  $(capple).animate({top:"-=50px",opacity:"0"},1);
		setTimeout(function(){
			$(capple).remove();
		},1500);
		
		
	}
	//网页加载完毕后进行脚本
	$(document).ready(function(){
		var i =0;
		$("body").mousedown(function(e) {  
     var clickX=e.pageX-$(this).offset().left; //获取当前鼠标相对img的X坐标  
     var clickY=e.pageY-$(this).offset().top; //获取当前鼠标相对img的Y坐标 
			if(i<9){//随机重置
			i++;
		}else{
			i=1;
		}
	create_apple(clickX,clickY,i);
 });
//document
});

CSS部分

@charset "GB2312";
.apple{
		position:absolute;
		width:20px;
		top:100px;
		transition: top 1s,opacity 3s;
		display:none;
	}
	#app{
		position:absolute;
		width:200px;
		height:25px;
		transition: top 1s, left 1s;
		top:160px;
		left:460px;
	}
	#app img{
		width:20px;
		height:25px;
	}
	#bug{
		position:absolute;
		width:30px;
		height:30px;
		transition: top 3s, left 3s,transform 1s;
		top:155px;
		left:517px;
	}
	#bug_img:hover{
	cursor:pointer;
	}
	#bug img{
		width:30px;
		height:30px;
	}
	.right{
		transform: rotateY(180deg);
	}
	#app:after{
		1;
	}
	#app_text{
		font-family: "黑体";
		font-size:13px;
		position:relative;
		top:-25px;
		left:-20px;
		transition: opacity 1s;
	}
	.flash{
		opacity:0;
	}