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 ...
随机推荐
- 虚拟机中试用windows 8(视频)
虚拟机中试用windows 8(视频) VM7装windows 8基本没戏,建议用正式版vmware8.0,还有Oracle的Virtualbox 也没问题http://www.virtualbox. ...
- 针对CDP协议攻击分析及安全防护
针对CDP协议攻击分析及安全防护 熟悉Cisco的朋友都知道CDP协议是思科公司独特的发现协议,在思科公司出产的所有路由器和交换机里面都能运行此协议,一台运行C D P的路由器或交换机能够得知与它直接 ...
- ubuntu 进入临时客户会话页面 转入用户自己页面
1.点击右上角的按钮 2.选择要登录的客户名字 点击进入 3.输入账号密码 进入指定的账号
- 托管非托管Dll动态调用
原文:托管非托管Dll动态调用 最近经常看到有人问托管非托管Dll调用的问题.对于动态库的调用其实很简单.网上很多代码都实现了Dll的静态调用方法.我主要谈论下动态库的动态加载. 对于托管动态库,实现 ...
- 如何优雅的写UI——（2）MFC下基于CFormView的文档视图程序
在MFC中可以创建多种类型的窗口程序,如对话框程序.单文档结构程序(非文档/视图结构).单文档(文档/视图结构)以及多文档视图结构程序等. 在编写一般的小工具时,我们的首选显然是对话框程序,不过基于对 ...
- 洛谷 P1400 塔
P1400 塔 题目描述 有N(2<=N<=600000)块砖,要搭一个N层的塔,要求:如果砖A在砖B上面,那么A不能比B的长度+D要长.问有几种方法,输出 答案 mod 10000000 ...
- 国内搜索大哥iOS面试题
每一次面试之后都会对问到的面试题进行总结. 这篇总结的是我面试某大型搜索公司的iOS面试题.一面(15min)+二面(30min).并拿到实习offer.当然在今天这个特殊的节日,祝大家新年快乐.希望 ...
- 将字符串使用md5加密
>>> import md5 >>> md5.md5('123').hexdigest() '202cb962ac59075b964b07152d234b70' & ...
- open阶段的一致性检验（二）
SQL> select * from v$version where rownum=1; BANNER --------------------------------------------- ...
- Android学习笔记进阶15之Shader渲染
Android提供的Shader类主要是渲染图像以及一些几何图形. Shader有几个直接子类: BitmapShader : 主要用来渲染图像 LinearGradient :用来进行线性渲 ...