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 相关文章推荐
JS通过相同的name进行表格求和代码
Aug 18 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
VUE中的无限循环代码解析
Sep 22 Javascript
页面点击小红心js实现代码
May 26 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
详解vue 图片上传功能
Apr 30 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
原生js 实现表单验证功能
Feb 08 Javascript
通用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
php Xdebug的安装与使用详解
2013/06/20 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
iview实现图片上传功能
2020/06/29 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
用Python写一个无界面的2048小游戏
2016/05/24 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
Python简单实现控制电脑的方法
2018/01/22 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
淘宝网店营销策划书
2014/01/11 职场文书
运动会开幕式主持词
2014/03/28 职场文书
合伙经营协议书范本
2014/04/18 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
处级干部考察材料
2014/12/24 职场文书
网聊搭讪开场白
2015/05/28 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技