点击图片放大、获取图片地址和显示阴影demo

点击图片放大

js代码片段

function enlarge(){
$(".bgg,.maxphoto").show();
}
$(".bgg").click(function(){
$(".bgg,.maxphoto").hide();
})
css代码片段

.bgg{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.2);display: none;}
.maxphoto{width: 60%;height: auto;position: fixed;z-index: 1;top:30%; left: 20%;display: none;}
.maxphoto img{width: 100%;margin: 0;padding: 0;border-radius: 5px;}

html代码片段
<div class="bgg"></div>
<div class="maxphoto"><img src="$!camelColumnName"/></div>
点击图片获取图片地址和显示阴影
js代码片段

function changeimgURI(e){
var dom=e.target;
var $obj=$(dom);
var changeuri=$obj.attr("src");
if($obj.parent().find("input").val()==""||$obj.parent().find("input").val()==changeuri){
$obj.addClass("changeshadow");
$obj.parent().find("input").val(changeuri);
}else{
$obj.siblings().removeClass("changeshadow");
$obj.addClass("changeshadow");
$obj.parent().find("input").val(changeuri);
}
}

css代码片段
.changeshadow{
box-shadow:0px 0px 2px 3px #000;
}

html代码片段
<img class="" src="$!camelColumnName" style="height: 200px;" onclick="changeimgURI(event)"
<input id="" name="$!changeimgname" value="" style="display: none" /><!--用户看不到，用来获取点击的图片的地址-->