美文网首页
js特效-2

js特效-2

作者: Radius_ | 来源:发表于2017-09-27 22:08 被阅读0次

一,水平滚动条和垂直滚动条

1.1技术点

1)求滚动条的长度   2)拖动滚动条,求内容要走多少

~滚动条的长度取决于滚动内容(滚动内容越长,滚动条越短);

~内容滚动的距离和滚动条移动的距离成倍数关系.


1.2 换算公式

求滚动条的长度:

      滚动条的长度/盒子的长度=盒子的长度/内容的长度

      滚动条的长度=(盒子的长度/内容的长度)*盒子的长度(这里的"长度"是指高度或宽度)


拖动滚动条时,求内容移动的距离:

      内容移动的距离/滚动条移动距离=(内容的长度-盒子的长度)/(盒子长度-滚动条长度)

      内容移动距离=(内容的长度-盒子的长度)/(盒子长度-滚动条的长度)*滚动条移动的距离


二.内置对象Document

Document对象是window 对象的一部分,可通过 window.document 属性对其进行访问

Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问:

1.document.head(获取头部)

2.document.body(获取body)

3.document.title(获取标题)

4.document.documentElement(获取整个html)

5. document.compatMode :

BackCompat:标准兼容模式关闭

CSS1Compat:标准兼容模式开启

BackCompatible 对应quirks mode(怪异模式),CSS1Compat 对应strict mode(严格模式)

[早期的浏览器Netscape 4和Explorer 4对css进行解析时,并未遵守W3C标准,这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要,众多的浏览器开始依照W3C标准解析CSS,仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式) 。]

6.document.body.clientWidth(浏览器宽度)


三.scroll家族

1.基本概念

      网页正文全文宽:document.body.scrollWidth;

网页正文全文高:document.body.scrollHeight;

网页被卷去的高:document.body.scrollTop;

网页被卷去的左边宽度:document.body.scrollLeft;

2.处理scroll家族浏览器适配问题

ie9+和最新浏览器:

window.pageXOffset;(scrollLeft)

window.pageYOffset;(scrollTop)

Firefox浏览器和其他浏览器:

document.documentElement.scrollTop;

Chrome浏览器和没有声明DTD<DOCTYPE>:

document.body.scrollTop;

兼容写法:

var scrollTop= window. pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

var scrollLeft=window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;


四.JSON

JSON(javaScript Object Notation)是一种轻量级的数据交换格式.它基于ECMAScript的一个子集.相比于XML,json更易于阅读和编写,同时也易于机器解析和生成,目前数据传递基本上都是用json.

JSON有两种结构:对象和数组,两种结构相互组合从而形成各种复杂的数据结构.

json特点:

数据在键值对中

数据由逗号分隔

花括号保存对象

方括号保存数组


五.瀑布流

1.布局界面

fallwater();

functionfallwater() {

          for(var i=0;i<listi[i].length;i++){

                                           }

}

2.判断需要加载的临界点

functionisload() {

           varisload=a<=b;

          returnisload;

  }

3.滚动加载:

window.onload= function() {

       window.onscroll= function() {

                 if(isload()) {

                   for循环{添加图片}

               fallwater();//对新添加页面进行布局

                }

         }

}

                                                                                                                                                                                                                                                                               2017.9.27

相关文章

  • js特效-2

    一,水平滚动条和垂直滚动条 1.1技术点 1)求滚动条的长度 2)拖动滚动条,求内容要走多少 ~滚动条的长度取决于...

  • js网页特效-2

    js特效 - Day2 一、水平滚动条 和 垂直滚动条 1.1 核心技术点 1)求滚动条的长度? 2)拖动滚动条,...

  • 2.14号

    总结:单词完成 js特效复习 开始看js动画 网课看了8节 计划: 单词 js动画和特效 网课 对这段时间所学进行总结

  • 05 - 进度条拖拽

    HTML Css样式 Js代码 特效展示

  • JS特效

    offset offsetWidth,offsetHeight:没有单位,数值类型,检测盒子的宽高,包括paddi...

  • JS 特效

    offset家族三大家族和一个事件对象三大家族(offset/scroll/client)事件对象/event ...

  • 04 - 放大镜特效

    HTML结构 Css样式 Js代码 特效展示

  • 06 - 横向滚动条展示

    HTML结构 Css样式 Js代码 特效展示

  • 07 - 瀑布流特效

    HTML结构 Css样式 Js代码 特效展示

  • 18 - 五彩小球 - 面向对象

    HTML结构 Css样式 Js代码 特效展示

网友评论

      本文标题:js特效-2

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