js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写
一、总结
一句话总结：滚动事件scroll()，浏览器窗口调整监听resize()，思考好监听对象。
1、滚动事件scroll()的监听对象是谁？
window对象
$(window).scroll(function(){
//滚动条的距离scrollTop()和scrollLeft()
$('#div1').text($(this).scrollTop())
})
2、浏览器窗口调整监听resize()的监听对象是谁？
window对象
$(window).resize(function(){
alert('窗口大小改变了')
})
3、如何监听窗口滚动？
scroll函数
$(window).scroll(function(){
//滚动条的距离scrollTop()和scrollLeft()
$('#div1').text($(this).scrollTop())
})
4、如何监听窗口改变？
resize函数
$(window).resize(function(){
alert('窗口大小改变了')
})
二、监听鼠标滚动事件和窗口改变事件怎么写
1、相关知识
- scroll() 当用户滚动滚动条时会发生 scroll 事件
- resize() 当调整浏览器窗口的大小时，发生 resize 事件。
2、代码
<!DOCTYPE html> <html lang="en"> <style> </style> <head> <meta charset="UTF-8"> <title>演示文档</title> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <style type="text/css"> body{height: 3000px} div{width: 150px;height: 100px;border:1px solid orange;position: fixed;left:150px;} p{width: 50px;height:50px;background: green} </style> </style> </head> <body> <h3>jQuery事件对象</h3> <div id="div1"><p></p></div> <input id="btn1" type="button" value="事件对象"> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ //滚动条的距离scrollTop()和scrollLeft() $('#div1').text($(this).scrollTop()) }) $(window).resize(function(){ alert('窗口大小改变了') }) }) </script> </body> </html>