JS Mouse hover Animation: from one position to another position, speed from fast to slow [revision 2]

#slideshow {width:100px;height:100px;position:relative; overflow:hidden;}

<! Doctype html>
Function addloadevent (func) {    //does not matter how many functions are executed after the page is loaded var oldonload =  window.onload;if (typeof window.onload !=  ' function ') {Window.onload = func;} Else{window.onload = function () {oldonload (); func ();}}} Speed up, the farther away, the faster, the closer, the slower the speed  function moveelement (elementid,final_x,final_y,interval) {if (! document.getElementById)  return false;if (!document.getelementbyid (elementid))  return false ; Var elem = document.getelementbyid (ElementID); if (elem.movement) {cleartimeout (elem.movement);     //to reset}var xpos = parseint (elem.style.left);  //parseint (String) Extract the numeric information from the string, because there are a lot of arithmetic comparisons to follow. Var ypos = parseint (Elem.style.top);   //parsefloat (string) extracts a numeric value (that is, a floating-point number) with decimals. Var dist = 0;if (xpos == final_x && ypos == final_y) { Return true;} if (xpos < final_x) {dist  = math.ceil (( final_x - xpos)/10);   // Math.ceil is an up-rounding function that returns an integer that is greater than or equal to the function parameter, and that is closest to it, to prevent moving distances less than 1 pixels. xpos = xpos + dist;       if (xpos > final_x) { dist = math.ceil (  xpos - final_x)/10);  xpos = xpos - dist;}       if (ypos < final_y) { dist = math.ceil (  Final_y - ypos)/10); ypos = ypos + dist;}        if (ypos > final_y) { dist = math.ceil (  ypos - final_y)/10); ypos = ypos - dist;}        elem.style.left = xpos +  "px"; elem.style.top  = ypos +  "px";//var  repeat = function ()  {moveelement (ElementID,  final_x,final_y,interval)} varrepeat =  "Moveelement ('" + elementID + ", " + final_x + ", " + final_y + " , " + interval + ") ";  elem.movement = settimeout (repeat,interval);  // Create an attribute movement,element.property = value for an element;} Function prepareslideshow () {//ensures that the browser supports DOM methods. if (!document.getelementsbytagname)  return false;if (!document.getelementbyid)  return false ;//Ensure that the element exists. if (!document.getelementbyid ("linklist"))  return false;if (!document.getelementbyid ("Preview"))   return false;//applies a style to a picture. Var preview = document.getelementbyid ("preview");p review.style.position =  "Absolute"; preview.style.left =  "0px";p review.style.top =  "0px";//Get all the links in the list. Var list = document.getelementbyid ("linklist");var links =  List.getelementsbytagname ("a");//Add an animated effect to the MouseOver event. Links[0].onmouseover = function () {moveelement ("preview", -100,0,10);} Links[1].onmOuseover = function () {moveelement ("preview", -200,0,10);} Links[2].onmouseover = function () {moveelement ("preview", -300,0,10);}} Addloadevent (prepareslideshow);
Image material:
650) this.width=650; "Src=" Http://s4.51cto.com/wyfs02/M01/82/0A/wKiom1dITTCxcMq6AAAO8DE9jPI648.gif-wh_500x0-wm_3 -wmp_4-s_2639869525.gif "title=" Topics.gif "alt=" Wkiom1dittcxcmq6aaao8de9jpi648.gif-wh_50 "/>
Browser effects:
650) this.width=650; "Src=" Http://s2.51cto.com/wyfs02/M02/82/09/wKioL1dITg6ydRZIAAAkeB6sH9k155.jpg-wh_500x0-wm_3 -wmp_4-s_869280873.jpg "title=" 36020160527210224875.jpg "alt=" Wkiol1ditg6ydrziaaakeb6sh9k155.jpg-wh_50 "/>
JS Mouse hover Animation: from one position to another position, speed from fast to slow [revision 2]