豌豆射手
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
position: absolute;
}
span{
display: block;
width: 25px;
height: 25px;
border-radius: 50%;
background-image: radial-gradient(rgb(0,255,100),green);
position: absolute;
}
</style>
</head>
<body>
<img src="img/wandou.gif"/>
<script type="text/javascript">
var oBox = document.getElementsByTagName("img")[0];
function bean(){
//创建豆子span元素，并添加到body中
var oSpan = document.createElement("span");
document.body.APPendChild(oSpan);
//豆子原始左边距=豌豆的左外边距+豌豆射手宽度（高度一样）
oSpan.style.left = oBox.offsetleft+oBox.offsetwidth+"px";
oSpan.style.top = oBox.offsettop+"px";
//豆子移动时的左边距
var moveWay = oBox.offsetLeft+oBox.offsetWidth;
var timer = setInterval(function(){
moveWay++;
oSpan.style.left = moveWay+"px";
//设置豆子左边距大于1000时消失，不在移动
if(parseInt(oSpan.style.left)>1000){
document.body.removeChild(oSpan);
/*oSpan.style.display = "none";*/
clearinterval(timer);
}
},1);
}
var timer2 = "";
oBox.onmousedown = function(e){
//鼠标按下时清除计时器效果，防止计时器叠加豆子速度改变
clearInterval(timer2);
var evt = e || event;
//一开始鼠标距离豌豆射手的左侧和上侧距离
var _left = evt.offsetX;
var _top = evt.offsetY;
document.onmousemove = function(e){
var evt = e || event;
//获取移动时鼠标距离可视区域左边距和上边距并减去一开始鼠标距离方块的左边距和上边距，得出豌豆射手距离可视区域的左边的上边距离即定位的left和top值
var x = evt.clientX - _left;
var y = evt.clientY- _top;
oBox.style.left = x + "px";
oBox.style.top = y + "px";
return false;
}
document.onmouseup = function(){
//鼠标抬起后每0.5秒执行一次函数bean
timer2 = setInterval(bean ,500);
document.onmouseup = null;
document.onmousemove = null;
}
}
</scri
文章最后发布于: 2018-08-26 17:23:56
相关阅读
昨日，豌豆荚在京举办“异想APP SHOW”豌豆荚设计奖盛典，颁发了2017豌豆荚年度设计奖。同时，阿里应用分发总经理梁延俊宣布
A5站长网(www.admin5.com)11月23日消息，昨日晚间射手网站长沈晟发文称有15年历程的射手网正式关闭。同一天人人影视也宣布暂时关站
使用 Scrapy 爬取豌豆荚全网 70000+ App，并进行探索性分析。若对数据抓取部分不感兴趣，可以直接下拉到数据分析部分。一、分析背景
射手网上月关闭，与人人影视一起“陨落”让网民和媒体猜测不断，唏嘘的背后还有诸多想象，现在终于真相大白：卖装载2TB的不可自证获得授
二月份做完这个项目后，在公司里面写了一篇总结，这里再自转一下。豌豆荚还有很多不足，也还远没有到「State of the art」的理想境地，但