jsp中点击<img>放大图片

最新推荐文章于 2024-06-07 13:51:40 发布
最新推荐文章于 2024-06-07 13:51:40 发布
阅读量1w 收藏 4
点赞数 4
分类专栏： jsp 文章标签： jsp中点击img放大图片 图片放大

页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>放大图片</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script src="local/communication/static/jquery.min.js" charset="utf-8"></script>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
  <ul id="imglist">
	    <li><img id="viewImg2" src="img/1.jpg" width="500px" /></li>
	    <li><img id="viewImg3" src="img/2.jpg" width="500px" /></li>
	</ul>
	
	<!-- 放大后的图片 -->
       <div id="outerdiv" style="position:fixed;top:0;left:200px;background:rgba(0,0,0,0.7);z-index:2000;width:200%;height:200%;display:none;"><div id="innerdiv" style="position:absolute;width: 200%;height:200%;"><img id="bigimg" style="border:5px solid #fff;width: 520px;;height:350px;" src="" /></div></div>  
  </body>
  
  <script type="text/javascript">
    //图片放大
      $(function(){
        $("#viewImg2").click(function(){
            var _this = $(this);//将当前的pimg元素作为_this传入函数  
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);  
          });  
          $("#viewImg3").click(function(){
            var _this = $(this);//将当前的pimg元素作为_this传入函数  
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);  
          });  
    	});  
      
    
    
        function imgShow(outerdiv, innerdiv, bigimg, _this){
	        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性  
	        $('#outerdiv').attr('display','block');
	        $(bigimg).attr("src", src);//设置#bigimg元素的src属性  
             $(outerdiv).fadeIn("fast");
          
        $(outerdiv).click(function(){//再次点击淡出消失弹出层  
            $(this).fadeOut("fast");  
        });  
    }
  
  </script>
</html>


