图片放大显示效果的实现代码可以动态生成图片，每次点击看到原图片，都是当前id中的图片

超文本标记语言

！DOCTYPE html html head meta charset=' UTF-8 ' title/title script src=' http : node _ modules/jquery/jquery。js '/脚本样式* { margin : 0；padd : 0；} # picOne img { width: 200px高度： 200像素；} .mask-img { display :无；位置：固定；top : 0；左： 0；宽度： 100%;高度： 100%;z指数： 10；背景： rgba(0，0，0，2);} .图片{显示：无；位置：固定；前：名50%；左侧：50%;transform: translate(-50%，-50%)；宽度： 960 px高度： 700像素；线高： 700像素；文本对齐：居中；背景技术： # 666;z指数： 20;} .图片。电话{垂直-对齐：中间；最大宽度： 868像素；最大高度： 670像素；} .图片。左{位置：绝对值；left : 10 xtop : 320 px宽度： 25px高度： 40px线高： 40px} .图片。右侧{位置：绝对；right : 10 xtop : 320 px宽度： 25px高度： 40px线高： 40px}/style/head body div class=' seaImg '！- seaImg可动态生成多个-div id=' PiCone ' img src=' http : img/img 2。jpg ' img src=' http : img/img 3。jpg ' img src=' http : img/img 1。jpg '/div/div！-遮罩层-div class=' mask-img '/div class=' picture ' img class=' phone ' src=' http : ' alt=' '/div class=' left ' img src=' http : img/left。png ' alt=' '//div class=' right ' img src=' http : img/right。png ' alt=' '//div/div/body脚本函数seaImg(){ $().mask-img ').打开('点击'，函数(e){ $(').mask-img ').css('display '，' none ')；$('.图片')。css('display '，' none ')；}) var imgs=$(' .seaImg(img’)var图像；imgs.on('点击')，函数{ var父亲=(e.currentTarget).parentNode//当前点击图片的父元素var att=父亲。属性。身份证。节点值；//父元素自己的属性id var image=' # ' att ' img ' images=$(image)//jquer获取编号下的所有img $(' .mask-img ').css('display '，' block ')；$('.图片')。css('display '，' block ')；$('.电话')。attr('src '，e . CurrentTarget。src)；if(e . CurrentTarget==images[0]){ $(' .左')。css('display '，' none ')；}else{ $(' .左')。css('display '，' block ')；} if(e . CurrentTarget==images[images]。length-1]){ $(' .右')。css('display '，' none ')；}else{ $(' .右')。css('display '，' block ')；} }) //左点击事件，当图片为第一张的时候左边的箭头点击图片隐藏$('.左')。on('click '，function(){ var imgSrc=$(').电话')。attr(' src ')；$('.右')。css('display '，' block ')；for(var I=0；长度；i ){ if(imgSrc==images[i].src){ if(imgSrc==images[1]).src){ $(' .左')。css('display '，' none ')；} var j=I；$('.电话')。attr('src '，图像[j-1].src)；} } }) //右点击事件，当图片为最后一张的时候右边箭头点击图片隐藏$('.右')。on('click '，function(){ var imgSrc=$(').电话')。attr(' src ')；$('.左')。css('display '，' block ')；for(var I=0；长度；i ){ if(imgSrc==images[i].src){ if(IMgsrc==IMGs[images]。长度-2].src){ $(' .右')。css('display '，' none ')；} var j=I；$('.电话')。attr('src '，图像[j 1].src)；} } }) } seaImg() /script/html向左点击事件

向右点击事件

第一次渲染

中间图片渲染

最后一次渲染

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。