这是HTML代码

<body><div id="box"><img class="bgImg"src=""><figure class="lightbox-item"><img src="./img/1.jpg" alt=""><figcaption>二狗子</figcaption></figure><img class="bgImg"src=""><figure class="lightbox-item"><img src="./img/2.jpg" alt=""><figcaption>茂茂</figcaption></figure><img class="bgImg"src=""><figure class="lightbox-item"><img src="./img/3.jpg" alt=""><figcaption>彦</figcaption></figure><img class="bgImg"src=""><figure class="lightbox-item"><img src="./img/4.jpg" alt=""><figcaption>天空</figcaption></figure><img class="bgImg"src=""><figure class="lightbox-item"><img src="./img/6.jpg" alt=""><figcaption>王富贵</figcaption></figure><img class="bgImg"src=""><figure class="lightbox-item"><img src="./img/5.jpg" alt=""><figcaption>夕阳</figcaption></figure></div></body>

这是css代码

body{margin: 0;text-align: center;
}
#box{width: 100%;height: 800px;margin: 50px;}
img{width: 500px;height: 350px;
}
.lightbox-item{width: 500px;height: 350px;float: left;cursor: pointer;text-align: center;overflow: hidden;position: relative;}
figcaption{position: absolute;color: yellow;font-size: 32px;left: 45%;top: 45%;}
figcaption:hover{border:2px solid white;}.fillbg {background-color: rgba(0, 0, 0, 0.6);bottom: 0;height: 100%;left: 0; opacity: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 1100; display:none; }
.fillbg-active {opacity: 1; display:block;
}.bgImg{max-width: 100%; max-height: 100%; position: fixed;display: none;
}

这是jq代码

$(function(){// var newImg;var clientH=$(window).height();var clientW=$(window).width();var w = '800';//遮罩图片的宽var h = '500';//遮罩图片的高$(document).ready(function(){$(".lightbox-item").bind("click", function(){//绑定事件$('.bgImg').css('display','block');//点击后隐藏遮罩newImg = $(this).find('img').attr('src');//获取当前的图片// console.log(newImg);$("body").append('<div class="fillbg"></div>');//插入遮罩$(".fillbg").addClass("fillbg-active");//添加类名$('.bgImg').css({'width': w+"px",'height': h+"px",'top':(clientH-h)/2+"px",'left':(clientW-w)/2+"px",'z-index':1101});$('.bgImg').attr("src",newImg);});$(".bgImg").bind("click", function(){$(".fill-input").removeClass("fill-input-active");setTimeout(function(){$(".fillbg-active").removeClass("fillbg-active");$(".fillbg").remove();},300);$('.bgImg').css({'width': '0px','height': '0px'});$('.bgImg').attr("src",'');});});});

第一次发不太会用将就哈我是个菜鸡大佬勿喷但是欢迎指点谢谢

用jq做一个点击图片放大消失相关推荐

点击图片放大全屏加载，再次点击图片/文档回到原来位置
导读:生命不息,折腾不止第二次写文章,其实我一直都不明白为什么很多人喜欢写文章,现在我好想知道一点点了,学到的东西一旦过了一段时间,好像就忘了- 看来写文章,或许有这么个原因吧,担心有一天忘了. 回 ...
html+js 点击图片放大、点击图片全屏
html 点击图片放大,图片全屏,再点击关闭全屏,我这里直接整理成一个js,使用方便. 使用步骤: 1.引用 jq 2.引用 imgEnlarge.js. 3.没了. 直接上代码,这个是测试代码. & ...
点击图片放大缩小功能
1.点击图片放大缩小的思路图片部分: <table><div><img style="width:62px;height:83px;display:block ...
jquery点击图片放大效果
点击图片放大效果无非就是创建一个大容器,点击小图片获取图片路径存放到大容器里. 接下来看一下效果图 HTML结构 <img class="enlargeImg" width= ...
Android 点击图片放大至全屏再次点击关闭过度动画 Shared Element效果（共享元素效果）
Android 点击图片放大至全屏再次点击关闭过度动画最近项目需要给用户一个体验优化,各种查阅,然后改了很多地方,类似于图片的点击预览,消息列表的点击流畅过渡. Shared Element效果( ...
js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观存在两个问题 1.点击查看后,电子照片会变形 ...
jquery 点击图片放大，带上下一张，可通过滚动鼠标进行图片缩放
<?php /*** Created by PhpStorm.* User: 28010* Date: 2022/1/17* Time: 13:50*** 1.这里图片的数据是从数据库里面查询取 ...
html手机端点击图片放大并根据手势缩放
手机端实现点击图片放大根据手势放大缩小效果如下进入页面背景是白色的点击图片后放大并居中背景变为黑色效果如下可以根据手势缩放演示完毕,上代码需要先引入一个js文件网盘链接: https ...
使用python做一个pdf转图片的可执行exe程序
使用python做一个pdf转图片的可执行exe 1.安装环境 python3 模块:PymuPDF,pyinstaller import fitz import os import tkinterd ...

用jq做一个点击图片放大消失

用jq写一个图片放大和消失的插件

这是HTML代码

这是css代码

这是jq代码

用jq做一个点击图片放大消失相关推荐

最新文章

热门文章