博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js进阶 offset
阅读量:4585 次
发布时间:2019-06-09

本文共 629 字,大约阅读时间需要 2 分钟。

 

1. 三大家族(获取元素尺寸):offset / scroll /client

 

只是盒子本身(盒子布局)不包括margin 包括padding

offsetwidth得到的是自己的宽度=width+padding+border

offsetHeight   

 

 

offsetTop  offsetLeft (检测距离有定位的最近的父盒子的顶部和左边的距离)

div.offsetTop只能获取值(没有px) 不能赋值   divt.style.top可读取可赋值 (有px)

offsetLeft  offsetparent  检测父级盒子中带有定位的盒子 sta(父级盒子中都没有定位的话返回body  如果有返回最近的那个父盒子)

 

 

 

 

 

动画:

原理:盒子未来的位置=盒子现在的位置+步长(div.style.left=div.offsetLeft+10+"px";);

用offsetLeft取值(number类型方便计算)    用offset.style.left赋值

1.闪现动画

 function fn(){

   div.style.left=500;

}

2.匀速动画

 

3.缓慢动画

 

 bug1:点击多次之后速度越来越快怎么解决;

           执行定时器之前先清除定时器

 bug2:无法返回

          让步长变成负值

   传递的目标值如果比当前值大,步长取正直;反之取负值

 

 

 

 

 

2.冒泡+兼容+封装

 

转载于:https://www.cnblogs.com/yaomengli/p/7766758.html

你可能感兴趣的文章
JSP页面中引入另一个JSP页面
查看>>
Android笔记——活动的生命周期
查看>>
springmvc使用包装的pojo接收商品信息的查询条件
查看>>
【Linux】【Services】【Configuration】puppet
查看>>
poj 1002:487-3279(水题,提高题 / hash)
查看>>
RAC环境上搭建DG
查看>>
OS X Mountain Lion高手进阶
查看>>
精通CSS:高级Web标准解决方案(第2版)(Amazon第一CSS畅销书全新改版)
查看>>
初识电流环
查看>>
MySQL每天自动增加分区
查看>>
在线生成坐标值,方便布局使用
查看>>
ab测试工具的使用
查看>>
RTL基本知识:编译命令指定隐性线网类型
查看>>
java中BigDecimal在金融行业中的使用
查看>>
66.Plus One
查看>>
爬虫——小结
查看>>
sticky bit
查看>>
sqlserver 中 where 条件和 join 条件的作用比较
查看>>
jvm解析和调优
查看>>
Linux 连接mysql服务器
查看>>