javascript运动框架用法实例分析(实现放大与缩小效果)


Posted in Javascript onJanuary 08, 2016

本文实例讲述了javascript运动框架用法。分享给大家供大家参考,具体如下:

该运动框架可以实现多物体任意值运动

运行效果截图如下:

javascript运动框架用法实例分析(实现放大与缩小效果)

例子:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>运动框架</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px; opacity:0.3; filter:alpha(opacity=30);}
</style>
<script>
window.onload = function()
{
 var oBtn = document.getElementById('btn1');
 var oDiv = document.getElementById('div1');
 oBtn.onclick = function()
 {
 startMove(oDiv, {width:200, height:200, opacity:100}, function(){
  startMove(oDiv, {width:100, height:100, opacity:30});
 });
 };
};
function getStyle(obj, attr)
{
 if(obj.currentStyle){
 return obj.currentStyle[attr]; 
 }else{
 return getComputedStyle(obj, false)[attr];
 }
}
function startMove(obj, json, fn)
{
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 var bStop = true;
 for(var attr in json){
  var iCur = 0;
  if(attr == 'opacity'){
  iCur = Math.round(parseFloat(getStyle(obj, attr))*100);
  }else{
  iCur = parseInt(getStyle(obj, attr));
  }
  var iSpeed = (json[attr] - iCur)/8;
  iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
  if(iCur != json[attr]){
  bStop = false;
  }  
  if(attr == 'opacity'){
  obj.style.filter = 'alpha(opacity='+(iCur+iSpeed)+')';
  obj.style.opacity = (iCur+iSpeed)/100;
  }else{
  obj.style[attr] = iCur + iSpeed + 'px';
  }  
 }
 if(bStop){
  clearInterval(obj.timer);
  if(fn){
  fn();
  }
 }
 }, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="运动"/>
<div id="div1"></div>
</body>
</html>

更多关于JavaScript运动效果相关内容可查看本站专题:《JavaScript运动效果与技巧汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript中的变量是传值还是传址的?
Apr 19 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
ES6中定义类和对象的方法示例
Jul 31 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
jquery实现简单的遮罩层
Jan 08 #Javascript
javascript多物体运动实现方法分析
Jan 08 #Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 #Javascript
javascript匀速运动实现方法分析
Jan 08 #Javascript
js如何改变文章的字体大小
Jan 08 #Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 #Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 #Javascript
You might like
php弹出提示框的是实例写法
2019/09/26 PHP
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
50行Python代码实现人脸检测功能
2018/01/23 Python
Python和Go语言的区别总结
2019/02/20 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
Python通过socketserver处理多个链接
2020/03/18 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
写好自荐信要注意的问题
2013/11/10 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
狼和鹿教学反思
2014/02/05 职场文书
《王二小》教学反思
2014/02/27 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
学生偷窃检讨书
2014/09/25 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
金秋助学感谢信
2015/01/21 职场文书
会议欢迎词范文
2015/01/27 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP
Python使用DFA算法过滤内容敏感词
2022/04/22 Python