kanguhong
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jsp中上传图片
ymlvtimi的博客
04-18 7029
//上传这里使用的是ajax请求，使用的是构建form表单形式上传，其他形式还未尝试，所以用ajax方式 change:function(str,obj){ if(str=="updateLogo"){ if(obj.target.files.length>1){ vmToast.show("只能选择一个图片"); return false; } var file...
jsp上传图片
我的JAVA快乐生活
07-14 577
服务器代码仍然在servelet中,需要去apach上下载commons-fileupload-current-bin.zip//jsp页image.jsp onsubmit="return validatePro();">                  onClick="pic.src=smallImg.value;"/>             
如何把JSP图片点击放大，再次点击还原
weixin_44005175的博客
05-03 2033
首先需要给图片加上一个id和一个初始的width和heigh <div id="div1"> <img alt="" id="img" class="img_1" src="${pageContext.request.contextPath }/showPic" width="400px;" height="300px;"> </div> 之...
jsp中点击图片在弹出层显示大图
huahuagongzi9999的专栏
04-25 9245
转载地址： http://www.oschina.net/code/snippet_1176814_24342
html页面上点击图片放大
最新发布
weixin_49720804的博客
06-07 475
html页面上有的图片很小 想点击某个图片后把图片放大展示 这里是用wangediter后渲染的html页面（dangerouslySetInnerHTML这个方法直接渲染html页面），这里是用原生js获取dom元素和antd的弹框组件实现的
js实现图片预览【放大、缩小、拖动】
yao_1996的博客
11-06 2687
<style> #div{width:400px;height:400px;overflow:hidden;position:relative;border:1px solid #000;} #div img{position:absolute;height:100%;width:auto;cursor:move;} </style> &l...
jsp页面实现点击图片放大查看细节
Yuli_li的专栏
03-10 1万+
js特效点击图片放大细节查看图片，方式有好多中，后续慢慢补充
图片放大预览 效果 jsp
07-07
图片放大预览 效果 jsp java图片放大预览 效果 jsp java图片放大预览 效果 jsp java
教你实现图片的点击缩放和移动
山有木兮木有枝，心悦君兮君不知
07-04 3172
纯js实现缩略图点击放大，并且支持滚轮控制缩放倍数，以及鼠标移动图片位置
各种点击图片放大的效果
05-23
分级目录： │ demo.html │ demo2.html │ demo3.html │ demo4.html │ demo5.html │ ├─css_pirobox │ │ css.css │ │ │ ├─demo1 │ │ ajax-loader.gif │ │ b_c.png │ │ b_l.png │ │ b_r.png │ │ close_btn.png │ │ close_btn_h.png │ │ c_l.png │ │ c_r.png │ │ link_out.png │ │ link_out_h.png │ │ next.png │ │ next_h.png │ │ pause.png │ │ pause_h.png │ │ play.png │ │ play_h.png │ │ prev.png │ │ prev_h.png │ │ style.css │ │ t_c.png │ │ t_l.png │ │ t_r.png │ │ │ ├─demo2 │ │ ajax-loader.gif │ │ b_c.png │ │ b_l.png │ │ b_r.png │ │ close_btn.png │ │ close_btn_h.png │ │ c_l.png │ │ c_r.png │ │ link_out.png │ │ link_out_h.png │ │ next.png │ │ next_h.png │ │ pause.png │ │ pause_h.png │ │ play.png │ │ play_h.png │ │ prev.png │ │ prev_h.png │ │ style.css │ │ t_c.png │ │ t_l.png │ │ t_r.png │ │ │ ├─demo3 │ │ ajax-loader.gif │ │ b_c.png │ │ b_l.png │ │ b_r.png │ │ close_btn.png │ │ close_btn_h.png │ │ c_l.png │ │ c_r.png │ │ link_out.png │ │ link_out_h.png │ │ next.png │ │ next_h.png │ │ pause.png │ │ pause_h.png │ │ play.png │ │ play_h.png │ │ prev.png │ │ prev_h.png │ │ style.css │ │ t_c.png │ │ t_l.png │ │ t_r.png │ │ │ ├─demo4 │ │ ajax-loader.gif │ │ b_c.png │ │ b_l.png │ │ b_r.png │ │ close_btn.png │ │ close_btn_h.png │ │ c_l.png │ │ c_r.png │ │ link_out.png │ │ link_out_h.png │ │ next.png │ │ next_h.png │ │ pause.png │ │ pause_h.png │ │ play.png │ │ play_h.png │ │ prev.png │ │ prev_h.png │ │ style.css │ │ t_c.png │ │ t_l.png │ │ t_r.png │ │ │ └─demo5 │ ajax
jsp html5 仿windows图片查看器源码，可以下载、放大、缩小、拖动、放大某一区域
11-21
jsp html5 仿windows图片查看器源码，可以下载、放大、缩小、拖动、放大某一区域
JavaScript 图片放大效果及代码说明
10-29
`<style>`标签中的CSS样式设置了这两个元素的基本属性，例如尺寸、位置和边框。`#magnifier`是用于放置放大部分的容器，它包含两个子元素：`#Browser`（浏览框）和`#mag`（放大框）。`#Browser`是显示原始图片的小...
jsp 页面上图片分行输出小技巧
10-30
- `<c:if test="${not empty(pic.logoPath)}">`：如果`pic.logoPath`不为空，则显示图片`<img src="${pic.logoPath}"/>`。 - `<c:if test="${empty(pic.logoPath)}">`：如果`pic.logoPath`为空，则显示文本`<c:out...
JSP+Lightbox JS图片放大效果
05-07
在网页设计中，为了提供更好的用户体验，我们经常需要在用户点击图片时实现图片的放大预览。在这个场景下，`JSP（JavaServer Pages）` 和 `Lightbox JS` 结合使用可以很好地实现这个功能。`JSP` 是一种基于 Java 的...
js实现图片点击放大
little_nai的博客
10-19 6246
这个方法能达到效果，但是可能不太美观，是最简单的一种方法：<html> <head> <meta charset="utf-8" /> <script type="text/javascript" src='jquery-1.8.0.js'></script> </head> <body> <img id="img1" src=
Jsp+Servlet实现图片上传和点击放大预览功能（提供Gitee源码）
黄团团的个人博客
05-11 789
在最近老项目的开发中，需要做一个图片上传和点击放大的功能，在Vue和SpringBoot框架都有现成封装好的组件和工具类，对于一些上世纪的项目就没这么方便了，所以需要自己用原生的代码去编写，这里分享一下我的完整代码，亲测可用。
JSP中<img>标签图片在浏览器中不显示问题
热门推荐
mnmdsf的专栏
04-28 1万+
在开发JSP工程中遇到一个问题，在Eclipse中可以看到的图片，但在浏览器去看不到。的src用的是绝对路径，如:E:/JSP/workspace/test/logo.jpg，这种方式在Eclipse中可以显示图片，但在浏览器中就显示不了，为此我在网上找了好久，没有谁说得清楚，只是说什么路径问题但没有解决办法，以及在server.xml中设置等方案，没有一个具体的例子，纠结了我一两个小时，现在我将
<!DOCTYPE html> <html> <head> <title>Example JSP Page</title> </head> <body> <table border="1"> <tr> <th>加载的图片</th> <th>加载的文件</th> </tr> <tr> <td><img src="car.jpg" alt="Car"></td> <td><pre><%= fileContent %></pre></td> </tr> </table> <%-- 动态加载文件 --%> <% InputStream inputStream = pageContext.getServletContext().getResourceAsStream("/MyCar.txt"); Scanner scanner = new Scanner(inputStream); String fileContent = ""; while (scanner.hasNextLine()) { fileContent += scanner.nextLine() + "\n"; } scanner.close(); %> </body> </html> 当前代码报错，请帮我填补修改为正确的
06-11
这段代码的问题在于，在 JSP 页面中使用了未定义的变量 `fileContent`。你需要先定义这个变量，然后才能在表格中使用它来输出文件内容。 以下是修改后的代码： ```jsp <!DOCTYPE html> <html> <head> <title>Example JSP Page</title> </head> <body> <<table border="1"> <tr> <th>加载的图片</th> <th>加载的文件</th> </tr> <tr> <td><img src="car.jpg" alt="Car"></td> <td><pre><%= fileContent %></pre></td> </tr> </table> <%-- 动态加载文件 --%> <% InputStream inputStream = pageContext.getServletContext().getResourceAsStream("/MyCar.txt"); Scanner scanner = new Scanner(inputStream); String fileContent = ""; while (scanner.hasNextLine()) { fileContent += scanner.nextLine() + "\n"; } scanner.close(); %> </body> </html> ``` 在这个修改后的代码中，我们在加载文件之后定义了 `fileContent` 变量，并将其用于表格中输出文件内容。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值