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

来源：互联网发布：各国经济数据编辑：程序博客网时间：2024/05/22 17:06

点击图片放大

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" /><!--用户看不到，用来获取点击的图片的地址-->

0 0