php 图片放大显示功能
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>模板</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<script src="js/photo.js"></script>
<script>
$(function(){
$(".pimg").click(function(){
var _this = $(this);//将当前的pimg元素作为_this传入函数
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});
});
</script>
</head>
<body>
<div style="width:100%; padding:20px;">
<div style='padding:15px;'>
<form class="has-success1 form-inline" >
<label>请输入sku号：</label><input class="form-control" type='text' />
<input type='submit' class="btn1 btn-success1" value='查询' style="margin-left: 5px;"/>
</form>
</div>
<div class="imgphoto">
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;"><img id="bigimg" style="border:5px solid #fff;" src="" /></div>
</div>
<div class="imgphoto1">
<div class="imgphoto2"><img class="pimg img-polaroid" src="img/1.jpg" /></div>
<div class="imgphoto3"><h4>这是SKU号</h4></div>
</div>
<div class="imgphoto1">
<div class="imgphoto2"><img class="pimg img-polaroid" src="img/2.jpg" /></div>
<div class="imgphoto3"><h4>这是SKU号</h4></div>
</div>
<div class="imgphoto1">
<div class="imgphoto2"><img class="pimg img-polaroid" src="img/3.jpg" /></div>
<div class="imgphoto3"><h4>这是SKU号</h4></div>
</div>
<div class="imgphoto1">
<div class="imgphoto2"><img class="pimg img-polaroid" src="img/4.jpg" /></div>
<div class="imgphoto3"><h4>这是SKU号</h4></div>
</div>
<div class="imgphoto1">
<div class="imgphoto2"><img class="pimg img-polaroid" src="img/8.jpg" /></div>
<div class="imgphoto3" ><h4>这是SKU号</h4></div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
快乐生活，努力工作
浙公网安备 33010602011771号