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

 更新时间:2015年11月29日 10:12:35   作者:坐观风云  
这篇文章主要介绍了javascript实现网页中涉及的简易运动,比如改变宽高、透明度、位置等,感兴趣的小伙伴们可以参考一下

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

兼容: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简易运动有所启发。

相关文章

  • Layui table field初始化加载时进行隐藏的方法

    Layui table field初始化加载时进行隐藏的方法

    今天小编就为大家分享一篇Layui table field初始化加载时进行隐藏的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 浅析JavaScript中预编译的原理与流程

    浅析JavaScript中预编译的原理与流程

    这篇文章主要为大家详细介绍了JavaScript中预编译的原理与流程的相关知识,文中的示例代码讲解详细,对我们深入了解JavaScript有一定的帮助,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • javascript中Number对象的toString()方法分析

    javascript中Number对象的toString()方法分析

    这篇文章主要介绍了javascript中Number对象的toString()方法,较为详细的分析了toString()方法的用法及注意事项,非常具有实用价值,需要的朋友可以参考下
    2014-12-12
  • Javascript点击按钮随机改变数字与其颜色

    Javascript点击按钮随机改变数字与其颜色

    这篇文章主要介绍了Javascript点击按钮随机改变数字和其字体的颜色,实现后的效果很不错,具有一定的参考价值,有需要的可以参考借鉴,下面来一起看看。
    2016-09-09
  • 通过手写instanceof理解原型链示例详解

    通过手写instanceof理解原型链示例详解

    这篇文章主要为大家介绍了通过手写instanceof理解原型链示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • JS创建或填充任意长度数组的小技巧汇总

    JS创建或填充任意长度数组的小技巧汇总

    在JavaScript 中,我们往往会遇到需要使用某些默认值来填充数组的情况,那么都有哪些方式可以完成这样的任务呢?这篇文章主要给大家介绍了关于JS创建或填充任意长度数组的小技巧,需要的朋友可以参考下
    2021-10-10
  • js实现div色块拖动录制

    js实现div色块拖动录制

    这篇文章主要为大家详细介绍了js实现div色块拖动录制,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • 微信小程序海报绘制示例讲解

    微信小程序海报绘制示例讲解

    这篇文章主要介绍了微信小程序海报绘制示例,海报分享功能在许多应用中应该是很常见的,因为它作为一种常用的应用推广和拉新的方式,下面我们来通过案例学习如何绘制
    2024-05-05
  • JS正则中的RegExp对象对象

    JS正则中的RegExp对象对象

    JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能,每一条正则表达式模式对应一个RegExp实例
    2012-11-11
  • 详解动画插件wow.js的使用方法

    详解动画插件wow.js的使用方法

    本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论