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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/444173.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode547. 朋友圈

班上有 N 名学生。其中有些人是朋友&#xff0c;有些则不是。他们的友谊具有是传递性。如果已知 A 是 B 的朋友&#xff0c;B 是 C 的朋友&#xff0c;那么我们可以认为 A 也是 C 的朋友。所谓的朋友圈&#xff0c;是指所有朋友的集合。 给定一个 N * N 的矩阵 M&#xff0c;表…

C++中volatile关键字

转载https://blog.csdn.net/weixin_44363885/article/details/92838607 一、volatile介绍 volatile提醒编译器它后面所定义的变量随时都有可能改变&#xff0c;因此编译后的程序每次需要存储或读取这个变量的时候&#xff0c;都会直接从变量地址中读取数据。如果没有volatile…

leetcode261. 以图判树

给定从 0 到 n-1 标号的 n 个结点&#xff0c;和一个无向边列表&#xff08;每条边以结点对来表示&#xff09;&#xff0c;请编写一个函数用来判断这些边是否能够形成一个合法有效的树结构。 示例 1&#xff1a; 输入: n 5, 边列表 edges [[0,1], [0,2], [0,3], [1,4]] 输…

leetcode323. 无向图中连通分量的数目

给定编号从 0 到 n-1 的 n 个节点和一个无向边列表&#xff08;每条边都是一对节点&#xff09;&#xff0c;请编写一个函数来计算无向图中连通分量的数目。 示例 1: 输入: n 5 和 edges [[0, 1], [1, 2], [3, 4]] 0 3 | | 1 --- 2 4 输出…

leetcode79. 单词搜索 网格地图搜索+回溯经典写法啦

给定一个二维网格和一个单词&#xff0c;找出该单词是否存在于网格中。 单词必须按照字母顺序&#xff0c;通过相邻的单元格内的字母构成&#xff0c;其中“相邻”单元格是那些水平相邻或垂直相邻的单元格。同一个单元格内的字母不允许被重复使用。 示例: board [ [A,B,C…

leetcode1075. 项目员工 I(SQL)

项目表 Project&#xff1a; ---------------------- | Column Name | Type | ---------------------- | project_id | int | | employee_id | int | ---------------------- 主键为 (project_id, employee_id)。 employee_id 是员工表 Employee 表的外键。 员工…

leetcode1082. 销售分析 I (SQL)

产品表&#xff1a;Product ----------------------- | Column Name | Type | ----------------------- | product_id | int | | product_name | varchar | | unit_price | int | ----------------------- product_id 是这个表的主键. 销售表&#xff1a;Sale…

Oracle 获取当前日期及日期格式

Oracle 获取当前日期及日期格式 <wbr><wbr> 获取系统日期&#xff1a;<wbr><wbr><span style"padding:0px; margin:0px; color:rgb(255,0,0)">SYSDATE()<br style"padding-bottom:0px; padding-top:0px; padding-left:0px; ma…

leetcode1083. 销售分析 II(SQL)

Table: Product ----------------------- | Column Name | Type | ----------------------- | product_id | int | | product_name | varchar | | unit_price | int | ----------------------- product_id 是这张表的主键 Table: Sales --------------------…

leetcode1084. 销售分析III(SQL)

Table: Product ----------------------- | Column Name | Type | ----------------------- | product_id | int | | product_name | varchar | | unit_price | int | ----------------------- product_id 是这个表的主键 Table: Sales --------------------…

炸窝(Java)拼接

数组中插入相关练习 例题&#xff1a;定义一个方法 &#xff0c;将数组{1,2,3}按照指定的格式进行拼接成一个字符串 /*例题&#xff1a;定义一个方法 &#xff0c;将数组{1,2,3}按照指定的格式进行拼接成一个字符串&#xff0c; 格式定义如下[word1#word2#word3]. 思路分析&a…

leetcode71. 简化路径 Unix 风格

以 Unix 风格给出一个文件的绝对路径&#xff0c;你需要简化它。或者换句话说&#xff0c;将其转换为规范路径。 在 Unix 风格的文件系统中&#xff0c;一个点&#xff08;.&#xff09;表示当前目录本身&#xff1b;此外&#xff0c;两个点 &#xff08;..&#xff09; 表示将…

李牛(Linux)脚本

Linux课堂笔记day01 主要总结内容&#xff1a; 一&#xff1a;Linux背景介绍 二&#xff1a;系统操作 三&#xff1a;服务管理 四&#xff1a;shell脚本 五&#xff1a;文本操作 六:常用服务搭建 01&#xff1a;初识linux 收获&#xff1a;可以熟练应对运维和开发 对以后的生…

leetcode601. 体育馆的人流量(SQL)

X 市建了一个新的体育馆&#xff0c;每日人流量信息被记录在这三列信息中&#xff1a;序号 (id)、日期 (visit_date)、 人流量 (people)。 请编写一个查询语句&#xff0c;找出人流量的高峰期。高峰期时&#xff0c;至少连续三行记录中的人流量不少于100。 例如&#xff0c;表…

李牛(Linux)打包

15&#xff1a;打包压缩以及解压缩 接下来我们来介绍打包压缩以及解压缩命令 首先我们要在脑海里想几个问题&#xff1a; 1.打包压缩以及解压缩在字面上理解到底是什么意思&#xff1f; 是不是像我们生活见到的事例那样 比如说&#xff1a;生产酒的厂商一般都是按照规则将12瓶…

notepad++ 文本文件内容丢失恢复

今天用着notepad不知道怎的&#xff0c;突然就崩溃了&#xff0c;然后我下次打开的时候弹了个框&#xff0c;我按了OK之后&#xff0c;里面所有的内容都不见了 网上百度了半天&#xff0c;总结如下&#xff1a; 在如下目录下有notepad会自动保存的文件 C:\Users\Administrato…

jquery实现页面提示,数据正在加载中。(

简单代码&#xff1a; jsp中代码如下&#xff1a;<wbr> <div id"dataLoad" style"display:none"><!--页面载入显示--></wbr><wbr><wbr><table width100% height100% border0 aligncenter valignmiddle></wbr…

李牛(Linux)vi

16&#xff1a;强大的vi 引言&#xff1a;提到vi我们不得不提到vim 这两种编辑器就先当于我们Windows操作系统当中的记事本 不过vi以及vim编辑器熟练掌握之后是不需使用鼠标进行操作的 完全都是由键盘来进行控制 那为什么可以不用鼠标呢 就是因为我们的vi编辑器是基于多模式的…

(多线程)leetcode1114. 按序打印 认识AtomicInteger

我们提供了一个类&#xff1a; public class Foo { public void one() { print("one"); } public void two() { print("two"); } public void three() { print("three"); } } 三个不同的线程将会共用一个 Foo 实例。 线程 A 将会调用 on…

李牛(Linux)

20&#xff1a;用户和用户组管理 引言&#xff1a; 新思维1&#xff1a;用户&#xff1f;用户是什么&#xff1f;能不能吃&#xff1f;好吃不&#xff01;哈哈 不开玩笑了 我们平常接触的用户就是window系统下的用户 用户名叫啥来着 哦 user 但是对于Windows操作系统来说 好像…