标签：des style blog http color io os java ar
1.实现效果：
2.实现主要思想：
三张图做成一个大图，点击某个链接，对链接判断从而对图片进行相应px大小的左移或者右移操作
3.代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>幻灯片效果-点击某个链接某张图移动</title> 5 <meta charset="en"> 6 <style> 7 #slideshow { 8 width:1200px; 9 height:40px; 10 position:absolute; 11 } 12 #preview { 13 position:absolute; 14 border-width:0; 15 outline-width:0; 16 } 17 </style> 18 </head> 19 <body> 20 <div id=‘intro‘> 21 <a href="dazhongdianping.html">dazhongdianping</a> 22 <a href="gewala.html">gewala</a> 23 <a href="taobao.html">taobao</a> 24 </div> 25 <script type="text/javascript"> 26 function moveElement(elementID,final_x,final_y,interval) {//对图片进行移动 27 if ( !document.getElementById) 28 { 29 return false; 30 } 31 if (!document.getElementById(elementID)) 32 { 33 return false; 34 } 35 var elem=document.getElementById(elementID);//获取该图片元素 36 if (elem.movement) 37 { 38 clearTimeout(elem.movement);//如果该元素有timeout的设置，则取消 39 } 40 if (!elem.style.left) 41 { 42 elem.style.left="0px"; 43 } 44 if (!elem.style.top) 45 { 46 elem.style.top="0px"; 47 } 48 var xpos=parseInt(elem.style.left);//获取当前图片的left值 49 var ypos=parseInt(elem.style.top); 50 if(xpos==final_x && ypos==final_y) 51 { 52 return true; 53 } 54 if(xpos<final_x) 55 { 56 var dist=final_x-xpos; 57 xpos=xpos+dist; 58 } 59 if(xpos>final_x) 60 { 61 var dist=xpos-final_x;//目的x值比当前的小，例如当前xpos=0.目的为-400 62 xpos=xpos-dist;//xpos最终为-400，相当于左移400px 63 } 64 if (ypos<final_y) 65 { 66 var dist=ypos-final_y; 67 ypos=ypos+dist; 68 } 69 if(ypos>final_y) 70 { 71 var dist=ypos-final_x; 72 ypos=ypos-dist 73 } 74 elem.style.left=xpos + "px"; 75 elem.style.top=ypos + "px"; 76 var repeat=""; 77 repeat="moveElement("+elementID+","+final_x+","+final_y+","+interval+")"; 78 elem.movement=setTimeout(repeat,interval);//5ms后对该图片元素进行移动 79 } 80 //准备工作，创建id="intro"的div，添加子元素<img>,为一大张图，水平包含即将移动的三张小图 81 function prepareSlideShow() { 82 if (! document.getElementsByTagName) 83 { 84 return false; 85 } 86 if (!document.getElementById) 87 { 88 return false; 89 } 90 if (!document.getElementById(‘intro‘)) 91 { 92 return false; 93 } 94 var intro=document.getElementById(‘intro‘); 95 var slideshow=document.createElement(‘div‘);//创建滑动的div 96 slideshow.setAttribute("id","slideshow"); 97 var preview=document.createElement("img");//创建滑动div内部的一张包含三个logo的图 98 preview.setAttribute("src","./1.jpg");//可以根据自己需要准备好图 99 preview.setAttribute("alt","a glimpse of pictures"); 100 preview.setAttribute("id","preview"); 101 slideshow.appendChild(preview); 102 intro.appendChild(slideshow); 103 var links=intro.getElementsByTagName("a");//获取界面中的a标签。主要为三个logo对应 的标签 104 var destination;//目的地 105 for (var i=0;i<links.length;i++) 106 { 107 108 links[i].onclick=function(e){//给该a标签添加点击的处理事件 109 e.preventDefault();//默认跳转到href的事件取消 110 clearBackground(); 111 this.style.background="yellow"; 112 destination=this.getAttribute("href");//获取href中地址，判断移动位置 113 if(destination.indexOf("dazhongdianping.html")!=-1){ 114 moveElement("preview",0,0,5); 115 } 116 if(destination.indexOf("gewala.html")!=-1) { 117 moveElement("preview",-400,0,5);//图片向左移动400px 118 } 119 if(destination.indexOf("taobao.html")!=-1) { 120 moveElement("preview",-800,0,5);//图片向左移动800px 121 } 122 } 123 } 124 } 125 126 function clearBackground() { 127 var links=intro.getElementsByTagName("a"); 128 for (var i=0;i<links.length;i++) 129 { 130 links[i].style.background="white"; 131 } 132 } 133 prepareSlideShow(); 134 </script> 135 </body> 136 </html>
标签：des style blog http color io os java ar
原文地址：http://www.cnblogs.com/luckyflower/p/3990600.html
