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 相关文章推荐
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 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
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
如何快速上手Vuex
2017/02/14 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
python结合API实现即时天气信息
2016/01/19 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
创业计划书的主要内容有哪些
2014/01/29 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
中小企业员工手册范本
2015/05/14 职场文书
员工福利申请报告
2015/05/15 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL