摘要: 七、多属性封装函数 前面分别介绍了单独改变单一属性值得动画,从本节起开始介绍多属性封装函数,一个函数搞定多种属性值的改变。 首先介绍一个很重要的函数getStyle(),这个函数返回一个元素的当前属性值。两个形参分别是元素和属性。注意浏览器的兼容性问题。 1 //获得元素样式专用封装函数,返回该属性 阅读全文
posted @ 2016-02-20 19:34 Haydee 阅读(250) 评论(0) 推荐(1) 编辑
摘要: 五、多物体变宽 这里面要注意由于物体变多了,需要给每个物体各配备一个定时器,否则如果只有一个定时器的话,当鼠标在不同物体之间快速滑动时,不同的物体就会出现争抢的现象。所以timer前要加obj. 1 function changeWidth(obj,target) {//元素,目标值 2 clear 阅读全文
posted @ 2016-02-20 16:13 Haydee 阅读(216) 评论(0) 推荐(1) 编辑
摘要: 四、简单动画之缓冲运动 实现速度的缓冲,即不同位置的速度不同,越靠近目标值速度越小,所以速度值与目标值与当前值之差成正比。这里要注意一个问题就是物体在运动中速度是连续变化的,不是按照整数变化的,当物体停止时由于小数的原因,位置可能不会回到原起点,会差一点,所以缓冲运动里变化的速度要取整。 1 //鼠 阅读全文
posted @ 2016-02-20 15:55 Haydee 阅读(175) 评论(0) 推荐(1) 编辑
摘要: 一、运动框架实现思路 1.匀速运动(属性值匀速变化)(改变 left, right, width, height, opacity 等); 2.缓冲运动(属性值的变化速度与当前值与目标值的差成正比); 3.多物体运动; 4.任意属性值的变化(用封装函数); 5.链式运动(同一物体完成一系列的运动); 阅读全文
posted @ 2016-02-20 14:21 Haydee 阅读(568) 评论(0) 推荐(1) 编辑
摘要: 语法: box-shadow:inset x-offset y-offset blur-radius spread-radius color 也就是: 对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色} 取值: box-shadow属性至多有 阅读全文
posted @ 2016-02-17 18:46 Haydee 阅读(579) 评论(0) 推荐(1) 编辑
摘要: 一、语法: 代码如下: border-radius : none | <length>{1,4} [/ <length>{1,4} ]? 二、取值: <length>: 由浮点数字和单位标识符组成的长度值。不可为负值。 三、说明: border-radius是一种缩写方法。如果“/”前后的值都存在, 阅读全文
posted @ 2016-02-17 18:26 Haydee 阅读(492) 评论(0) 推荐(1) 编辑
摘要: //封装函数var eventUtil={ //添加事件 addHandler:function(element,type,handler){ if(element.addEventListener){ //如果支持DOM2 element.addEventListener(type,handler 阅读全文
posted @ 2016-02-17 17:48 Haydee 阅读(513) 评论(0) 推荐(1) 编辑