1回答

• 

  Madlen

  2018-02-28 23:09:03

  已采纳

  //以下是老师封装的函数，其余的css代码自己写就好了

  function startMove(obj,json,fn) {

  /*

  obj为要改变的元素对象

  json为属性/值对，即要改变的属性和值。用于同步运动

  fn为回调函数，用于设置链式运动

  */

  
  

  // 首先清除定时器

  clearInterval(obj.timer);

  obj.timer=setInterval(function(){

  flag=true;

  //对于同时改变元素多个属性值的情况

  for(var attr in json)

  {

  //获取属性值

  var icur=0;   //初始化属性值为0

  if(attr=="opacity")

  {

  //获取的透明度为小数（0-1），首先转化为百分制（0-100），然后四舍五入取整

  icur=Math.round(parseFloat(getStyle(obj,attr))*100);

  }else{

  icur=parseInt(getStyle(obj,attr));

  }

  
  

  // 判断所有属性值是否都达到目标值，一个未达到，即为false

  if(icur!=json[attr])

  {

  flag=false;

  }

  
  

  //设置属性改变的速度

  var speed=0;

  speed=(json[attr]-icur)/4;   //4为参数，可为任意值，越小改变速度越快

  speed=speed>0?Math.ceil(speed):Math.floor(speed);  //取整

  
  

  //改变属性值

  if(attr=="opacity")

  {

  obj.style.filter="alpha(opacity:"+(icur+speed)+")";

  obj.style.opacity=(icur+speed)/100;

  }else{

  obj.style[attr]=icur+speed+"px";

  }

  }

  
  

  //待改变的属性值同时完成一次改变后，判断是否都达到目标值

  if(flag)

  {

  clearInterval(obj.timer);

  // 如果存在回调函数，则调用之

  if(fn)

  {

  fn();

  }

  }

  },30) 

  }

  // 获取css样式

  function getStyle(obj,attr) {

  if(obj.currentStyle)

  {

  return obj.currentStyle[attr];   //IE8

  }else{

  return getComputedStyle(obj,false)[attr];  //IE 9 10 11支持  别人测试

  }

  }

  1 3

  qq_神眷羽...

  非常感谢！

  2018-03-04 15:32:17

  共 1 条回复 >