<html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js图片放大</title> <script language="javascript" type="text/javascript"> var $=function(thisId){return document.getElementById(thisId)}; var $$=function(othisId,thoseTag){return othisId.getElementsByTagName(thoseTag)}; function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != 'function'){ window.onload = func; } else{ window.onload = function(){oldonload();func();} } } function preparePhoto(){ if(!$){ return false}; if(!$$){ return false}; var links = $$($("linkBox"),"a"); for(i=0;i<links.length;i++){ links[i].onclick = function(){ return showPic(this); } links[i].onmousemove = function(){ return showPic(this); } } } function showPic(url){ if(!$("photoHandler")){ //创建DIV容器 var photoHandler = document.createElement("div"); //设置ID photoHandler.id="photoHandler"; //创建一个段落 var textBox=document.createElement("p"); //设置文本 var textContent=document.createTextNode("hello,here is come the text"); //把文本附加到段落 textBox.appendChild(textContent); //设置段落的ID textBox.id="textBox"; //创建一个图片容器 var imgBox=document.createElement("img"); //设置图片的ID imgBox.id="imgBox"; //把图片容器附加到DIV容器 photoHandler.appendChild(imgBox); //把Div附加到文档中 $("container").appendChild(photoHandler); //把创建的那个段落插到文档中 $("container").insertBefore(textBox,$("linkBox")) //总的思路就是先创建好树,再appendChild/insertBefore文档中 } var scoure = url.getAttribute("href"); var decripPhoto =url.getAttribute("title"); $("imgBox").setAttribute("src",scoure); $("textBox").firstChild.nodeValue = decripPhoto; return false; } addLoadEvent(preparePhoto); </script> <style> * { margin:0; padding:0; } h1 { background:#666666; border-bottom:#333333 solid 5px; height:50px; color:#99CC00; line-height:50px; padding-left:60px; text-align:left; margin-bottom:5px; } ul { list-style:none; border:none; } display:inline; margin-right:10px; } a{ text-decoration:none;} a img {text-decoration:none;border:2px #00CCFF solid;} a:hover img{ border: #CCFF33 2px solid;} #photoHandler{ border-top:#333333 solid 5px; background:#999999; padding:5px;} #imgBox{ border:#333333 solid 5px; background:#CCCCCC;} #textBox{ position:fixed; top:220px; right:30px; border:1px #FFFF00 dashed; line-height:20px; color:#CCFF00;} </style> </head> <body> <div id="container"> <h1>请等待图片加载完成,否则看不到预想效果</h1> <ul id="linkBox"> <li><a href="/jscss/demoimg/wall1.jpg"><img src="/jscss/demoimg/wall_s1.jpg" /></a></li> <li><a href="/jscss/demoimg/wall2.jpg"><img src="/jscss/demoimg/wall_s2.jpg" /></a></li> <li><a href="/jscss/demoimg/wall3.jpg"><img src="/jscss/demoimg/wall_s3.jpg" /></a></li> <li><a href="/jscss/demoimg/wall4.jpg"><img src="/jscss/demoimg/wall_s4.jpg" /></a></li> <li><a href="/jscss/demoimg/wall5.jpg"><img src="/jscss/demoimg/wall_s5.jpg" /></a></li> <li><a href="/jscss/demoimg/wall6.jpg"><img src="/jscss/demoimg/wall_s6.jpg" /></a></li> </ul> </div> </body> </html> |
|