js鼠标悬浮动画：由一个位置移动到另外一个位置，速度由快变慢[修正版2]

2024-11-06 技术教程

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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>WebDesign</title><scriptsrc="addLoadEvent.js"></script><linkrel="stylesheet"type="text/css"href="10.2.css"><scriptsrc="10.2.js"></script></head><body><h2>WebDesign</h2><p>Thesearethethingsyoushouldknow.</p><olid="linklist"><li><ahref="structure.html">Structure</a></li><li><ahref="presentation.html">Presentation</a></li><li><ahref="behavior.html">Behavior</a></li></ol><divid="slideshow"><imgsrc="topics.gif"alt="buildingbolcksofwebdesign"id="preview"/></div></body></html>

functionaddLoadEvent(func){//不管在页面加载完毕执行多少个函数，都应付自如varoldonload=window.onload;if(typeofwindow.onload!='function'){window.onload=func;}else{window.onload=function(){oldonload();func();}}}//加快速度，距离越远，速度越快，距离越近，速度越慢functionmoveElement(elementID,final_x,final_y,interval){if(!document.getElementById)returnfalse;if(!document.getElementById(elementID))returnfalse;varelem=document.getElementById(elementID);if(elem.movement){clearTimeout(elem.movement);//进行复位}varxpos=parseInt(elem.style.left);//parseInt(string)把字符串里面的数值信息提取出来，因为后面要进行很多算术比较操作。varypos=parseInt(elem.style.top);//parseFloat(string)可以把带小数的数值（也就是浮点数）提取出来。vardist=0;if(xpos==final_x&&ypos==final_y){returntrue;}if(xpos<final_x){dist=Math.ceil((final_x-xpos)/10);//Math.ceil是向上取整函数，它返回的是大于或等于函数参数，并且与之最接近的整数，防止移动距离小于1像素.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";//varrepeat=function(){moveElement(elementID,final_x,final_y,interval)}varrepeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";elem.movement=setTimeout(repeat,interval);//为元素创建属性movement，element.property=value;}functionprepareSlideshow(){//确保浏览器支持DOM方法。if(!document.getElementsByTagName)returnfalse;if(!document.getElementById)returnfalse;//确保元素存在。if(!document.getElementById("linklist"))returnfalse;if(!document.getElementById("preview"))returnfalse;//为图片应用样式。varpreview=document.getElementById("preview");preview.style.position="absolute";preview.style.left="0px";preview.style.top="0px";//取得列表中所有链接。varlist=document.getElementById("linklist");varlinks=list.getElementsByTagName("a");//为mouseover事件添加动画效果。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);

图片素材：

浏览器效果：