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 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
python实现dict版图遍历示例
2014/02/19 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
存储过程和函数的区别
2013/05/28 面试题
煤矿安全生产月活动总结
2014/07/05 职场文书
家庭困难证明
2014/10/12 职场文书
医生个人年终总结
2015/02/28 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
Golang中异常处理机制详解
2021/06/08 Golang
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle