美文网首页
网页特效2

网页特效2

作者: Looog | 来源:发表于2016-10-13 08:30 被阅读16次

    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 不太常用。

    相关文章

      网友评论

          本文标题:网页特效2

          本文链接:https://www.haomeiwen.com/subject/cukwyttx.html