查看商品图片，鼠标悬浮图片放大js实现

淩亂°似流年 2024-02-19 21:05 33阅读 0赞

2010-06-07 10:18:46| 分类： [Javascript][]|字号订阅

<%@page language=*"java"* import=*"java.util.\*"* pageEncoding=*"UTF-8"*%>

<%@pageimport=*"com.pojo.Products"*%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"\+request.getServerName()+":"\+request.getServerPort()+path+"/";

%>

<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<basehref=*"*<%=basePath%>*"*>

<title>My JSP 'buy.jsp' starting page</title>

</head>

<script type="text/javascript">

function showing(imgpath)\{

var x=event.clientX;

var y=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";

\}

function clearing()\{

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>

[Javascript]: http://blog.163.com/yuxiangtong0524@126/blog/#m=0&t=1&c=fks_087074092095082075083083094095092086081075082087080064

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关查看商品图片，鼠标悬浮图片放大js实现

2010-06-07 10:18:46| 分类： [Javascript][]|字号订阅 <%@page language="java" import="java.util.

淩亂°似流年/ 2024年02月19日 21:05/ 0 赞/ 34 阅读

相关 CSS鼠标悬浮图片放大效果

当鼠标移入图片时，图片变大。父容器宽高不变。效果：鼠标移入前： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

客官°小女子只卖身不卖艺/ 2023年10月06日 13:31/ 0 赞/ 39 阅读

相关 layui 实现鼠标指向table中的图片放大显示图片

这个功能的实现，网上有不少，但是之前自己查阅的时候总是实现不了，后来同事刘表哥大佬，查阅了一下，加上自己的一些想法，实现了该功能， c v 即可使用，就感觉蛮不错的，代码理解

ゝ一世哀愁。/ 2023年07月25日 14:25/ 0 赞/ 25 阅读

相关鼠标悬停放大图片特效

鼠标悬停放大图片 ![在这里插入图片描述][format_png_pic_center] 鼠标悬停放大图片是个比较吸引人的特效。废话我就不多说了，直接上结局办法。

不念不忘少年蓝@/ 2023年05月21日 07:07/ 0 赞/ 44 阅读

相关 js鼠标滚轮放大缩小图片

[下载地址][Link 1]JavaScript通过转动鼠标滚轮放大缩小图片 ![1631561166.png][] dd: [Link 1]: https://yy1

蔚落/ 2022年09月12日 01:43/ 0 赞/ 311 阅读

相关 jquery实现鼠标悬浮显示图片

实现鼠标悬浮显示图片图片跟随鼠标 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

桃扇骨/ 2022年06月04日 05:50/ 0 赞/ 426 阅读

相关仿淘宝实现鼠标移入图片，图片放大功能

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <sty

深藏阁楼爱情的钟/ 2022年05月29日 11:36/ 0 赞/ 355 阅读

相关 Element(2) 表格中实现图片的单击放大、悬浮放大、长按放大

一、实现效果如下图所示，打算实现一个在table表格中点击图片放大的效果【这里也可以是悬浮放大、长按放大等效果】 ![在这里插入图片描述][watermark_ty

痛定思痛。/ 2021年12月15日 14:59/ 1 赞/ 1525 阅读

相关 JavaScript实现商品图片的细节放大随鼠标移动

一.效果展示 -------------------- ![在这里插入图片描述][20190803140617562.gif] 二.代码实现 1.html部分

梦里梦外;/ 2021年11月10日 15:34/ 0 赞/ 331 阅读

相关 JavaScript实现商品图片随鼠标动态全图放大

一.实现效果展示： -------------------- ![在这里插入图片描述][20190801214350601.gif] 二.代码实现 ------

水深无声/ 2021年11月10日 00:44/ 0 赞/ 380 阅读