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

最新推荐文章于 2023-10-24 14:25:09 发布

shijingan

最新推荐文章于 2023-10-24 14:25:09 发布

阅读量517

点赞数

分类专栏： demo 文章标签： demo

本文链接：https://blog.csdn.net/m0_37585523/article/details/70243447

版权

demo 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

点击图片放大

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;" οnclick="changeimgURI(event)"
<input id="" name="$!changeimgname" value="" style="display: none" /><!--用户看不到，用来获取点击的图片的地址-->