下午复习:
快捷尺寸:
原生:
clientWidth clientHeight: 包含的是content + padding区域
offsetWidth offsetHeight: 包含的是content + padding + border区域
clientLeft clientTop : 包含的元素的左边框宽度, 上边框的宽度
jquery:
content: $(dom).width() $(dom).height()
content + padding: $(dom).innerWidth() $(dom).innerHeight()
content + padding + border: $(dom).outerWidth() $(dom).outerHeight()
content + padding + border + margin: $(dom).outerWidth(true) $(dom).outerHeight(true)
元素的位置和距离:
定位父元素:dom.offsetParent
定位值:
dom.offsetLeft: 表示距离自己定位父元素的左边距离
dom.offsetTop: 表示距离自己定位父元素的上边距离
jquery中的定位值:
$(dom).position()
返回的是一个对象, 对象中包含dom的left定位值 和top定位值
jquery中的offset:
$(dom).offset()
返回一个对象, 对象中包含元素到页面的左边距离和上边距离
四、页面卷动值
页面卷动值指的是 在页面中,视口上面看不到的部分, (被卷起来的部分)
获取页面卷动的方式:
document.documentElement.scrollTop 新版本的chrome 火狐 IE 支持
document.body.scrollTop 老版本的chrome或者一些其他的浏览器支持的
五、IE中的透明度
高就浏览器中:
设置透明度: opacity[0-1]
IE中:
filter: alpha(opacity=[0~100])
六、onscroll事件
当页面卷动的时候会触发该事件
在一个页面中,视口是一定的,当页面的高度比视口高的时候,此时页面将出现滚动条,这个时候当我们改变滚动条位置的时候,会触发onscroll事件。
触发该事件的条件: 改变页面卷动值
触发该事件的条件有很多:
比如:鼠标滚轮滚动的时候,键盘上空格键, 键盘上的PgUp 和 PgDn, 键盘上的上下按键
绑定方式:
1 // 给docuemnt.body添加scroll事件 2 document.body.onscroll = function() { 3 console.log(123); 4 } |
当鼠标滚轮滚动的时候:
1 |
七、节流
onscroll事件是一个高频率的事件,如果将代码放入事件中,代码将会将会被执行很多次,很浪费,
为了避免代码执行多次,我们定义一个延时器,将要执行的代码放入延时器中,在频繁执行该事件的时候,先清除之前的延时器,再开启一个新的延时器,从而保证代码只执行一次。
1 // 获取元素 2 var $box = $("#box"); 3 4 // 定义一个定时器 5 var timer = null; 6 7 // 给document添加scroll事件 8 document.onscroll = function() { 9 console.log(123); 10 // console.log("页面滚动了"); 11 12 // 如果页面卷动值大于或者等于2000 让box出现 13 if (document.documentElement.scrollTop >= 2000) { 14 // console.log("box该出现了"); 15 16 17 // 清除之前的定时器 18 clearTimeout(timer); 19 20 // 赋值定时器 21 timer = setTimeout(function() { 22 $box.animate({opacity: 1}, 2000, function() { 23 console.log("出现了"); 24 }) 25 }, 200) 26 } 27 28 } |
爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战,真正做到学习完即可到企业正常工作!
我们前端课程的五大优势:
1. 名师亲自授课,根据企业需求 实时跟进课程大纲,保证学员学到的都是最新的、企业最需要的前端知识点
2. 采取小班教学、上二休一的模式(一个班20—30人,保证老师可以照顾到每一位同学,学员有充足的时间练习)
3. 签订就业协议,帮助学员制作简历,投递简历,模拟面试,不用担心就业问题,目前学员平均就业薪资12K
4. 免费学习一周,不满意不收取任何费用
5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐
从小白到就业,我们全权负责!
爱创课堂 言行一致、从不忽悠!
请把自己放心的交给我们吧!
6月12日前端培训班仅剩最后几个名额。。。
扫描下方二维码添加微信:haomei0452,领取 前端资料、学费优惠 !