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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
JS实现可视化音频效果的实例代码
Jan 16 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
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
ES6的新特性概览
2016/03/10 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
js 函数式编程学习笔记
2017/03/25 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
Python安装第三方库的3种方法
2015/06/21 Python
Python打印斐波拉契数列实例
2015/07/07 Python
Python3 处理JSON的实例详解
2017/10/29 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
什么是.net的Remoting技术
2016/07/08 面试题
Linux文件操作命令都有哪些
2016/07/23 面试题
护士优质服务演讲稿
2014/08/26 职场文书
大学体育课感想
2015/08/10 职场文书