您的位置：首页 > Web前端 > JavaScript

jsp中点击<img>放大图片

2017-08-31 19:40 204 查看

页面代码：

<%@ 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>


</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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jsp中点击img放大图片图片放大

相关文章推荐

新的分享

章节导航