Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>js动画效果演示</title>    
</head>
<body>
    <p id="message">666</p>
    <p id="message2">777</p>    
    <script src="js动画效果.js"></script>
</body>
</html>
 
function moveElement(elementId,final_x,final_y,interval){
  if(!document.getElementById) return false;
  if(!document.getElementById(elementId)) return false;
  var elem = document.getElementById(elementId);
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if( xpos == final_x&&ypos == final_y){
    return true;
  }
  if(xpos>final_x){
    xpos--;
  }
  if(xpos<final_x){
    xpos++;
  }
  if(ypos>final_y){
    ypos--;
  }
  if(ypos<final_y){
    ypos++;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";
  movement = setTimeout(repeat,interval);
}
function addLoadEvent(func){
  var oldonload = window.onload;
  if( typeof window.onload != "function"){
    window.onload = func;
  }else{
    window.onload = function(){
      oldonload();
      func();
    }
  }}
  function positionMessage(){
    if(!document.getElementById) return false;
    if(!document.getElementById("message")) return false;
    var elem = document.getElementById("message");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top = "100px";
    moveElement("message",200,100,10);
  }
  addLoadEvent(positionMessage);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mscststspro
0viewers