仿凡客商品图放大效果-优快云博客

本文链接：https://blog.youkuaiyun.com/dingoc/article/details/4821165

仿凡客的鼠标移动到商品小图上弹出大图，主要问题是大图位置的确定，以及多张大图的轮换。<%-- 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"></mce:script> <mce:style type="text/css"></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>

一个弹出层