js动画学习笔记
<html>
<head>
<meta charest="utf-8">
<title>test</title>
<style>
#div{
background:darkred;
position:absolute;
width:200px;
height:200px;
left:-200px;
}
#span1{
background: blue;
position: relative;
width:50px;
top:0;
left:200px;
}
#div2{
background: red; position:relative;
left:350px;
width:200px;
height:200px;
filter: alpha(opacity:30);
opacity:0.3;
}
</style>
<script>
//这是速度动画
// window.onload = function () {
// var div = document.getElementById("div");
// div.onmouseover = function(){
// start1(0);
// }
// div.onmouseout = function(){
// start1(-200);
// }
// };
// var timer=null;
// function start1(target) {
// var speed = 0;
// clearInterval(timer);
// var div = document.getElementById("div");
// timer = setInterval(function () {
// //用来判断该加还是该减
// if (div.offsetLeft > target) {
// speed = -10;
// }
// else {
// speed = 10;
// }
// //用来判断当达到目标值时的操作
// if (div.offsetLeft == target) {
// clearInterval(timer);
// } else {
// div.style.left = div.offsetLeft + speed + "px";
// }
// }, 30)
// } //下面是分散的函数，上面的是把两个函数联合起来了
// function start(){
// clearInterval(timer);
// var div = document.getElementById("div");
// timer = setInterval(function () {
// if(div.offsetLeft===0)
// {
// clearInterval(timer);}
// else
// {
// div.style.left = div.offsetLeft + 10 + "px";}
// },30);
// }
// function stop(){
// clearInterval(timer);
// var div = document.getElementById("div");
// timer = setInterval(function () {
// if(div.offsetLeft == -200)
// {
// clearInterval(timer);}
// else
// {
// div.style.left = div.offsetLeft - 10 + "px";}
// },30);
// } //这是透明度动画
window.onload = function () {
var div2 = document.getElementById("div2");
div2.onmouseover = function () {
start(80);
};
div2.onmouseout = function () {
start(30);
}
};
var timer = null;
var opacity = 30;//当前透明度，初始值为30
function start(target){
clearInterval(timer);
var speed ;
var div2 = document.getElementById("div2");
timer = setInterval(function () {
if(opacity > target)//如果当前的透明度大于目标值
{speed = -10;}
else
{speed = 10;} if(opacity == target)//如果当前的透明度等于目标值，就结束定时器
{clearInterval(timer);}
else{
opacity += speed;
div2.style.filter = "alpha(opacity:" + opacity +");";
div2.style.opacity = opacity/100;
}
},300)
} //这里是缓冲动画
// window.onload = function () {
// var div = document.getElementById("div");
// div.onmouseover = function(){
// start1(0);
// };
// div.onmouseout = function(){
// start1(-200);
// }
// };
// var timer=null;
// function start1(target) {
// clearInterval(timer);
// var div = document.getElementById("div");
// timer = setInterval(function () {
// var speed = (target - div.offsetLeft)/20;
// console.log(div.offsetLeft);
// //这里值得注意的是，因为CSS中的像素大小都是整数的，所以一定要记得把speed取整，且应该是向上取整的，
// //而对于正数，向上取整为 Math.ceil(),而对于负数要用Math.floor()
// if(speed>0)
// speed = Math.ceil(speed);
// else
// speed = Math.floor(speed);
// //用来判断当达到目标值时的操作
// if (div.offsetLeft == target) {
// clearInterval(timer);
// } else {
// div.style.left = div.offsetLeft + speed + "px";
// }
// }, 30)
// } </script>
</head>
<body>
<div id="div"><span id="span1">cccccccc</span></div>
<div id="div2">jjjj</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#div ul {
list-style: none;
}
#div ul li{
width:200px;
height:200px;
margin:40px;
background: red;
filter:alpha(opacity:30);
opacity:0.3; } /*div{*/
/*background:red;*/
/*width:200px;*/
/*height:200px;*/
/*filter:alpha(opacity:30);*/
/*opacity:0.3;*/
/*margin:30px;*/
/*}*/
</style>
<script>
window.onload = function () {
var div = document.getElementsByTagName("li");
for (var i = 0;i<div.length;i++){
div[i].timer = null;//这里应该是为每一个元素都定义一个timer,不然后面每个元素都会争抢timer,导致不好的效果。
div[i].onmouseover = function () {
start (this,400);
};
div[i].onmouseout = function () {
start(this,200);
}
}
};
//var timer = null;这里就不能再像这样定义一个公用的timer了，而是要为每一个元素都定义一个timer
function start(obj,target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = (target - obj.offsetWidth)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(target == obj.offsetWidth)
clearInterval(timer);
else
obj.style.width = obj.offsetWidth + speed + "px";
},30);
} // window.onload = function () {
// var div = document.getElementsByTagName("div");
// for(var i=0;i<div.length;i++){
// div[i].alpha = 30;
// div[i].timer = null;
// div[i].onmouseover = function () {
// start(this,100);
// };
// div[i].onmouseout = function () {
// start(this,30);
// };
// }
// };
// function start(obj,target){
// console.log("123");
// var speed = 0;
// clearInterval(obj.timer);
// obj.timer = setInterval(function () {
// if(obj.alpha > target)//如果当前的透明度大于目标值
// { speed = -10;}
// else
// { speed = 10;}
//
// if(target == obj.alpha)
// {clearInterval(obj.timer);}
// else{
// obj.alpah += speed;
// obj.style.filter = "alpha(opacity:" + obj.alpah + ");";
// obj.style.opacity = obj.alpha/100;
// }
// },30);
// } </script>
</head>
<body>
<div id="div">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--<div></div>-->
<!--<div></div>-->
<!--<div></div>-->
</body>
</html>
<html>
<head>
<meta charest="urf-8">
<title>test</title>
<style>
#div ul {
list-style: none;
}
#div ul li{
width:200px;
height:200px;
margin:40px;
background: red;
filter:alpha(opacity:30);
opacity:0.3;
border:10px solid #000;
}
</style>
<script>
//window.onload = function () {
// var div = document.getElementsByTagName("li");
// for (var i=0;i<div.length;i++){
// div[i].timer = null;
// div[i].onmouseover = function () {
// start(this,"width",400);
// };
// div[i].onmouseout = function () {
// start(this,"width",200);
// }
// }
//};
//function start(obj,attr,target) {
// clearInterval(obj.timer);
// obj.timer = setInterval(function () {
// var icur = parseInt(getStyle(obj,attr));
// var speed = (target - icur)/8;
// speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// if(target = parseInt(icur))
// clearInterval(timer);
// else
// obj.style[attr] = icur + speed + "px";
// },30)
//}
//function getStyle(obj,attr) {
// if(obj.currentStyle)
// return obj.currentStyle;
// else
// return getComputedStyle(obj,false)[attr];
//} window.onload=function(){
var aLi=document.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++){
aLi[i].timer=null;
aLi[0].onmouseover=function(){
startMove(this,"height",400);
}
aLi[0].onmouseout=function(){
startMove(this,"height",200);
}
}
aLi[1].onmouseover=function(){
startMove(this,"width",400);
}
aLi[1].onmouseout=function(){
startMove(this,"width",200);
} }
//var timer=null;
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var icur=parseInt(getStyle(obj,attr));
var speed=(iTarget-icur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(icur==iTarget){
clearInterval(obj.timer);
}
else{
obj.style[attr]=icur+speed+"px";
}
},30);
}
function getStyle(obj,attr) {
if(obj.currentStyle)
return obj.currentStyle;
else
return getComputedStyle(obj,false)[attr];
}
</script>
</head>
<body>
<div id="div">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
较为完整的代码
function getStyle(obj,attr) {
if(obj.currentStyle)
return obj.currentStyle;
else
return getComputedStyle(obj,false)[attr];
}
window.onload=function(){
var aLi=document.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++){
aLi[i].timer=null;
aLi[0].onmouseover=function(){
startMove(this,"height",400);
}
aLi[0].onmouseout=function(){
startMove(this,"height",200);
}
}
aLi[1].onmouseover=function(){
startMove(this,"opacity",100);
}
aLi[1].onmouseout=function(){
startMove(this,"opacity",30);
}
}
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var icur = 0;
if(attr == "opacity"){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);//本来最大是1的，但是习惯用最大为100的
}else{
icur = parseInt(getStyle(obj,attr));
}
var speed = (iTarget-icur)/8;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if(icur == iTarget){
clearInterval(obj.timer);
}else{
if(attr == "opacity"){
obj.style.filter = "alpha(opacity:"+(icur+speed)+")";//针对IE
obj.style.opacity = (icur+speed)/100;//针对firefox和chrome
}else{
obj.style[attr] = icur + speed + "px";
}
}
},30)
}
完整代码
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true; //标志所有运动是否到达目标值
for(var attr in json){
var curr=0; //获取当前的值，设置为0下面进行赋值
//判断是否为透明度
if(attr=='opacity'){
curr=Math.round(parseFloat(getStyle(obj,attr))*100); //对透明度处理
}else{
curr=parseInt(getStyle(obj,attr)); //对普通的宽高处理
}
//移动速度处理
var speed=0;
speed=(json[attr]-curr)/8; //json[attr]为属性值即目标值
speed=speed>0?Math.ceil(speed):Math.floor(speed); //取整数，将速度取整从而达到目标值
//检测停止
if(curr!= json[attr]){
flag=false;//检测为false则继续下面的操作
}
if (attr=='opacity') {
obj.style.filter='alpha(opacity:'+(curr+speed)+");//IE浏览器
obj.style.opacity=(curr+speed)/100;//firefox浏览器
}else{
obj.style[attr]=curr+speed+'px';
}
}
if(flag){ //检测为true则继续下面的操作
clearInterval(obj.timer);
if(fn){ //检测是否有回调函数，有就执行
fn();
}
}
},30);
}
//取样式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]; //IE取样式
}else{
return getComputedStyle(obj,false)[attr];
}
}
1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性，而style.width是可读写的。 3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。 4.style.width仅能返回以style方式定义的内部样式表的width属性值。(div.style.width可以获取到内联设置中width的值，获取到内嵌中的是width+padding+border) 例如：
#div{width:200px;height:200px; border:1px solid #ccc;}这样一个样式，当我们使用var div = document.getElementById("div");div.offsetWidth的值为202，200+1+1,；所以当我们使用div.style.width = div.offsetWidth- 1 + "px"时结果是宽度在增大，而不是减小。所以此时我们可以使用获取样式的方法来只获取到样式定义中的width（200）
function getStyle(obj,attr){
if(obj.currentStyle){
//currentStyle针对IE浏览器；
return obj.currentStyle[attr];}
else{return getComputedStyle(obj,flase)[attr];}}
//getComputedStyle 针对Firefox浏览器
这样我们就可以这样使用了，div.style.width = parseInt(getStyle(div,"width")) - 1 + "px";//其中parseInt就是将字符串转换Wie整形的数字。
同样这个方法是可以获取到其他的属性的，比如：div.style.font-size = parseInt(getStyle(div,"font-size")) - 1 + "px";等
js动画学习笔记的更多相关文章
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
- Android动画学习笔记-Android Animation
Android动画学习笔记-Android Animation 3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中 ...
- js再学习笔记
#js再学习笔记 ##基本 1.js严格区分大小写 2.js末尾的分号可加,也可不加 3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...
- JS数组学习笔记
原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...
- Unity Shader序列帧动画学习笔记
Unity Shader序列帧动画学习笔记 关于无限播放序列帧动画的一点问题 在学shader的序列帧动画时,书上写了这样一段代码: fixed4 frag(v2f i){ // 获得整数时间 flo ...
- Knockout.js快速学习笔记
原创纯手写快速学习笔记(对官方文档的二手理解),更推荐有时间的话读官方文档 框架简介(Knockout版本:3.4.1 ) Knockout(以下简称KO)是一个MVVM(Model-View-Vie ...
- handlebars.js基础学习笔记
最近在帮学校做个课程网站,就有人推荐用jquery+ajax+handlebars做网站前端,刚接触发现挺高大上的,于是就把一些基础学习笔记记录下来啦. 1.引用文件: jquery.js文件下载:h ...
- JS&ES6学习笔记（持续更新）
ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
随机推荐
- A*算法实现
A* 算法非常简单.算法维护两个集合:OPEN 集和 CLOSED 集.OPEN 集包含待检测节点.初始状态,OPEN集仅包含一个元素:开始位置.CLOSED集包含已检测节点.初始状态,CLOSED集 ...
- 利用Hierarchy Viewer优化布局
好久没更新博客了,趁着清明来写点什么. 今天来讲下如何使用android中提供的工具优化我们的布局.首先我们写一个最简单的框架布局. <?xml version="1.0" ...
- apache RewriteCond RewriteRule
http://www.rockbb.com/blog/?p=319 http://www.cnblogs.com/scgw/archive/2011/12/10/2283029.html 我的理解:当 ...
- Hibernate中用纯SQL查询，并通过hibernate分页返回List<对象>
@SuppressWarnings("unchecked") public List<Article> getPageQueryList(final int pageN ...
- 阿里云CentOS安装firefox闪退
安装完vnc远程连接,接着安装firefox,点firefox木有任何提示就退 直接命令下运行,发现错误如下: /usr/lib/firefox/firefox: symbol lookup erro ...
- FragmentActivity与Fragment两者交互方法简介(转)
FragmentActivity与Fragment两者交互方法简介 分类: Fragment 2014-07-07 18:17 88人阅读 评论(0) 收藏 举报 在Android4.0后很多时候我们 ...
- pycharm 安装venv的依赖包
(venv)$ pip install -r requirements.txt
- 怎么把一个int数组转化为char型数组？？
/* 234 Press any key to continue */ #include <stdio.h> int main() { ,n; ]; ; num; ++n) { s[n] ...
- DWR整合之JSF
DWR 与 JSF DWR 包括两个 JSF 的扩展点,一个创造器和一个 ServletFilter. 1.JSF Creator DWR1.1 中有一个体验版的 JsfCreator.你可以在 dw ...
- HDU 5166 Missing number 简单数论
Missing number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) [ ...