知识点:

  模拟滚动条的解除事件问题 ;

  event内置对象,包含 了大量事件;

  page兼容性:

    pageX || clientX + scool().top  ;

  if (true === a)true 最好写前边;

  window.screen.width/height : 检测屏幕分辨率;

  屏幕宽高:

    window.screen.width。     window.screen.height ;

  可视区域宽高兼容性写法:

    

        function  client(){
       if (window.innerHeight !== undefined) {
         return{
            'width':window.innerWidth,
            'height':window.innerHeight
         }      
        else if(window.compatMode ==="CSS1Compt"){
         return{
            'width':document.documentElement.clientWidth,
            'height':document.documentElementclientHeight
         }
        else {
          return{
            'width':window.body.clientWidth,
            'height':window.body.clientHeight
           }         }    
     }
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body> <script src="jquery1.0.0.1.js"></script>
<script>
//需求:浏览器每次更改大小,判断是否符合某一标准然后给背景上色。
// // >960红色,大于640小于960蓝色,小于640绿色。
//步骤:
//1.老三步
//2.判断。
//3.上色 //1.老三步
window.onresize = fn;
//页面加载的时候直接执行一次函数,确定浏览器可视区域的宽,给背景上色
fn(); //封装成函数,然后指定的时候去调用和绑定函数名
function fn() {
//2.判断。
//3.上色
if(client().width>960){
document.body.style.backgroundColor = "red";
}else if(client().width>640){
document.body.style.backgroundColor = "blue";
}else{
document.body.style.backgroundColor = "green";
}
} //获取屏幕可视区域的宽高
function client(){
if(window.innerHeight !== undefined){
return {
"width": window.innerWidth,
"height": window.innerHeight
}
}else if(document.compatMode === "CSS1Compat"){
return {
"width": document.documentElement.clientWidth,
"height": document.documentElement.clientHeight
}
}else{
return {
"width": document.body.clientWidth,
"height": document.body.clientHeight
}
}
} </script>
</body>
</html>

根据屏幕可视宽度上色

client对象:

  clientWidth / Height:网页可视区域的宽高:

    不包括margin和border

    padding+widhth

    clientTop /Left:获取border-top/left的宽度

  盒子调用指盒子本身

  body/html调用,可视区域大小

  

  浏览器大小变化事件,window.onresize

三大家族的区别:

  width/height

    clientWidth = Width+padding

    offsetWidth = width +padding +border

    scrollWidth 内容高度(不含border)

  Top/Left

    offsetTop/Left  :距离父系盒子中带有定位的距离

    scrollTop/Left   :浏览器被卷去的部分

    clientTop/Left。:盒子的上/左 border宽度

  X/Y

    scrollX/Y

    clientX/Y

      鼠标距离可视区域的距离

冒泡:

    当上一个元素上的事件被触发后,同样的事件 在所有的父系元素上都被触发;

    捕获冒泡目标阶段:

      捕获:从上往下顺序(DOM树结构)执行事件;

      冒泡:从下往上(DOm树结构)顺序执行事件;

    不会冒泡的事件:blur\focus\load\unload\onmoissenter\onmouseleave ;

    event.bubbles事件是否冒泡;

    取消冒泡:
      IE9+/火狐/谷歌 :event.stopPropagetion ;

      IE678 :cancel.bubbles

     

      if (event && event.stopPropagetion){
        event.stopPropagetion();
      }else {
        event.cancelBubble
       }

事件委托:

    普通的事件绑定无法为新创建的元素绑定时间

捕获addEventListener

function fn (阐述1,参数2,参数3){

  if (参数3) {

    fn(参数1,参数3);

  }

}

获取内嵌式和外链式的属性:

function getStyle(ele,attr) {
if (window.getComputedStyle){
return window.getComputedStyle( ele,null )[ attracted ];
}
return ele.currentStyle[attr];
}

缓动动画封装:

        function animate(ele,json,fn){
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//开闭原则
var bool = true; //遍历属性和值,分别单独处理json
//attr == k(键) target == json[k](值)
for(var k in json){
//四部
var leader = parseInt(getStyle(ele,k)) || 0;
//1.获取步长
var step = (json[k] - leader)/10;
//2.二次加工步长
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.赋值
ele.style[k] = leader + "px";
//4.清除定时器
//判断: 目标值和当前值的差大于步长,就不能跳出循环
//不考虑小数的情况:目标位置和当前位置不相等,就不能清除清除定时器。
if(json[k] !== leader){
bool = false;
}
} console.log(1);
//只有所有的属性都到了指定位置,bool值才不会变成false;
if(bool){
clearInterval(ele.timer);
//所有程序执行完毕了,现在可以执行回调函数了
//只有传递了回调函数,才能执行
if(fn){
fn();
}
}
},25);
} //兼容方法获取元素样式
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}

      

    

    

  

JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装的更多相关文章

  1. jQuery-1.9.1源码分析系列(十五) 动画处理——缓动动画核心Tween

    在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. ...

  2. JS特效@缓动框架封装及应用

    | 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.变量CSS样式属性获取/赋值方法 给属性赋值:(既能获取又能赋值) 1)div.style.width 单个赋值:点语法,这个方法比较固定 ...

  3. js off 缓动动画

    动画也有很多种,一起来学习,缓动动画吧 缓动动画 1.缓动动画原理=盒子位置+(目标盒子位置-现在盒子位置)/10 2.步长越来越小 3.让步长越来越小的公式      步长=(目标位置-本身位置)/ ...

  4. JS基础知识——缓动动画

    基于距离的缓动动画 原理:设定起始位置  start 和终止位置 end,变化会越来越慢. 公式:start=start+(end-start)/10;     这个10不是固定的,想分成多少份就分成 ...

  5. js简单动画:匀速动画、缓动动画、多物体动画以及透明度动画

    主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...

  6. Windows Phone开发(42):缓动动画

    原文:Windows Phone开发(42):缓动动画 前面在讨论关键帧动画的时候,我有意把几个带缓动动画的关键帧动画忽略掉,如EasingColorKeyFrame.EasingDoubleKeyF ...

  7. 背水一战 Windows 10 (15) - 动画: 缓动动画

    [源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing ...

  8. WPF界面设计技巧(7)—模拟电梯升降的缓动动画

    原文:WPF界面设计技巧(7)-模拟电梯升降的缓动动画 如同Flash一样,WPF的亮点之一也在于其擅于表现平滑的动画效果,但以移动动画来说,仅凭简单的起始位置.目标位置,所产生的动画仍会非常生硬,这 ...

  9. 重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画

    原文:重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 [源码下载] 重新想象 Windows 8 Store Apps (19) - 动画 ...

随机推荐

  1. JDK1.8源码分析01之学习建议(可以延伸其他源码学习)

    序言:目前有个计划就是准备看一下源码,来提升自己的技术实力.同时现在好多面试官都喜欢问源码,问你是否读过JDK源码等等? 针对如何阅读源码,也请教了我的老师.下面就先来看看老师的回答,也许会有帮助呢. ...

  2. SonarQube+Jenkins安装工程中遇到的吭

    1. SonarQube是不是有点飘了,居然要java11+才能运行 解决方案: 重新下载老版本 也不知道哪个版本才好用,就下载了7.0 和6.6,这两个版本用jdk1.8就可以用 2. 配置数据库u ...

  3. 《HTTP权威指南》--阅读笔记(二)

    URL的三部分: 1,方案 scheme 2,服务器位置 3,资源路径 URL语法: <scheme>://<user>:<password>@<host&g ...

  4. ThreadLocal为什么会内存泄漏

    1.首先看下ThreadLocal的原理图: 在ThreadLocal的生命周期中,都存在这些引用. 其中,实线代表强引用,虚线代表弱引用: 2.ThreadLocal的实现:每个Thread维护一个 ...

  5. scrapy 自学入门demo分享

    [toc] 本文基于python 3.7.0,win10平台: 2018-08 完整项目代码:https://github.com/NameHewei/python-scrapy 安装 安装pytho ...

  6. 使用CXF实现WebService

    一.首先创建一个maven项目,引入相应的jar包 <?xml version="1.0" encoding="UTF-8"?> <proje ...

  7. canvas 使用图片跨域问题

    项目中需要生成海报,使用了前端生成图片的插件,将背景图,详情图,以及部分的文字说明放在一块并且生成一张新的图片,大体看了一下源码是通过canvas来实现的,在本地的时候完全没有问题,提交到服务器之后就 ...

  8. Security Guards (Gym - 101954B)( bfs + 打表 )

    题意及思路 题目主要是讲先给出所有guard的位置,再给出所有incidents的位置,求出guard到达每个incident处最小的steps,其中guard每次可以向四周8个方向移动. 思路:对于 ...

  9. 配置Windows Server 2008环境

    上一章已经把Windows Server2008操作系统安装完毕,接下来配置一下Windows Server环境.配置网络和共享中心.配置桌面环境.配置用户IE设置.安装Telnet远程工具.配置文件 ...

  10. c# 20160721

    ctrl y =>反撤销 ctrl m m 隐藏当前代码段 重载运算符语法 把事件处理程序注册为 click事件的监听程序 [newButton.click+=newButton_click] ...