查看商品图片，鼠标悬浮图片放大js实现
2010-06-07 10:18:46|分類：Javascript|字號訂閱
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%@pageimport="com.pojo.Products"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>My JSP 'buy.jsp' starting page</title>
</head>
<scripttype="text/javascript">
functionshowing(imgpath){
varx=event.clientX;
vary=event.clientY;
document.getElementById("popup").innerHTML="<img src='"+imgpath+"' width=200 height=200 />";
document.getElementById("popup").style.top=y+50;
document.getElementById("popup").style.left=x;
document.getElementById("popup").style.visibility="visible";
}
functionclearing(){
document.getElementById("popup").style.visibility="hidden";
}
</script>
<body>
<%
Products p=(Products)request.getAttribute("procduct");
%>
商品名稱：<%=p.getName()%><br/>
會員價：<%=p.getSaleprice()%><br/>
圖片：<imgalt=""src="<%=p.getImange()%>"vspace="6"border="0"onmouseover="showing('<%=p.getImange()%>');"onmouseout="clearing();"><br/>
商品描述：<br/>
<textarearows="3"cols="15"disabled="disabled">
<%=p.getDescript()%>
</textarea>
<formaction="">
數量:<inputname="count"size="2">
<inputtype="submit"value="購買">
</form>
<divstyle="position: absolute; width:200; height:200; border:solid 1px; border-color: red; visibility: hidden; "id="popup">
123457789
</div>
<br/>
<br/>
<br/>
<ahref="index.jsp?sid=<%=p.getSortp().getId()%>">返回商品列表</a>
</body>
</html>
總結
以上是生活随笔為你收集整理的查看商品图片，鼠标悬浮图片放大js实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 获取IP地址：
- 下一篇： 【算法系列之十二】最接近的三数之和