<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#contain{
position: absolute;
width: 500px;
height: 500px;
border: 2px solid #000000;
}
.dd{
position: absolute;
width: 200px;
height: 200px;
float: left;
border: 1px solid yellow;
}
img{
width: 200px;
height: 200px;
}
#div2{
margin-left: 300px;
margin-top:1px;
}
#div3{
margin-left: 0px;
margin-top:300px;
}
#div4{
margin-left: 300px;
margin-top:300px;
}
</style>
</head>
<body id="test">
<div id="contain"></div>
<div class="dd" id="div1"><img src="gou.jpg"></div>
<div class="dd" id="div2"><img src="niu.jpg"></div>
<div class="dd" id="div3"><img src="she.jpg"></div>
<div class="dd" id="div4"><img src="shu.jpg"></div>
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#div1").click(function() {
$('#contain').css({'background-image':'url(gou.jpg)','background-size':'100% 100%'});
$('#contain').css('z-index',9999);
$('#div1').css('z-index',1);
$("#contain").click(function() {
$('#contain').css({'background':'none'});
$('#contain').css('z-index',0);
})
})
$("#div2").click(function() {
$('#contain').css({'background-image':'url(niu.jpg)','background-size':'100% 100%'});
$('#contain').css('z-index',9999);
$('#div2').css('z-index',1);
$("#contain").click(function() {
$('#contain').css({'background':'none'});
$('#contain').css('z-index',0);
})
})
$("#div3").click(function() {
$('#contain').css({'background-image':'url(she.jpg)','background-size':'100% 100%'});
$('#contain').css('z-index',9999);
$('#div3').css('z-index',1);
$("#contain").click(function() {
$('#contain').css({'background':'none'});
$('#contain').css('z-index',0);
})
})
$("#div4").click(function() {
$('#contain').css({'background-image':'url(shu.jpg)','background-size':'100% 100%'});
$('#contain').css('z-index',9999);
$('#div4').css('z-index',1);
$("#contain").click(function() {
$('#contain').css({'background':'none'});
$('#contain').css('z-index',0);
})
})
})
</script>
</body>
</html>
JQ小例子二则(图片放大)
最新推荐文章于 2020-10-21 10:01:11 发布