js动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ani</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
ul{
list-style: none; }
ul li{
height:200px;
width:200px;
border:4px solid #;
margin-bottom:20px;
background: yellow;
}
#list2{
filter: alpha(opacity:);
opacity: 0.3;
}
</style>
<script>
window.onload=function(){ //var list=document.getElementsByTagName("li");
var list0=document.getElementById("list0");
var list1=document.getElementById("list1");
var list2=document.getElementById("list2");
var list3=document.getElementById("list3");
var list4=document.getElementById("list4");
/*for(var i=0;i<list.length;i++){
list[i].timer=null;
list[i].=function(){
startmove(this,400); }
list[i].onmouseout=function(){
startmove(this,200);
}
} */
list0.onmouseover=function(){
startmove(this,"height",);}
list0.onmouseout=function(){
startmove(this,"height",);}
list1.onmouseover=function(){
startmove(this,"width",);}
list1.onmouseout=function(){
startmove(this,"width",);}
list2.onmouseover=function(){
startmove(this,"opacity",);}
list2.onmouseout=function(){
startmove(this,"opacity",);}
list3.onmouseover=function(){
startmove(list3,"height",,function(){
startmove(list3,"width",,function(){
startmove(list3,"opacity",);
});
});}
list3.onmouseout=function(){
startmove(list3,"opacity",,function(){
startmove(list3,"width",,function(){
startmove(list3,"height",);
});
});}
list4.onmouseover=function(){
startmove1(this,{height :,width :,opacity:});}
list4.onmouseout=function(){
startmove1(this,{height :,width :,opacity:});}
function startmove1(obj,json,fn){
var flag=true;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var i in json){
if(i=="opacity"){
var curr=Math.round(parseFloat(getStyle(obj,i))*);
alert(curr);
}
else{
var curr=parseInt(getStyle(obj,i));}
var speed=(json[i]-curr)/;
speed=speed>?Math.ceil(speed):Math.floor(speed);
if(curr!=json[i]){
flag=false;}
if(i=="opacity"){
obj.style.filter="alpha(opacity:"+(curr+speed)+")";
obj.style.opacity=(curr+speed)/;
}
else{
obj.style[i]=curr+speed+"px";} if(flag){
clearInterval(obj.timer);
}
if(fn){
fn(); }
}
},);
}
function startmove(obj,arr,iTarge,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(arr=="opacity"){
var curr=Math.round(parseFloat(getStyle(obj,arr))*);
alert(curr);
}
else{
var curr=parseInt(getStyle(obj,arr));}
var speed=(iTarge-curr)/;
speed=speed>?Math.ceil(speed):Math.floor(speed);
if(curr==iTarge){
clearInterval(obj.timer);
if(fn){
fn();
}
}
else{
if(arr=="opacity"){
obj.style.filter="alpha(opacity:"+(curr+speed)+")";
obj.style.opacity=(curr+speed)/;
}
else{
obj.style[arr]=curr+speed+"px";}
}
},);
}
function getStyle(obj,arr){
if(obj.currentStyle){
//alert(obj.currentStyle[arr]);
return obj.currentStyle[arr];
}
else{
return getComputedStyle(obj,false)[arr];
}
}
}
</script>
</head>
<body>
<div><ul>
<li id="list0"></li>
<li id="list1"></li>
<li id="list2"></li>
<li id="list3"></li>
<li id="list4"></li>
</ul></div>
</body>
</html>
五个li前三个都是只改变高、宽、透明度中的其中一个。第四个是链式动画，当鼠标移入的时候先改变高度再改变宽度，最后再改变透明度；当鼠标移出的时候反序恢复，先恢复透明度与，再恢复宽度最后恢复高度。最后一个li是同时运动，使得元素的高宽和透明度同时发生改变。为了实现同时改变引用了json。
json的格式是{a:b，c:d......}a和c代表元素，相当于object，b 和d代表数值，相当于iTarget。通过对json的for-in循环实现元素的同时运动。
json 的for-in循环的格式是for(var i in json){.....}其中i指的是 元素名，json[i]代表元素名对应的数值。
对于已经可以实现高宽运动的startmove函数，为了让元素通过startmove同时实现对透明度的改变需要对元素名进行判断，如果是opacity就特殊处理，否则正常处理。
对于元素的链式动画，需要对startmove的形参中多添加一个代表函数的形参。然后在清除定时器之前判断，如果有此实参传入就先清除定时器然后执行此函数。
对于元素的同时运动，将要同时执行的要求放入json中，然后通过for循环执行运动。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ani</title><style type="text/css">*{margin:0px;padding:0px;}ul{list-style: none; }ul li{height:200px;width:200px; border:4px solid #233;margin-bottom:20px;background: yellow;}#list2{filter: alpha(opacity:30);opacity: 0.3;}</style><script>window.onload=function(){//var list=document.getElementsByTagName("li"); var list0=document.getElementById("list0"); var list1=document.getElementById("list1"); var list2=document.getElementById("list2"); var list3=document.getElementById("list3"); var list4=document.getElementById("list4");/*for(var i=0;i<list.length;i++){ list[i].timer=null;list[i].=function(){startmove(this,400);}list[i].onmouseout=function(){startmove(this,200);}}*/ list0.onmouseover=function(){ startmove(this,"height",400);} list0.onmouseout=function(){ startmove(this,"height",200);} list1.onmouseover=function(){ startmove(this,"width",400);} list1.onmouseout=function(){ startmove(this,"width",200);} list2.onmouseover=function(){ startmove(this,"opacity",100);} list2.onmouseout=function(){ startmove(this,"opacity",30);} list3.onmouseover=function(){ startmove(list3,"height",400,function(){ startmove(list3,"width",400,function(){ startmove(list3,"opacity",30); }); });} list3.onmouseout=function(){ startmove(list3,"opacity",100,function(){ startmove(list3,"width",200,function(){ startmove(list3,"height",200); }); });} list4.onmouseover=function(){ startmove1(this,{height :400,width :400,opacity:30});} list4.onmouseout=function(){ startmove1(this,{height :200,width :200,opacity:100});}function startmove1(obj,json,fn){var flag=true; clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var i in json){ if(i=="opacity"){ var curr=Math.round(parseFloat(getStyle(obj,i))*100); alert(curr); } else{ var curr=parseInt(getStyle(obj,i));} var speed=(json[i]-curr)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr!=json[i]){ flag=false;} if(i=="opacity"){ obj.style.filter="alpha(opacity:"+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; } else{ obj.style[i]=curr+speed+"px";} if(flag){ clearInterval(obj.timer); } if(fn){ fn(); }} },30); } function startmove(obj,arr,iTarge,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ if(arr=="opacity"){ var curr=Math.round(parseFloat(getStyle(obj,arr))*100); alert(curr); } else{ var curr=parseInt(getStyle(obj,arr));} var speed=(iTarge-curr)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr==iTarge){ clearInterval(obj.timer); if(fn){ fn(); } } else{ if(arr=="opacity"){ obj.style.filter="alpha(opacity:"+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; } else{ obj.style[arr]=curr+speed+"px";} } },30); } function getStyle(obj,arr){ if(obj.currentStyle){ //alert(obj.currentStyle[arr]); return obj.currentStyle[arr]; } else{ return getComputedStyle(obj,false)[arr]; } }}</script></head><body><div><ul><li id="list0"></li><li id="list1"></li><li id="list2"></li><li id="list3"></li><li id="list4"></li></ul></div></body></html>
js动画的更多相关文章
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- CSS VS JS动画，哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- JS动画理论
动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
- css与 js动画 优缺点比较
我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...
- [学习笔记]js动画实现方法，作用域，闭包
一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...
- css3动画与js动画的一些理解
http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...
- js动画（四）
终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...
- css动画特效与js动画特效（一）------2017-03-24
1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
随机推荐
- 负载均衡-基础-一致性哈希算法及java实现
一致性hash算法,参考: http://www.blogjava.net/hello-yun/archive/2012/10/10/389289.html 针对这篇文章,加入了自己的理解,在原有的代 ...
- BZOJ 题目整理
bzoj 500题纪念 总结一发题目吧,挑几道题整理一下,(方便拖板子) 1039:每条线段与前一条线段之间的长度的比例和夹角不会因平移.旋转.放缩而改变,所以将每条轨迹改为比例和夹角的序列,复制一份 ...
- Linux kernel 文件夹说明
Linux 内核代码的目录结构 arch: 包含和硬件体系相关的的代码,每种硬件平台占一个相应的目录,如i386,arm, arm64, powerpc,mips等. block: 块设备驱动程序I/ ...
- WebForm控件--2016年12月29日
简单控件 1.Label => <span id="Label1">Label1</span> 2.Literal => Text 填 ...
- bootstrap - 响应式标题栏
先要拆分: .navbar 先变成相对定位 设置最小高度为50px: 设置底部边距为20px 然后设置一个 透明边框! 边框倒角 4px //@media (min-width:768px) - ...
- connect mysql from another host
vim /etc/mysql/my.cnf bind-address = 0.0.0.0 /etc/init.d/mysql restart mysql -uroot -p1234 # grant a ...
- 不一样的dynamic解析json 万能方法
写过javascript的人都知道js解析json 1:(JSON) 字符串转换为对象. var str = '{"name":"lsw","hobb ...
- java动态调用webservice
cxf方式 public static Object[] invokeRemoteMethod(String url, String method, Object[] parameters) { Ja ...
- OpenGL glMultMatrixf() glPushMatrix() glPushMatrix()浅析
我在之前的博客中曾提到过,OpenGL中坐标是采用行向量表示的,与之相对应的是,在矩阵变换中使用的是变换矩阵的转置,并且使用的是后乘的方式.本文直接使用下面的代码来及其后的图示来解释函数 p,li { ...
- myeclipse实现包的分层显示