jquery点击图片放大效果

点击图片放大效果无非就是创建一个大容器,点击小图片获取图片路径存放到大容器里.

接下来看一下效果图

HTML结构

<img class="enlargeImg" width="200" src="img/6.png" title="点击查看大图" />
<div class="imgBox"></div>

CSS结构

.enlargeImg_wrapper {display: none;position: fixed;z-index: 999;top: 0;right: 0;bottom: 0;left: 0;background-repeat: no-repeat;background-attachment: fixed;background-position: center;background-color: rgba(52, 52, 52, 0.8);background-size: 45%;
}
img:hover {cursor: zoom-in;
}
.enlargeImg_wrapper:hover {cursor: zoom-out;
}

JS结构

<script>enlargeImg();function enlargeImg() {$(".enlargeImg").click(function() {$('.imgBox').html("<div class='enlargeImg_wrapper'></div>");var imgSrc = $(this).attr('src');$(".enlargeImg_wrapper").css("background-image","url(" + imgSrc + ")");$('.enlargeImg_wrapper').fadeIn(200);})$('.imgBox').on('click','.enlargeImg_wrapper',function() {$('.enlargeImg_wrapper').fadeOut(200).remove();})}
</script>

OK结束!

莫欺少年凌云志,曾许天下第一流!

jquery点击图片放大效果相关推荐

js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观存在两个问题 1.点击查看后,电子照片会变形 ...
jquery 点击图片放大，带上下一张，可通过滚动鼠标进行图片缩放
<?php /*** Created by PhpStorm.* User: 28010* Date: 2022/1/17* Time: 13:50*** 1.这里图片的数据是从数据库里面查询取 ...
pc端点击图片放大效果
1.在pc端会遇到点击图片,然后让页面添加蒙版,图片居中放大的效果: 效果图如下 2.代码实现方式:问题解决 <!DOCTYPE html> <html><head> ...
jquery点击图片放大,再点缩小(转)
使用jquery, 实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片: 1.点击前的效果: 2.点击后的效果: html代码: <td width=&qu ...
前端HTML点击图片放大效果展示
目录代码效果放大前放大后最后代码 <!DOCTYPE html> <html lang="en"><head><meta ch ...
jquery实现小图片放大效果
大致效果如下: js部分: 首要是自己先引入jquery.js文件,可自行去官网找 <script src="jquery.js"></script>< ...
Android 点击图片放大至全屏再次点击关闭过度动画 Shared Element效果（共享元素效果）
Android 点击图片放大至全屏再次点击关闭过度动画最近项目需要给用户一个体验优化,各种查阅,然后改了很多地方,类似于图片的点击预览,消息列表的点击流畅过渡. Shared Element效果( ...
jquery图片放大效果,鼠标经过图片时局部放大，类似京东图片放大镜效果
原文:jquery图片放大效果,鼠标经过图片时局部放大,类似京东图片放大镜效果源代码下载地址:http://www.zuidaima.com/share/1746784990055424.htm 1 ...
Jquery 点击图片在弹出层显示大图
[转]Jquery 点击图片在弹出层显示大图使用jquery, 实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片: 1.点击前的效果: 2.点击后的效果: h ...

jquery点击图片放大效果

jquery点击图片放大效果相关推荐

最新文章

热门文章