栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

javascript实现鼠标点击页面 移动DIV

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

javascript实现鼠标点击页面 移动DIV



一、原理分析:

1.怎么移动?

要移动DIV到指到的坐标点(X,Y),其实质,就是同时改变DIV的DIV.style.top 和 DIV.style.left 这两个值;

2.如何看到移动?

因为要有移动效果,而不是突然间就将某个DIV的TOP和LEFT值变化为另一个值,所以就要用到:

setInterval这个阻塞函数,让函数的执行,延迟,这样就能看到移动效果。(只要是有的运动和移动都要用到这个函数);

二、现实思路

1.速度

有运动,肯定就离不开速度这个概念,在这个例子中,速度是变化的,即DIV和鼠标点击的坐标,之间的距离越大,这个速度应该越快。反之速度越慢。以保证在同一个时间内,完成不同距离的运动。

所以 速度=距离/固定值;

这样,当距离越大,速度越快。反之越小

2.如何判断DIV移动到了鼠标点击的点?

即:DIV的LEFT值和TOP值,与鼠标点击时的X和Y值都相等。

在这个例子中。要使用函数(Math.ceil和Math.floor) 具体可以看代码中的注释

总结:写这个的时候想的太复杂,所以卡了好半天。思路一定要理清,再动手。

以上就是本文的全部内容,希望对大家有所帮助,谢谢对考高分网的支持!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/92322.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号