查看商品图片,鼠标悬浮图片放大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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值