js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写
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>
js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写的更多相关文章
- js监听鼠标滚动
//加载顺序问题,不可改变位置 var scrollFunc = function(e){ e = e || window.event; if (e.wheelDelta) { i ...
- js进阶 12 jquery事件汇总
js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...
- js与jquery实时监听输入框值变化方法
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...
- react 监听页面滚动
html: // 如果使用typescript, 定义dom类型 private dom: HTMLDivElement | null // ReactJS中,对Div监听只需要绑定 onScroll ...
- 二、python小功能记录——监听鼠标事件
1.原文链接 #-*- coding:utf-8 -*- from pynput.mouse import Button, Controller ## ======================== ...
- js与jquery实时监听输入框值的oninput与onpropertychange方法
文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监 ...
- 用python的库监听鼠标程序测试,有程序,有现象
程序如下: # -*- coding: utf-8 -*- import pythoncom, pyHook def OnMouseEvent(event): print 'MessageNam ...
- Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端用js与jquery实时监听输入框值的改动
背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...
随机推荐
- POJ 3042 区间DP（费用提前计算相关的DP）
题意: 思路: f[i][j][1]表示从i到j的区间全都吃完了 现在在j点 变质期最小是多少 f[i][j][0]表示从i到j的区间全都吃完了 现在在i点 变质期最小是多少 f[i][j][0]=m ...
- Vue自定义指令实现下拉加载：v-loadmore
和methods平级: directives: { loadmore: {//自定义指令: 下拉加载 bind(el, binding) { var p = 0; var t = 0; ...
- Vue 国家省市三级联动
在网上查阅一下,基本上是省市区三级联动,国家省市的就只能自己动手了. 样式就根据自己的需要去调整了. JSON数组太长,就折叠放在了后面. 效果图: <!DOCTYPE html> < ...
- 使用C库制作DLL
一.用C编写制作 DLL 如下图所示,是在C++的基础上新建的项目工程: 新建项目的工程文件中有.cpp文件. 由于我们是用C库制作的DLL,显然用C++来编写的是不合适的,我为什么用C库,而不用C+ ...
- libssh2进行远程运行LINUX命令
/** * CSSHClient.h * @file 说明信息.. * DATE February 13 2015 * * @author Ming_zhang */ #ifndef _CSSHCLI ...
- D3.js加载csv和json数据
1.加载数据的基本命令 D3提供了方法可以对不同的数据类型进行加载,比如d3.text(), d3.xml(), d3.json(), d3.csv(), 和d3.html(). <!DOCTY ...
- jQuery自定义插件规范
<ul class="list"> <li>导航列表 <ul class="nav"> <li>导航列表1< ...
- BZOJ1009: [HNOI2008]GT考试(KMP+矩阵乘法)
Description 阿申准备报名参加GT考试,准考证号为N位数X1X2....Xn(0<=Xi<=9),他不希望准考证号上出现不吉利的数字.他的不吉利数学A1A2...Am(0< ...
- ArcEngine标注和注记
转自原文 ArcEngine标注和注记 标注和注记是ArcEngine中提供的两种使用文字信息标注地图要素的方式.其中标注是作为图层的属性存在的,可以动态创建,注记作为地理要素被存储.需要注意的是Sh ...
- Caused by: java.lang.NoSuchMethodError:javax.servlet.http.HttpServletRequest.getServletContext()L
在做项目的时候,出现Caused by: java.lang.NoSuchMethodError: javax.servlet.http.HttpServletRequest.getServletCo ...