javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)


Posted in Javascript onNovember 29, 2015

平时工作中写网页涉及的运动往往都非常简单,比如改变宽高,透明度,位置,是最常用的几种形式,为了省事,整合了下,于是就有了下面这个东东:

兼容:IE系列、chrome、firefox、opera、Safari、360

/*
 javascript简易运动
 
 Move.action(dom对象,json格式属性值对,缓动参考值,回调方法)

 示例:
 var box = document.getElementById('Ele');
 Move.action(box,{width:500,height:200,left:200,top:100,marginLeft:10,opacity:.5},5,function(){
  console.log('end');
 });

*/


var Move = {

 version: '1.5',

 //判断是否空对象
 isEmptyObject: function(obj) {
 for (var attr in obj) {
 return false;
 }
 return true;
 },
 //取CSS样式值
 getStyle: function(obj, attr) {
 if (obj.currentStyle) { //IE
 return obj.currentStyle[attr];
 } else {
 return getComputedStyle(obj, null)[attr];
 }
 },
 //运动
 action: function(obj, json, sv, callback) {

 _this = this;

 //obj是否为空
 if (_this.isEmptyObject(obj)) {
 return false;
 }

 //运动开始 
 clearInterval(obj.timer);
 obj.timer = setInterval(function() {
 var isAllCompleted = true, //假设全部运动都完成了
 speed, //速度
 attrValue, //当前值
 targetV; //目标值
 for (attr in json) {
 attrValue = _this.getStyle(obj, attr);
 switch (attr) {
  case 'opacity':
  attrValue = Math.round((isNaN(parseFloat(attrValue)) ? 1 : parseFloat(attrValue)) * 100);
  speed = (json[attr] * 100 - attrValue) / (sv || 4);
  targetV = json[attr] * 100;
  break;
  default:
  attrValue = isNaN(parseInt(attrValue)) ? 0 : parseInt(attrValue);
  speed = (json[attr] - attrValue) / (sv || 4);
  targetV = json[attr];
 }

 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 //如果循环过程中存在尚未结束的运动,isAllCompleted为假
 if (attrValue != targetV) {
  isAllCompleted = false;
 }

 switch (attr) {
  case 'opacity':
  {
  obj.style.filter = "alpha(opacity=" + (attrValue + speed) + ")";
  obj.style.opacity = (attrValue + speed) / 100;
  };
  break;
  default:
  obj.style[attr] = attrValue + speed + 'px';
 }
 }

 //所有循环结束后,只有当全部运动结束后(isAllCompleted=true)时才关闭定时器
 if (isAllCompleted) {
 clearInterval(obj.timer);

 if (typeof callback === 'function') {
  callback();
 }

 }
 }, 30);
 }

};

以上就是描述了javascript实现网页中涉及的简易运动的方法,希望对大家实现javascript简易运动有所启发。

Javascript 相关文章推荐
Javascript中暂停功能的实现代码
Mar 04 Javascript
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
原生javascript实现分页效果
Apr 21 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
通用javascript代码判断版本号是否在版本范围之间
Nov 29 #Javascript
jQuery如何使用自动触发事件trigger
Nov 29 #Javascript
js性能优化技巧
Nov 29 #Javascript
javascript实现C语言经典程序题
Nov 29 #Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 #Javascript
整理Javascript基础入门学习笔记
Nov 29 #Javascript
jquery+json实现数据二级联动的方法
Nov 28 #Javascript
You might like
如何去掉文章里的 html 语法
2006/10/09 PHP
PHP程序员编程注意事项
2008/04/10 PHP
php 远程图片保存到本地的函数类
2008/12/08 PHP
php中hashtable实现示例分享
2014/02/13 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
php事件驱动化设计详解
2016/11/10 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python检测远程udp端口是否打开的方法
2015/03/14 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
vue常用指令代码实例总结
2020/03/16 Python
学习Python需要哪些工具
2020/09/04 Python
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
促销活动总结
2014/04/28 职场文书
班级出游活动计划书
2014/08/15 职场文书
2014年外联部工作总结
2014/11/17 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
自我工作评价范文
2015/03/06 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python