Question

如何通过淡出将图像从一个位置移动到另一个位置？我有这样的功能

隐藏：

function SetOpacity(object,opacityPct)
{
  // IE.
  object.style.filter = 'alpha(opacity=' + opacityPct + ')';
  // Old mozilla and firefox
  object.style.MozOpacity = opacityPct/100;
  // Everything else.
  object.style.opacity = opacityPct/100;
}
function ChangeOpacity(id,msDuration,msStart,fromO,toO)
{
  var element=document.getElementById(id);
  var opacity = element.style.opacity * 100;
  var msNow = (new Date()).getTime();
  opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
  if (opacity<0) 
    SetOpacity(element,0)
  else if (opacity>100)
    SetOpacity(element,100)
  else
  {
    SetOpacity(element,opacity);
    element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",1);
  }
}

function FadeOut(id)
{
  var element=document.getElementById(id);
  if (element.timer) window.clearTimeout(element.timer); 
  var startMS = (new Date()).getTime();
  element.timer = window.setTimeout("ChangeOpacity('" + id + "',500," + startMS + ",100,0)",1);
}

获取当前位置或下一个位置（通过图像的id和div的id）

function findPos(e){
var obj = document.getElementById(e);
var posX = obj.offsetLeft;var posY = obj.offsetTop;
while(obj.offsetParent){
posX=posX+obj.offsetParent.offsetLeft;
posY=posY+obj.offsetParent.offsetTop;
if(obj==document.getElementsByTagName('body')[0]){break}
else{obj=obj.offsetParent;}
}
alert(posX+'-'+posY);
}

第一个位置是图像的位置，下一个是div的位置

Answer 1

使用最少代码的最简单方法是使用jQuery并使用animate函数配合。

例如：

$(".block").animate({"left": "+=50px"}, "slow");

您可以在括号中使用多个参数，例如背景颜色，不透明度等，因为您希望动态更改值。

供您参考的链接位于：http://api.jquery.com/animate/

Answer 2

大多数javascript动画都依赖于计时器来创建流畅运动的效果。要在页面上滑动图像，您可以设置一个间隔，该间隔将css位置每5毫秒更改为右1px或类似的东西。 Javascript animation tutorial.

但是，使用像jquery或many others.

这样的库最容易实现动画

Javascript-运动图像

2 个答案: