求一个jQuery 点击图片放大（图片原大小）显示，背景变暗锁定。下面补充详细要求
1个回答
展开全部
这样？
<style>
*{
margin:0;
padding:0;
}
img{
display: block;
width: 100px;
margin: 10% auto;
}
section{
position: fixed;
background: grey;
top: 0;
left: 0;
display: none;
}
div{
width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
}
div>img{
width: 200px;
margin: 1px 1px;
}
</style>
</head>
<body>
<img src="img/bing_xiang_ye/22.jpg" id="a"/>
<section>
<div>
<img src="img/bing_xiang_ye/22.jpg"/>
</div>
</section>
</body>
<script type="text/javascript" src="js/jquery-2.1.4.js" ></script>
<script>
var screen_width=$(window).width();
var screen_height=$(window).height();
$("section").width(screen_width);
$("section").height(screen_height);
var marginTop_marginBottom=(screen_height-$("div").height())/2;
$("div").css({
"margin-top":marginTop_marginBottom+"px",
"margin-bottom":marginTop_marginBottom+"px"
})
$("#a").click(function(){
$("section").show()
})
</script>
<style>
*{
margin:0;
padding:0;
}
img{
display: block;
width: 100px;
margin: 10% auto;
}
section{
position: fixed;
background: grey;
top: 0;
left: 0;
display: none;
}
div{
width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
}
div>img{
width: 200px;
margin: 1px 1px;
}
</style>
</head>
<body>
<img src="img/bing_xiang_ye/22.jpg" id="a"/>
<section>
<div>
<img src="img/bing_xiang_ye/22.jpg"/>
</div>
</section>
</body>
<script type="text/javascript" src="js/jquery-2.1.4.js" ></script>
<script>
var screen_width=$(window).width();
var screen_height=$(window).height();
$("section").width(screen_width);
$("section").height(screen_height);
var marginTop_marginBottom=(screen_height-$("div").height())/2;
$("div").css({
"margin-top":marginTop_marginBottom+"px",
"margin-bottom":marginTop_marginBottom+"px"
})
$("#a").click(function(){
$("section").show()
})
</script>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
