javascript多种动画传参
来源:互联网 发布:c语言阶乘怎么写 编辑:程序博客网 时间:2024/06/06 17:47
html代码:
<div id="oDiv" class="base bgred abc ">abc</div>
css样式:
<style type="text/css"> .bgred{background-color:red} .bggreen{background-color: green} .base{font-size:12px;border:1px solid blue;height:150px;padding:5px;position: absolute;left:150px;top:150px; }</style>
javascript:
<script type="text/javascript"> function $(id){ return document.getElementById(id) } window.onload=function(){ var oDiv=$("oDiv"); /*animate(oDiv,"width",100,200,900,Quad,"px") animate(oDiv,"top",100,50,900,Quad,"px") animate(oDiv,"left",100,50,900,Quad,"px")*/ animate(oDiv,{//传参方式升了代码 "width":100, "top":100, "left":100 },{ "width":200, "top":50, "left":50 },900,Quad,"px" ) } //curTime:当前时间,即动画已经进行了多长时间,开始时间为0 //start 开始值 //dur 动画持续多长时间 //alter总的变化量 //fx是那种动画效果 //dw是 单位文字大小有时候em,宽高px //left 从100,增加到150,增加了50 function animate(o,start,alter,dur,fx,dw){ var curTime=0; var t=setInterval(function(){ if(curTime>=dur) clearInterval(t) for(var i in start){ o.style[i]=fx(start[i],alter[i],curTime,dur)+dw } curTime+=50 },50) } function Linear(start,alter,curTime,dur){//最简单的线性变换,即匀速运动 return start+curTime/dur*alter } function Quad(start,alter,curTime,dur){//加速运动 return start+Math.pow(curTime/dur,2)*alter }</script>
阅读全文
0 0
- javascript多种动画传参
- 多种动画效果
- 多种动画效果AnimationView
- 100多种javascript大全
- Javascript兼容多种浏览器
- Javascript兼容多种浏览器
- javascript 兼容多种浏览器
- Javascript兼容多种浏览器
- Javascript兼容多种浏览器
- javascript多种小技巧
- *Javascript兼容多种浏览器*
- 30多种iOS常用动画
- IOS 30多种动画详解
- Android多种View动画:EasyAndroidAnimations
- Android多种View动画:EasyAndroidAnimations
- javascript动画
- JavaScript 动画
- JavaScript 动画
- git push报错error: failed to push some refs to 'git@github.com:
- 高精度,贪心
- lua elseif不能有空格
- 牛客网笔试题目练习------分苹果
- objc_msgSend()报错Too many arguments to function call ,expected 0,have3
- javascript多种动画传参
- 介绍一个个人博客中的几篇c++文章
- Annontation注解的应用及介绍
- 笔记|《简明Python教程》:编程小白的第一本python入门书
- ReactJs入门教程
- java excel导入数据库
- Mach-O的动态链接相关知识
- 五(2)、JSP——JavaBean例子
- 59. Spiral Matrix II