您好,登錄后才能下訂單哦!
#slideshow{width:100px;height:100px;position:relative; overflow:hidden;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Web Design</title> <script src="addLoadEvent.js"></script> <link rel="stylesheet" type="text/css" href="10.2.css" > <script src="10.2.js"></script> </head> <body> <h2>Web Design</h2> <p>These are the things you should know.</p> <ol id="linklist"> <li><a href="structure.html">Structure</a></li> <li><a href="presentation.html">Presentation</a></li> <li><a href="behavior.html">Behavior</a></li> </ol> <div id="slideshow"> <img src="topics.gif" alt="building bolcks of web design" id="preview" /> </div> </body> </html>
function addLoadEvent(func){ //不管在頁面加載完畢執(zhí)行多少個(gè)函數(shù),都應(yīng)付自如 var oldonload = window.onload; if(typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } } //加快速度,距離越遠(yuǎn),速度越快,距離越近,速度越慢 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); //進(jìn)行復(fù)位 } var xpos = parseInt(elem.style.left); //parseInt(string)把字符串里面的數(shù)值信息提取出來,因?yàn)楹竺嬉M(jìn)行很多算術(shù)比較操作。 var ypos = parseInt(elem.style.top); //parseFloat(string)可以把帶小數(shù)的數(shù)值(也就是浮點(diǎn)數(shù))提取出來。 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是向上取整函數(shù),它返回的是大于或等于函數(shù)參數(shù),并且與之最接近的整數(shù),防止移動(dòng)距離小于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"; //var repeat = function() {moveElement(elementID, final_x,final_y,interval)} var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")"; elem.movement = setTimeout(repeat,interval); //為元素創(chuàng)建屬性movement,element.property = value; } function prepareSlideshow(){ //確保瀏覽器支持DOM方法。 if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; //確保元素存在。 if(!document.getElementById("linklist")) return false; if(!document.getElementById("preview")) return false; //為圖片應(yīng)用樣式。 var preview = document.getElementById("preview"); preview.style.position = "absolute"; preview.style.left = "0px"; preview.style.top = "0px"; //取得列表中所有鏈接。 var list = document.getElementById("linklist"); var links = list.getElementsByTagName("a"); //為mouseover事件添加動(dòng)畫效果。 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);
圖片素材:
瀏覽器效果:
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。