Tip: You can modify some of the code before running
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> Pop-up Zoom picture display effect (a) </title> < Meta http-equiv= "Content-type" content= "text/html;charset=gb2312" > <!--Add the following code to <pead> and </pead> --> <style type= "Text/css" > *{margin:0;padding:0;} img{border:0;border:1px #ccc Solid : 12px;background: #fff; font-family: "Song Body";} A{color: #333; text-decoration:none;} A:hover{text-decoration:none; main{position:relative;width:640px;margin:0 Auto;} . left{float:left;width:220px}. Left Li{float:left;margin-right:8px;list-style:none; right{float:right;width : 400px;} . Right a{float:left;margin-right:10px;padding:5px 10px; right a:hover{background: #ff9000; color: #fff;} #imglink { float:none;margin:0;padding:0;} #links, #more {margin-top:400px} </style> <script type= "Text/javascript" >/**************************** ** * Change picture size, Position function * * Author:kevin * * DATA:2009-05-17 * ******************************/func tion Moveelement (elementid,final_x,final_y,final_w,final_h,interval) {/* if (!document.getelementbyid) return false; if (!document.getelementbyid (ElementID)) return false;*/var elem = document.getElementById (ElementID); if (elem.movement) {cleartimeout (elem.movement); var xpos = parseint (elem.style.left); var ypos = parseint (elem.style.top); var wpos = parseint (elem.style.width); var hpos = parseint (elem.style.height); if (xpos = final_x && ypos = final_y && wpos = final_w && Hpos = final_h) {return true; } if (Xpos < final_x) {var dist = Math.ceil ((final_x-xpos)/5); xpos = xpos + dist; } if (Xpos > final_x) {var dist = Math.ceil ((xpos-final_x)/5); Xpos = xpos-dist; } if (Ypos < final_y) {var dist = Math.ceil ((final_y-ypos)/5); ypos = ypos + dist; } if (Ypos > Final_y) {var dist = Math.ceil ((ypos-final_y)/5); Ypos = ypos-dist; } if (Wpos < Final_w) {var dist = Math.ceil ((final_w-wpos)/5); Wpos = Wpos + dist; } if (Wpos > Final_w) {var dist = Math.ceil ((wpos-final_w)/5); Wpos = wpos-dist; } if (Hpos < final_h) {var dist = Math.ceil ((final_h-hpos)/5); Hpos = Hpos + dist; } if (Hpos > Final_h) {var dist = Math.ceil ((hpos-final_h)/5); Hpos = hpos-dist; } elem.style.left = xpos + "px"; Elem.style.top = ypos + "px"; Elem.style.width = Wpos + "px"; Elem.style.height = Hpos + "px"; var repeat = "moveelement" (' +elementid+ "," +final_x+ "," +final_y+ "," +final_w+ "," +final_h+ "," +interval+ ")"; Elem.movement = settimeout (repeat,interval); } </script> <script type= "Text/javascript" >/****************************** * Dynamically create img get the corresponding link * * Author:ke VIN * * DATA:2009-05-17 * ******************************/function Showpic (whichpic) {var Source = Whichpic.getattribute ("src"); var bigimg = document.getElementById ("Bigpic"); Bigimg.setattribute ("src", source); var links = whichpic.getattribute ("href") var getlink = document.getElementById ("links"); Getlink.setattribute ("href", links); return false; function Piclink (URL) {var links = Url.getattribute ("href") var mlinks = Url.getattribute ("name") var plinks = ur L.getattribute ("href"); var getlink = document.getElementById ("links"); var mlink = document.getElementById ("more"); var imglink = document.getElementById ("Imglink"); Getlink.setattribute ("href", links); Mlink.setattribute ("href", mlinks); Imglink.setattribute ("href", plinks); return false; }//Move Click event Function Movepic () {///dynamically create large map var Imglink = document.getElementById ("Imglink"); var showimg = document.createelement ("img"); ShowImg.style.position = "absolute"; Showimg.setattribute ("src", "yun_qi_img/20090609114452985.jpg"); ShowimG.setattribute ("id", "bigpic"); Showimg.setattribute ("width", "300"); Showimg.setattribute ("height", "410"); Imglink.appendchild (SHOWIMG); Get click coordinate var menupic = document.getElementById ("Menupic"); var imglink = menupic.getelementsbytagname ("img"); var linkurl = Menupic.getelementsbytagname ("a"); for (Var i=0 i < Imglink.length i++) {Linkurl[i].onclick = function () {return piclink (this); } Imglink[i].onclick = function () {showpic (this); ShowImg.style.left = "0px"; ShowImg.style.top = "0px"; ShowImg.style.width = "100px"; ShowImg.style.height = "140px"; Moveelement ("Bigpic", 240,0,300,410,10); }} window.onload = Movepic; </script> </pead> <body> <!--Add the following code between <body> and </body>--> <div class= "main" > <div class= "left" id= "Menupic" > <ul> <li></li> <LI></LI&G T <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class= "right" > <br/> Details >> more >> </div> </div> </body> </ptml>
Tip: You can modify some of the code before running
