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 ...
随机推荐
- unity 创建NGUI字体
1.NGUI -> Open -> Font Maker 打开FoontMaker窗口. 2.点Source选择.ttf字体,必须是中文命令,否则会出错. 3.点Custom单选按钮,输入 ...
- java下发电子邮件demo
在实际项目中会遇到需要使用邮件注册,或者是使用邮件找回密码等操作,需要使用到邮件发送功能. 其实邮件的发送主要是依赖于邮件协议,只要能实现邮件协议,那么发送邮件其实还是很容易的.这一步java类库已经 ...
- 帝国cms文章内容tags关键词设置调用方法以及tags静态化
说实话帝国cms用起来真的不好找一些功能,就比如说帝国cms的tag标签调用.需要注意的是帝国CMS文章的关键词和tags标签并非一码事,关键词标签是设置文章的关键词的,是用来给搜索引擎说明本篇文章的 ...
- Windows查看端口被哪个进程占用
命令 查看PID: netstat -ano|findstr 端口号 查看进程名称: tasklist|findstr PID 结束进程: taskkill -F -PID PID号 配图详解: 1. ...
- CF div2 D BFS
http://codeforces.com/contest/676/problem/D 题目大意: 勇者去迷宫杀恶龙.迷宫是有n*m的方格子组成的.迷宫上有各种记号,这些记号表达着能走的方向.当且仅当 ...
- android 手势识别学习
引自http://www.cnblogs.com/android100/p/android-hand.html http://blog.csdn.net/jiangshide/article/d ...
- 为图片存储而作——记一次UEditor源码的修改
本文版权归博客园和作者吴双本人共同所有. 写在前面 这是一个数据爆发的网络时代,大家习惯于浏览图文直观带给我们的快速信息.大图片的存储和浏览经常会成为Web服务器的瓶颈.试想如果你的Web服务器依然 ...
- 文件夹添加 IIS 应用程序池用户权限
http://serverfault.com/questions/81165/how-to-assign-permissions-to-applicationpoolidentity-account ...
- FZU Problem 2213 Common Tangents
其实是不太好意思往博客上放的,因为是一道巨水的题,但是我却错了一次,没有判断重合,放上还是为了警示自己,尽量不要在水题上罚时 #include<iostream> #include< ...
- PAT (Advanced Level) 1091. Acute Stroke (30)
BFS求连通块.递归会爆栈. #include<cstdio> #include<cstring> #include<cmath> #include<algo ...