点击图片 放大

————css————–

/全屏显示大图/
.opacityBottom{
width: 100%;
height: 90%;
position: fixed;
background:rgba(0,0,0,0.8);
z-index:1000;
top: 0;
left: 0
}
.none-scroll{
overflow: hidden;
height: 90%;
}
.bigImg{
width:100%;
height:100%;
left:0%;
top:0%;
position:fixed;
z-index: 10001;

}

———-js————–

function clickToBigImg(obj){//绑定图片函数 //var clickImgId = (this).attr("id");varimgsrc= ( t h i s ) . a t t r ( " i d " ) ; v a r i m g s r c = (obj).attr("src"); var opacityBottom = '
'; (document.body).append(opacityBottom);
        toBigImg();//变大函数
    }
    function toBigImg(){
(document.body).append(opacityBottom);        toBigImg();//变大函数    }    function toBigImg(){
("#opacityBottom").addClass("opacityBottom"); ("#opacityBottom").show(); ("#opacityBottom").show(); ("html,body").addClass("none-scroll");//下层不可滑动 (".bigImg").addClass("bigImg");// ( " . b i g I m g " ) . a d d C l a s s ( " b i g I m g " ) ; / ∗ 隐 藏 ∗ / ("#opacityBottom").bind("click",clickToSmallImg); (".bigImg").bind("click",clickToSmallImg);varimgHeight= ( " . b i g I m g " ) . b i n d ( " c l i c k " , c l i c k T o S m a l l I m g ) ; v a r i m g H e i g h t = (".bigImg").prop("height"); if(imgHeight
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值