JavaScript는 웹 페이지와 관련된 간단한 움직임(너비, 높이, 투명도, 위치 변경)을 구현합니다._javascript 기술

직장에서 웹 페이지를 작성하는 데 관련된 동작은 너비, 높이, 투명도 및 위치를 변경하는 등 매우 간단한 경우가 많습니다. 이러한 양식은 수고를 덜기 위해 통합되었습니다. 다음과 같은 내용이 있습니다.

호환 가능 기기: IE 시리즈, 크롬, 파이어폭스, 오페라, 사파리, 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로 간단한 동작을 구현하는 데 영감을 주기를 바랍니다.