首页 > 代码库 > 【js编程艺术】小制作五
【js编程艺术】小制作五
1.html
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Web Design</title> <link rel="stylesheet" type="text/css" href="styles/list.css"></head><body> <h1>Web Design</h1> <p>These are the things you should know</p> <ol id="linklist"> <li> <a href="images/shuangyu.jpg">shuangyu</a> </li> <li> <a href="images/baiyang.jpg">baiyang</a> </li> <li> <a href="images/jinniu.jpg">jinniu</a> </li> <li> <a href="images/shuangzi.jpg">shuangzi</a> </li> </ol> <script type="text/javascript" src="scripts/prepareSlideshow.js"></script></body></html>
2.css
#slideshow{ width: 100px; height: 100px; position: relative; overflow: hidden;}#preview{ position: absolute;}
3.js
function addLoadEvent(func) { var oldonload = window.onload; if(typeof window.onload != "function"){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } }}function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newElement); }else{ parent.insertBefore(newElement, targetElement.nextSibling); }}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); } if(!elem.style.left){ elem.style.left = "0px"; } if(!elem.style.top){ elem.style.top = "0px"; } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); var dist = 0; if(xpos == final_x && ypos == final_y){ return true; } if(xpos < final_x){ dist = Math.ceil((final_x - xpos) / 10); 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 - xpos) / 10); ypos = ypos + dist; } if(ypos > final_y){ dist = Math.ceil((xpos - final_y) / 10); ypos = ypos - dist; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; var repeat = "moveElement(‘"+elementID+"‘, "+final_x+", "+final_y+", "+interval+")"; elem.movement = setTimeout(repeat, interval);}function prepareSlideshow(){ if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; if(!document.getElementById("linklist")) return false; var slideshow = document.createElement("div"); slideshow.setAttribute("id", "slideshow"); var preview = document.createElement("img"); preview.setAttribute("src", "images/shuangbaijinshuangzi.gif"); preview.setAttribute("alt", "buliding blocks of web design"); preview.setAttribute("id", "preview"); slideshow.appendChild(preview); var list = document.getElementById("linklist"); insertAfter(slideshow, list); var links = list.getElementsByTagName("a"); links[0].onmouseover = function(){ moveElement("preview", 0, 0, 10); } links[1].onmouseover = function(){ moveElement("preview", -100, 0, 10); } links[2].onmouseover = function() { moveElement("preview", -200, 0, 10) } links[3].onmouseover = function() { moveElement("preview", -300, 0, 10) }}addLoadEvent(prepareSlideshow);
【js编程艺术】小制作五
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。