<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 300px;
height: 200px;
padding-top: 100px;
background-color: pink;
margin: 100px;
text-align: center;
font: 18px/30px "simsun";
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
</div>
<script src="animate.js"></script>
<script>
//需求:鼠标进入盒子之后只要移动,哪怕1像素,随时更换里面的内容。(鼠标在盒子中的坐标)
//技术点:新事件,onmousemove.在事件源上哪怕移动1像素也会触动这个事件。
//一定程度上,模拟了定时器
//步骤:
//1.老三步和新五步
//2.获取鼠标在整个页面的位置
//3.获取盒子在整个页面的位置
//4.用鼠标的位置减去盒子的位置赋值给盒子的内容。
//1.老三步和新五步
var div = document.getElementsByTagName("div")[0];
div.onmousemove = function (event) {
// event = event || window.event;
// //2.获取鼠标在整个页面的位置
// var pagex = event.pageX || scroll().left + event.clientX;
// var pagey = event.pageY || scroll().top + event.clientY;
// //3.获取盒子在整个页面的位置
// var xx = div.offsetLeft;
// var yy = div.offsetTop
// //4.用鼠标的位置减去盒子的位置赋值给盒子的内容。
// var targetx = pagex - xx;
// var targety = pagey - yy;
// this.innerHTML = "鼠标在盒子中的X坐标为:"+targetx+"px;<br>鼠标在盒子中的Y坐标为:"+targety+"px;"
event = event || window.event;
//2.获取鼠标在整个页面的位置
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;
//3.获取盒子在整个页面的位置
var xx = div.offsetLeft
var yy = div.offsetTop
//4.用鼠标的位置减去盒子的位置赋值给盒子的内容。
var targetx = pagex - div.offsetLeft;
var targety = pagey - yy;
this.innerHTML = "鼠标在盒子中的X坐标为:"+targetx+"px;<br>鼠标在盒子中的Y坐标为:"+targety+"px;"
}
</script>
</body>
</html>
拖拽案例
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 弹窗拖拽 模拟垂直滚动条 红色盒子高度计算公式: 容器的高度 / 内容的高度 * 容器的高度 红色方块移动一像素 ...
- 小白板:评论的附件功能;评论通知跳转评论页面; IM:公司/团队/已解散群组的标识;附件上传及预览;置顶;消息免打...