只是一个很简单的JS+CSS特效。
效果说明：
1、在网页任意位置点击会轮流出现不同颜色的苹果🍎；
2、一只小虫子会跟随鼠标点击的位置，靠近苹果🐛；
3、用户单击掉小虫子🐛后，苹果会说Thanks！
源码链接： 链接：https://pan.baidu.com/s/1QqXqvS4P5I1NohgsOsg93Q 提取码：k0c4
（链接失效请在评论区告诉我）
================================================================
================================================================
================================================================
================================================================
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;
}
转载：https://blog.csdn.net/qq_42799236/article/details/106648727
查看评论