仿凡客的鼠标移动到商品小图上弹出大图,主要问题是大图位置的确定,以及多张大图的轮换。<%-- Document : test Created on : 2009-11-16, 12:39:50 Author : dingoc --%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@page errorPage="Error.jsp"%> <% String pathtest = request.getContextPath(); String test = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + pathtest + "/"; %> <html> <head> <base href="<%=test%>"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <mce:script language="javascript"><!-- var div1Width=500;//显示的层大小 var div1Height=380; var imgarray ;//显示的图片数组 var times = 1;//轮换开始的图片数组下标 var flag =false;//是否轮换 var flag2=true;//是否隐藏层 var interval ; window.οnlοad=function(){//加载时开始判断是否轮换 init(); interval = window.setInterval(function(){rotationimg();}, 2000); } function init(){//初始化各个层的大小 var obj1 =document.getElementById("Layer1");//真个大层 var obj2 =document.getElementById("Layer2");//显示大图片的层 var obj3 =document.getElementById("Layer3");//显示小图片的层 var obj4 =document.getElementById("Layer4");//加载图片过程中显示的层 obj1.style.width=div1Width; obj2.style.width=div1Width; obj3.style.width=div1Width obj4.style.width=div1Width; obj1.style.height=div1Height; obj2.style.height=300; obj3.style.height=80; obj4.style.height=div1Height; } function flowDiv(f){//鼠标移入移出层判断是否显示隐藏层 flag2=f; if(flag2){ hidediv(); } } function hidediv(){//鼠标移出原图片,延迟判断是否隐藏层 flag2=true; setTimeout("hidepreview()",500); } function hidepreview(){//隐藏层 if(flag2){ flag =false; document.getElementById("Layer1").style.display="none"; imgarray=""; } } function showPosition(id){//显示层的位置 var width =document.body.clientWidth; var height= document.body.clientHeight; var scrolltop =document.body.scrollTop; var obj=document.getElementById(id); var posleft=0; var postop=0; var objScrollLeft=obj.scrollLeft; var offsetWidth=obj.offsetWidth; var offsetHeight=obj.offsetHeight; do{ postop += obj.offsetTop; posleft += obj.offsetLeft; obj = obj.offsetParent; }while(obj); var obj2=document.getElementById("Layer1"); var obj3=document.getElementById("Layer4") if(obj2){ obj2.style.display="block"; obj3.style.display="block"; var divwidth=obj2.offsetWidth; var divheight=obj2.offsetHeight; if((posleft+offsetWidth+divwidth)> width){ //alert("aaa:"+(posleft-divwidth)); obj2.style.left=parseInt(posleft-divwidth+objScrollLeft); }else{ obj2.style.left=parseInt(posleft+offsetWidth+objScrollLeft); } if(postop+offsetHeight/2-divheight/2<scrolltop){ obj2.style.top=scrolltop; }else if(postop+offsetHeight/2+divheight/2>height){ obj2.style.top=parseInt(height-divheight+scrolltop); }else{ obj2.style.top=parseInt(postop+offsetHeight/2-divheight/2+scrolltop); } } } function showdiv(id,img1,img2,img3,img4){//显示图片,并开始轮换 showPosition(id); imgarray = new Array(); imgarray[0]=img1; imgarray[1]=img2; imgarray[2]=img3; imgarray[3]=img4; flag2 = false; loadImage1(); } function loadImage1( ){//判断是否加载完第一张图片,callback为加载完后调用的函数 var img = new Image(); img.οnlοad= function(){ showpreview(); } img.src=imgarray[0]; } function showpreview(){//开始显示图片和轮换 document.getElementById("Layer4").style.display="none"; times=1; var obj =document.getElementById("imgList"); obj.innerHTML=""; for(var i=0;i<imgarray.length;i++){ obj.innerHTML +="<li οnmοuseοut='rerotaion("+i+")' onMouseOver='changeimg(this)' >"+getimg(imgarray[i])+"</li>"; } document.getElementById("Layer2").innerHTML=getimg(imgarray[0]); document.getElementById("imgList").getElementsByTagName("li")[0].getElementsByTagName("img")[0].style.borderColor = "red"; document.getElementById("Layer1").style.display="block"; flag =true; } function getimg(url){//取得img return "<img src="" + url + "" mce_src="" + url + "" align='middle' />"; } function rerotaion(n){//鼠标滑过小图后开始轮换的位置 times=n; flag=true; } function changeimg(obj){//鼠标滑过小图 flag = false; for(var j=0;j<imgarray.length;j++){ document.getElementById("imgList").getElementsByTagName("li")[j].getElementsByTagName("img")[0].style.borderColor = "#cccccc"; } obj.getElementsByTagName("img")[0].style.borderColor= "red"; document.getElementById("Layer2").innerHTML=getimg(obj.getElementsByTagName("img")[0].src); } function rotationimg(){//轮换图片 if(flag){ if(times ==4){ times=0; } for(var i=0;i<imgarray.length;i++){ document.getElementById("imgList").getElementsByTagName("li")[i].getElementsByTagName("img")[0].style.borderColor = "#cccccc"; } document.getElementById("imgList").getElementsByTagName("li")[times].getElementsByTagName("img")[0].style.borderColor = "red"; document.getElementById("Layer2").innerHTML=getimg(imgarray[times]); times++; } } // --></mce:script> <mce:style type="text/css"><!-- #Layer1 { position:absolute; z-index:1; display:block; background:#FFCC66; } #Layer2 { position:absolute; z-index:2; background:#cccccc; margin-left:auto; margin-right:auto; text-align:center; } #Layer3 { position:absolute; z-index:3; top: 300px; background:#cccccc; background-color: #999999; } #Layer4 { position:absolute; z-index:100; background:#cccccc; margin-left:auto; margin-right:auto; text-align:center; } #imgList li img { width:80px; height:80px; border:1px solid #cccccc; } ul li{ list-style:none; float:left; margin-left:20px; cursor:pointer; } --></mce:style><style type="text/css" mce_bogus="1"> #Layer1 { position:absolute; z-index:1; display:block; background:#FFCC66; } #Layer2 { position:absolute; z-index:2; background:#cccccc; margin-left:auto; margin-right:auto; text-align:center; } #Layer3 { position:absolute; z-index:3; top: 300px; background:#cccccc; background-color: #999999; } #Layer4 { position:absolute; z-index:100; background:#cccccc; margin-left:auto; margin-right:auto; text-align:center; } #imgList li img { width:80px; height:80px; border:1px solid #cccccc; } ul li{ list-style:none; float:left; margin-left:20px; cursor:pointer; }</style> </head> <body> <% request.setCharacterEncoding("utf-8"); String img1 = test + "image_sys/01.jpg"; String img2 = test + "image_sys/02.jpg"; String img3 = test + "image_sys/03.jpg"; String img4 = test + "image_sys/04.jpg"; %> <br/><br/><br/><br/><br/><br/><br/> <table border="1" width="1800" align="center" style="dis" mce_style="dis"> <tr> <td><table border="1" id="test1"><tr> <td ><img src="<%=img1%>" width="100" height="100" onMouseOver="showdiv('test1','<%=img1%>','<%=img2%>','<%=img3%>','<%=img4%>')" onMouseOut="hidediv()"></td> </tr></table></td> <td><table border="1" id="test2"><tr> <td ><img src="<%=img1%>" width="100" height="100" onMouseOver="showdiv('test2','<%=img1%>','<%=img2%>','<%=img3%>','<%=img4%>')" onMouseOut="hidediv()"></td> </tr></table></td> <td align="right"><table border="1" id="test5"><tr> <td ><img src="<%=img1%>" width="100" height="100" onMouseOver="showdiv('test5','<%=img1%>','<%=img2%>','<%=img3%>','<%=img4%>')" onMouseOut="hidediv()"></td> </tr></table></td> </tr> <tr> <td><table border="1" id="test3"><tr> <td ><img src="<%=img1%>" width="100" height="100" onMouseOver="showdiv('test3','<%=img1%>','<%=img2%>','<%=img3%>','<%=img4%>')" onMouseOut="hidediv()"></td> </tr></table></td> <td><table border="1" id="test4"><tr> <td ><img src="<%=img1%>" width="100" height="100" onMouseOver="showdiv('test4','<%=img1%>','<%=img2%>','<%=img3%>','<%=img4%>')" onMouseOut="hidediv()"></td> </tr></table></td> <td align="right"><table border="1" id="test6"><tr> <td ><img src="<%=img1%>" width="100" height="100" onMouseOver="showdiv('test6','<%=img1%>','<%=img2%>','<%=img3%>','<%=img4%>')" onMouseOut="hidediv()"></td> </tr></table></td> </tr> <tr> <td ><table border="1" id="test33"><tr> <td ><img src="<%=img1%>" width="100" height="100" onMouseOver="showdiv('test33','<%=img1%>','<%=img2%>','<%=img3%>','<%=img4%>')" onMouseOut="hidediv()"></td> </tr></table></td> <td><table border="1" id="test44"><tr> <td ><img src="<%=img1%>" width="100" height="100" onMouseOver="showdiv('test44','<%=img1%>','<%=img2%>','<%=img3%>','<%=img4%>')" onMouseOut="hidediv()"></td> </tr></table></td> <td align="right"><table border="1" id="test66"><tr> <td ><img src="<%=img1%>" width="100" height="100" onMouseOver="showdiv('test66','<%=img1%>','<%=img2%>','<%=img3%>','<%=img4%>')" onMouseOut="hidediv()"></td> </tr></table></td> </tr> <tr> <td><table border="1" id="test13"><tr> <td ><img src="<%=img1%>" width="100" height="100" onMouseOver="showdiv('test13','<%=img1%>','<%=img2%>','<%=img3%>','<%=img4%>')" onMouseOut="hidediv()"></td> </tr></table></td> <td><table border="1" id="test14"><tr> <td ><img src="<%=img1%>" width="100" height="100" onMouseOver="showdiv('test14','<%=img1%>','<%=img2%>','<%=img3%>','<%=img4%>')" onMouseOut="hidediv()"></td> </tr></table></td> <td align="center"><table border="1" id="test16"><tr> <td ><img src="<%=img1%>" width="100" height="100" onMouseOver="showdiv('test16','<%=img1%>','<%=img2%>','<%=img3%>','<%=img4%>')" onMouseOut="hidediv()"></td> </tr></table></td> </tr> <tr> <td><table border="1" id="test23"><tr> <td ><img src="<%=img1%>" width="100" height="100" onMouseOver="showdiv('test23','<%=img1%>','<%=img2%>','<%=img3%>','<%=img4%>')" onMouseOut="hidediv()"></td> </tr></table></td> <td><table border="1" id="test24"><tr> <td ><img src="<%=img1%>" width="100" height="100" onMouseOver="showdiv('test24','<%=img1%>','<%=img2%>','<%=img3%>','<%=img4%>')" onMouseOut="hidediv()"></td> </tr></table></td> <td align="center"><table border="1" id="test26"><tr> <td ><img src="<%=img1%>" width="100" height="100" onMouseOver="showdiv('test26','<%=img1%>','<%=img2%>','<%=img3%>','<%=img4%>')" onMouseOut="hidediv()"></td> </tr></table></td> </tr> </table> <div id="Layer1" onMouseOver="flowDiv(false)" onMouseOut="flowDiv(true)"> <div id="Layer2" οnmοuseοver="flowDiv(false)"> </div> <div id="Layer3" οnmοuseοver="flowDiv(false)"> <ul id="imgList"></ul></div> <div id="Layer4" onMouseOver="flowDiv(false)"><img src="image/loading2.gif" mce_src="image/loading2.gif" align="middle"></div> </div> </body> </html>