jsp中点击<img>放大图片

来源：互联网发布：2016年网络知识竞赛编辑：程序博客网时间：2024/05/28 11:51
页面代码：
<%@ 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>
阅读全文
0 0