一、缓冲动画Ps1:opacity:所有浏览器都支持 opacity 属性。注释:IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)。Ps2:缓冲运动的速度值一定要转换成整数,不然将到达不了终点,是用Math.ceil(),还是Math.fl ...
分类:
Web程序 时间:
2016-09-16 21:18:03
阅读次数:
267
一、链式运动所谓的链式运动,就是在平常的动画运动函数最后在传入一个参数,当第一个动画运动运动完后,检测一下有没有继续传入的参数,如果有的话就继续运行这个参数,这样重复下去就可以完成一套链式运动 var Li=document.getElementById("li1"); Li.onmouseover ...
分类:
Web程序 时间:
2016-09-16 21:12:14
阅读次数:
225
一、运动框架实现思路:1.速度(改变值left、right、width、height、opacity)2.缓冲运动3.多物体运动4.任意值变动5.链式运动6.同时运动二、匀速运动:1、设置定时器,每隔一段时间更改位置,达到匀速运动2、设置定时器前需清除定时器,以防多次触发重复生成多个定时器3、当运动 ...
分类:
Web程序 时间:
2016-09-15 22:48:44
阅读次数:
532
移动设备和PC本身有区别: 1、屏幕尺寸不同,屏幕大小导致显示的内容页不一样。 2、网络速度不同:手机分2G、3G、4G、WIFI等,我们要少用图片,JS、动画等等,用户打不开一样起不了作用。 3、使用习惯不同:按钮、链接大小要合适手指的点击。 4、技术层面:JS、FLASH不兼容,访问不了。 常见 ...
分类:
移动开发 时间:
2016-08-31 08:20:18
阅读次数:
209
一、背景: 合适的动画不仅更能吸引人们的眼球,也能让你的应用体验更为流畅,而将动画的效果做到极致,才能让用户感到使用你的应用是一种享受,而不是觉得生硬和枯燥。 二、动画技术分类: 按技术类型来进行分类,分为三类:JS动画,CSS3动画,html5动画,接下来分别对三类动画进行讲解。 1)JS动画 通 ...
分类:
其他好文 时间:
2016-08-31 00:19:27
阅读次数:
211
1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来。而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等。动画的原理就是把不同状态的物体,串成连续的样子,就像一本书,画了几个小人,然后 一翻书,就看见小人在动。js动画也一样。不同状态的DOM,用定时 ...
分类:
编程语言 时间:
2016-08-28 11:09:34
阅读次数:
346
实现轮播效果需要运用到的知识: DOM操作 定时器 事件运用 Js动画 函数递归 无限滚动 原理:控制图片列表的“left”值来显示相应的图片 组成部分<div id="container">: <div id="list" style="left:-600px">//当图片的宽度全部为600px时 ...
分类:
Web程序 时间:
2016-08-23 23:35:42
阅读次数:
189
http://www.imooc.com/video/2878 1、速度 (改变left、right、width、height、opacity) 2、缓冲运动 3、多物体运动 4、任意值变化 5、链式运动 6、同时运动 1.1 改变left值,也就是改变位置 举个栗子,例子1 布局代码 下面是实现更 ...
分类:
Web程序 时间:
2016-08-21 07:32:50
阅读次数:
406
简单动画 HTML 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>简单动画</title> 6 <link rel="stylesheet" href="css/style.css"> 7 <script ...
分类:
Web程序 时间:
2016-08-16 19:57:20
阅读次数:
197
一.Promise JS动画settimeout,setinterval,requestAnimationFrame,promise npm install bluebird ...
分类:
Web程序 时间:
2016-08-10 16:06:26
阅读次数:
194