js动画2 多物体运动
2015-07-20 21:01
711 查看
速度渐变:
代码如下:
透明度渐变:
代码:
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> ul,li{ list-style:none} ul li{ width:200px; height:100px; background:yellow; margin-bottom:20px; } </style> <script> window.onload = function(){ var aLi = document.getElementsByTagName('li'); for(var i =0;i<aLi.length;i++){ aLi[i].timer = null; aLi[i].onmouseover = function(){ startMove(this,400); } aLi[i].onmouseout = function(){ startMove(this,200); } } } function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (iTarget-obj.offsetWidth)/8; speed = speed >0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth == iTarget){ clearInterval(obj.timer); } else{ obj.style.width = obj.offsetWidth + speed + 'px'; } },30) } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
透明度渐变:
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ padding:0; margin:0 } div{ width:200px; height:200px; background:red; margin:20px; filter:alpha(opacity:30); opacity:0.3; float:left; } </style> <script> window.onload = function(){ var oDiv = document.getElementsByTagName('div'); for(var i=0;i<oDiv.length;i++){ oDiv[i].alpha = 30; oDiv[i].onmouseover = function(){ startMove(this,100); } oDiv[i].onmouseout = function(){ startMove(this,30); } } } //var timer = null; //var alpha = 30; function startMove(obj,seat){ clearInterval(obj.timer); //var oDiv = document.getElementById('div1'); obj.timer = setInterval(function(){ if(obj.alpha > seat){ speed = -10; } else{ speed = 10; } if(obj.alpha == seat){ clearInterval(obj.timer); } else{ obj.alpha += speed; obj.style.filter = 'alpha(opacity:'+obj.alpha+')'; obj.style.opacity = obj.alpha/100; } },30) } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </body> </html>
相关文章推荐
- JS
- 简单一招实现json数据可视化
- JavaScript产生随机数并对数据进行简单的运算
- Json解析数据
- Kettle Excel To JSON
- 转:Errors occurred during the build. Errors running builder 'JavaScript Validator'
- JavaScript判断字符串是否合法
- jackson实体类转换json大小写及空字段忽略
- JavaScript页面的简单运算
- 高性能JavaScript 达夫设备
- JavaScript 实现简单二级联动
- js字符串加密的几种方法
- 为了圣像画系统V1.0Beta版(javascript)-GIS520社区
- javascript基本包装类型学习笔记之----基本包装类型的基本特点
- 使用javascript实现html文字不可选
- js获取屏幕(设备)宽高
- HTML 调用iscroll.js主要事项
- javascript window.showModalDialog不兼容goole解决方案
- javascript修改html元素的class实例,时间修改样式
- javascript正则表达式小数类型