几种实用的JavaScript鼠标特效,在我们平时网页设计中，鼠标特效可以说是常常会用到，那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效，希望对大家有用。......
2023-03-17 528 JAVASCRIPT 鼠标
javascript怎么判断一个盒子出了边界
来源：互联网
2023-03-16 23:57:15 版权归原作者所有，如有侵权，请联系我们
为了方便使用了jquery来写js代码。例子里面，盒子是个正方形，边界也是正方形，只需要两点判断就可以判断盒子是否出了边界。其他情况画图，具体情况具体分析。
工具/原料
- 电脑
- sublime
方法/步骤
打开编辑器，我们还是创建两个div作为演示，一个是box作为边界，一个是info作为盒子。
直接在index.html文件中编写样式，将info的postion作为absolute，即相对定位，相对与浏览器而言。（因为父级的postion不是relative，想要研究定位问题，直接在box的样式中添加position:relative，然后在接下来的输出中查看由哪些不同。）
我们在浏览器中打开index.html，可以看到下图的样式相对位置。
浏览器的左边原点是从左上角开始的。然后我们观察两个正方形的四个角可以发现，判断是否出界，只需要判断1和3两个角的位置就好了。
在js中获取两个正方形的四点位置，即宽高和相对浏览器的top和left。offset()就是相对应浏览器的绝对位置。
刷新浏览器，打开开发者工具，我们可以看到输出的宽高和相对位置的top和left。
进行对比，info的1点位置在box的1点位置里面，即info_top >= b_top && info_left >= b_left，info的3点位置在box的3点位置里面，即(info_top info_height) = (b_top b_height) && (info_left info_width) = (b_left b_width)，输出ok，然后我们可以通过更改info的位置来进行验证。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JAVASCRIPTJQUERY
相关文章
- 详细阅读
-
如何开始学习javascript详细阅读
如何开始学习javascript,html是网页的内容，c是网页的格式，h是网站的后台，j是网站的前端，那么如何学习j，才能高效？......
2023-03-17 256 JAVASCRIPT
- 详细阅读