JavaScript 特效之四大家族(offset/scroll/client/event)
offsetWidth = width + padding + border;
offsetHeight = Height + padding + border;
document.body.scrollTop
document.documentElement.scrollTop
window.pageYOffset
var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var top = document.documentElement.scrollTop + document.body.scrollTop;
Box.onclick = function (aaa){ aaa就是event }
var event = event || window.event;(主要用这种)
pageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。(页面)
pcreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。(屏幕)
clientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。(浏览器大小和位置)
pageY/pageX=event.clientY/clientX+scroll().top/scroll().left
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 内容宽度(不包含border)
scrollHeight = 内容高度(不包含border)
window.screen.width
window.screen.height
JavaScript 特效之四大家族(offset/scroll/client/event)的更多相关文章
- 三大家族,offset,scroll,client
1.client 1.1主要成员 1.clientWidth 获取网页可视区域宽度(两种用法) clientHeight 获取网页可视区域高度 (两张用法) 盒子调用: 指盒子本省 浏览器调用: ...
- offset / scroll / client Left / Top
1.offsetHeight / Width (只读) offsetHeight:表示该元素在垂直方向占用的空间大小,包含元素的高度+上边框高度+下边框高度 offsetWidth:表示该元素在水平方 ...
- offset,scroll,client系列
offsetHeight: 元素高,height+border+paddingoffsetWidth: 元素宽,width+border+paddingoffsetTop: 距离offsetParen ...
- JS中的offset scroll event client
一.offset 一般用来检测盒子的偏移.位移,都是只读属性,不能赋值 offsetWidth和offsetHeight表示的是:调用者盒子的宽和高,包括盒子自身的padding和border off ...
- offset、client、scroll开头的属性归纳总结
HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...
- DOM盒模型和位置 client offset scroll 和滚动的关系
DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...
- JavaScript特效源码(1、文字特效)
注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效 逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...
- JavaScript特效(调试笔记)
JavaScript特效 一.在网页上显示当前的时间日期,例如:“2016年3月26日 星期六”. js源代码: function getTime() { var today = new Date() ...
- Canvas与javaScript特效笔记
第六章 Canvas与javaScript特效笔记 q <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...
随机推荐
- 分布式监控系统开发【day38】:监控数据如何画图(九)
一.画图代码 1.收集处理数据 class GraphGenerator(object): ''' generate graphs ''' def __init__(self,request,redi ...
- [物理学与PDEs]第3章第1节 等离子体
1. 磁流体力学研究等离子体这种导电流体在电磁场中的运动. 2. 任何物质由于 $T, p$ 等条件的不同而可以处于固态.液态.气态 (常见的三种聚集态) 或等离子体. 3. 等离子体就是电离气 ...
- 【JS】CharToAsciiToBinaryToAsciiToChar
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js&qu ...
- DUMP4 企业级电商项目 —— 对接支付宝扫码支付
延展 <谈谈微信支付曝出的漏洞> [联调 DEMO下载地址]https://docs.open.alipay.com/194/105201/ [内置 一份 说明文档可做参考] [impor ...
- win10自带邮箱添加网易企业邮箱
开始-邮件-账户-添加账户-高级安装程序-internet电子邮件-然后输入网易企业邮箱的用户名和相关服务器设置就行了 接收服务器 pop.qiye.163.com发送服务器 smtp.qiye.16 ...
- 鼠标右键添加Sublime Text
鼠标右键添加Sublime Text 参考 将sublime添加到鼠标右键 实践 1. win+R 输入regedit 2. 输入路径: 计算机\HKEY_CLASSES_ROOT\*\shell\ ...
- vue全局引入scss文件(推荐)
<template> <div id="app"> <router-view/> </div> </template> ...
- 利用pyinstaller 打包Python文件
1.下载安装pyinstaller模块 cmd 命令: pip install pyinstaller cmd命令: pip list 查看自己安装的模块 2.建议把要大包的Python文件单独放到新 ...
- windows系统上安装mysql操作过程及常见错误处理
1.下载mysql免安装版本,下载地址:http://dev.mysql.com/downloads/mysql/ 解压到自己的目录 2.编辑配置文件: 新建一个文本文件,修改名称及后缀为my.ini ...
- zabbix3.2监控rabbitmq集群
监控模板和脚本github地址:https://github.com/jasonmcintosh/rabbitmq-zabbix/tree/master/scripts/rabbitmq .将rabb ...