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 ...
随机推荐
- Enity Framework已经是.NET下最主要的ORM了
Enity Framework已经是.NET下最主要的ORM了.而ORM从一个Mapping的概念开始,到现在已经得到了一定的升华,特别是EF等对ORM框架面向对象能力的升华.切实地说,就是ORM让数 ...
- 2017国家集训队作业[agc006e]Rotate 3x3
2017国家集训队作业[agc006e]Rotate 3x3 题意: 给你一个\(3*N\)的网格,每次操作选择一个\(3*3\)的网格,旋转\(180^\circ\).问可不可以使每个位置\(( ...
- VS Code 终端显示问题
一.打开编辑器的终端时候,然后弹出了系统自带的cmd窗口 解决办法: Win+R 输入cmd 打开windows cmd窗口,窗口顶部右键属性,然后取消勾选使用旧版控制台,然后重启编辑器就行了. 二. ...
- 交换工资 SQL
- linux 命令之 tar
作用 tar命令是Unix/Linux系统中备份文件的可靠方法.差点儿能够工作于不论什么环境中,它的使用权限是全部用户. 语法: tar [主选项+辅选项] 文件或文件夹 主选项: c 创建新的归档文 ...
- 从头认识java-15.7 Map（4）-介绍HashMap的工作原理-hash碰撞（常常作为面试题）
这一章节我们来讨论一下hash碰撞. 1.什么是hash碰撞? 就是两个对象的key的hashcode是一样的,这个时候怎么get他的value呢? 答案是通过equals遍历table那个位置上面的 ...
- Codefroces 831B Keyboard Layouts
B. Keyboard Layouts time limit per test 1 second memory limit per test 256 megabytes input standard ...
- 从数据库中生成XML文件
前台页面<%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...
- CODEVS——T1519 过路费
http://codevs.cn/problem/1519/ 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 大师 Master 题解 查看运行结果 题目描述 Desc ...
- LayoutAnimation-容器动画
1.LayoutAnimation的作用主要就是加载到一个layout上,让这个layout里面的所有控件都有相同的动画效果.现在用到的是在listview中添加动画,使得它每一个item都是滑落显示 ...