网页特效2

1 复习

  1. offset 自己的 偏移
    offsetWidth 得到自己的宽度
    offsetHeight
    构成 : width + padding + border
    div width 200 border 3px padding-right: 15px
    div offsetWidth = 200 + 6 + 15 = 221
  2. offsetLeft offsetTop
    div.offsetLeft
    得到距离 这个 div 最近的 带有定位的 父 盒子 左边距离
  3. offsetParent 返回自己的父亲元素 (带有定位的)
    parentNode 这个返回亲父亲 不管父亲是否带有定位
  4. style.top offsetTop
    offsetTop 只读 只可以得到结果 但是不能赋值
    style.top 能得到 (行内式 ) 但是可以给值
    style.top 得到的是 25px
    offsetTop 得到的是 25
  5. 事件对象 event
    div.onclick = function(event) { } event 是点击的事件对象
    event 集合点击事件的相关信息
    pageX 文档的 参考点
    clientX 可视区域
    ScreenX 屏幕
  6. 常用事件
    onmouseover 经过
    onmouseout 离开
    onmousemove 鼠标移动
    var num = 0;
    div.onmouseover = function() { num++; console.log(num))} 1
    div.onmousemove = function() { num++; console.log(num))}
    onmousedown 按下鼠标
    onmouseup 弹起鼠标
    拖拽: 先按下鼠标 然后 移动鼠标
    bar.onmousedown = funtion() {
    document.onmousemove = function() {}
    }
    最大 window 对象 document对象
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); ie

3 Html基本结构访问方法

文档是 document
html body head
document.head
document.body
document.title
没有 document.html 取而代之的是 document.documentElement;

4 scroll家族

  1. scrollTop scrollLeft
    scrollTop 被卷去的头部
    它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离
  2. 怎么得到scrollTop
    我们学习一个事件 : 页面滚动效果
    window.onscroll = function() { 页面滚动语句 }
    谷歌浏览器 和没有声明 DTD <DOCTYPE > :
    document.body.scrollTop;
    火狐 和其他浏览器
    document.documentElement.scrollTop;
    ie9+ 和 最新浏览器 都认识
    window.pageXOffset; pageYOffset (scrollTop)
    兼容性写法:
    1 var scrollTop = window.pageYOffset || document.documentElement.scrollTop 2 || document.body.scrollTop || 0;
  3. JSON
    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一。JSON实际上就是JavaScript
    Json很像我们学过的样式条;
    var myjson={k:v,k:v,k:v...} 键值对 key: value color: red;
    Json一般就是被当做一个配置单用;
    我们的网站,可以注册会员:
    姓名: 李白
    年龄: 500
    职业: it
    json 对象 结构书写:
    var json = { key: value, key1:value } var json = {name: “李白”,age: 15} 使用: json名.属性 json.name 李白 var json1 = {name :"刘德华",age: 55}; console.log(json1.name); // 输出名字 刘德华 console.log(json1.age); // 输出年龄 55
  4. 判断是不是怪异模式的浏览器
    document.compatMode == "CSS1Compat" document.compatMode === "BackCompat"
    BackCompat 未声明
    CSS1Compat 已经声明注意大小写 `
  5. scrollTo(x,y)
    window.scrollTo(15,15);
    方法可把内容滚动到指定的坐标。
    格式:
    scrollTo(xpos,ypos)
    xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
    ypos必需。要在窗口文档显示区左上角显示的文档的 y 坐标
    因为我们的网页大部分都没有水平滚动条,所以,这个x 不太常用。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • js特效 - Day2 一、水平滚动条 和 垂直滚动条 1.1 核心技术点 1)求滚动条的长度? 2)拖动滚动条,...
    Jackson_yee_阅读 442评论 0 1
  • 一、模拟垂直滚动条 重点在计算,思考滚动条的移动距离和盒子中内容的关系!滚动条移动一像素,内容移动多少? = 多出...
    多佳小昕阅读 192评论 0 0
  • offset家族三大家族和一个事件对象三大家族(offset/scroll/client)事件对象/event ...
    Yuann阅读 998评论 0 5
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,934评论 0 1
  • 以下是常用的代码收集,学习用。转自豪情博客园 1. PC - js 返回指定范围的随机数(m-n之间)的公式 re...
    自由加咖啡阅读 1,040评论 0 1