JavaScript-特效
喝着绿茶的猫
这个作者很懒,什么都没留下…
展开
-
02-JS特效-匀速动画
动画的种类 动画原理 = 盒子位置 + 步长。 1.闪动。 (瞬间到达) 2.匀速。 (每次走一样距离) 3.缓动。 (开始特快越走越慢,步长越来越小.类似刹车,电梯停止,压缩弹簧…) 动画的原理:盒子的位置=盒子本身所在的位置+步长<style> * { padding: 0; margin: 0; }原创 2016-12-21 21:56:51 · 660 阅读 · 0 评论 -
12-JS特效-事件监听原理
使用onclick绑定事件没办法绑定多个事件原创 2017-01-24 20:54:57 · 633 阅读 · 0 评论 -
10-JS特效-注册事件的两种方式
注册事件的两种方式:onclick和addEventListener 为了方便记忆,这里分三种原创 2017-01-14 17:42:10 · 461 阅读 · 0 评论 -
05-JS特效-缓动动画-获取元素样式(行内、内嵌、外链)
火狐谷歌IE9+ : window.getComputedStyle(元素,null).width; ie678: 元素.currentStyle.width; getComputedStyle 和 currentStyle 获取到的都是对象原创 2016-12-27 22:31:23 · 550 阅读 · 0 评论 -
01-JS特效-三大系列之offset系列
三大系列 offset-位移 scroll-卷页 client-可视区原创 2016-12-18 22:07:23 · 936 阅读 · 0 评论 -
08-JS特效-三大系列之client系列
三大系列 offset-位移 scroll-卷页 client-可视区 client(6个)1、clientWidth/clientHeight:获取网页可视区域宽高调用者不同,意义不同:- 盒子调用:用来检测盒子的宽高+padding;clientWidth = width+padding;不包含border和margin,而且不会被内容左右- body/htm调用:原创 2017-01-01 22:17:09 · 1626 阅读 · 0 评论 -
07-JS特效-事件对象-pageY和screenY和clientY的区别
pageY/pageX:鼠标位于整个网页页面的顶部和左侧部分的距离(页面) clientX/clientY:鼠标位于浏览器左侧和顶部的距离(浏览器的大小和位置) screenY/screenX: 鼠标位于屏幕的上方和左侧的距离(屏幕) 鼠标距离整个页面的距离、和距离可视区的距离有时候是相等的当页面有被卷去的头部或者左侧的时候,这两个值就不相等了。由此,我们获取以下等式:鼠标位于整原创 2017-01-01 22:16:15 · 570 阅读 · 0 评论 -
06-JS特效-事件对象概述
事件对象(event)在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。例如鼠标位置,键盘按键,触发事件的元素等所有浏览器都支持event对象,但支持的方式不同: 普通浏览器支持 :event(传参,任意参数) 在IE6/7/8中支持:window.event(内置,无参) 兼容写法: //推荐参数就用event document.onclick = f原创 2017-01-01 22:15:33 · 314 阅读 · 0 评论 -
03-JS特效-三大系列之scroll系列
三大系列 offset-位移 scroll-卷页(本文) client-可视区 onscroll 滚动事件(window.onscroll = fun…) 屏幕每滚动一次,哪怕只有1像素都会触发这个事件。这样就可以用来检测屏幕滚动了.只能有一个,写了多个以最后一个为准,同理 window.onloadonscroll常用属性(4个)1、scrollWidth/scro原创 2016-12-21 21:57:45 · 1812 阅读 · 0 评论