JQUERY简单实现点击图片放大效果
本地新建个html,复制以下代码,浏览器打开看效果
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Lightbox</title>
<meta name="description" lang="en" content="Lightbox is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers."/>
<meta name="author" content="Lokesh Dhakar">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
.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; }
</style>
</head>
<body>
<img class="comment_pics" style="margin-top:500px;margin-left:500px;" width="50px" height="50px" src="http://www.yyyweb.com/demo/lightbox/img/demopage/image-1.jpg"/>
<div class="bg">
<img class="bgImg" style="max-width: 100%; max-height: 100%; position: fixed;" src="">
</div>
</body>
</html>
<script>
var newImg;
var clientH=$(window).height();
var clientW=$(window).width();
var w = '250';
var h = '250';
$(document).ready(function(){
$(".comment_pics").bind("click", function(){
newImg = $(this)[0].src;
$("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",'');
});
});
</script>
JQUERY简单实现点击图片放大效果相关推荐
- jquery点击图片放大效果
点击图片放大效果无非就是创建一个大容器,点击小图片获取图片路径存放到大容器里. 接下来看一下效果图 HTML结构 <img class="enlargeImg" width= ...
- js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片 近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观 存在两个问题 1.点击查看后,电子照片会变形 ...
- pc端点击图片放大效果
1.在pc端会遇到点击图片,然后让页面添加蒙版,图片居中放大的效果: 效果图如下 2.代码实现方式:问题解决 <!DOCTYPE html> <html><head> ...
- 简单实现点击图片放大的功能
背景:想在app中加上点击缩略图放大的效果,但是不想导入大量的JS ,也无需哪些复杂的插件,于是自己手写了一个很简单的实现,在这里记下来. 代码很简单,还有很多优化空间,时间有限,就没有优化了 1 . ...
- 前端HTML点击图片放大效果展示
目录 代码 效果 放大前 放大后 最后 代码 <!DOCTYPE html> <html lang="en"><head><meta ch ...
- Android 点击图片放大至全屏 再次点击关闭过度动画 Shared Element效果(共享元素效果)
Android 点击图片放大至全屏 再次点击关闭过度动画 最近项目需要给用户一个体验优化,各种查阅,然后改了很多地方,类似于图片的点击预览,消息列表的点击流畅过渡. Shared Element效果( ...
- jquery点击图片放大,再点缩小(转)
使用jquery, 实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片: 1.点击前的效果: 2.点击后的效果: html代码: <td width=&qu ...
- jquery 点击图片放大,带上下一张,可通过滚动鼠标进行图片缩放
<?php /*** Created by PhpStorm.* User: 28010* Date: 2022/1/17* Time: 13:50*** 1.这里图片的数据是从数据库里面查询取 ...
- jquery图片放大效果,鼠标经过图片时局部放大,类似京东图片放大镜效果
原文:jquery图片放大效果,鼠标经过图片时局部放大,类似京东图片放大镜效果 源代码下载地址:http://www.zuidaima.com/share/1746784990055424.htm 1 ...
- vue项目 一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
最新文章
- STL容器迭代过程中删除元素技巧
- linux显卡驱动mxm,linux下我的FX5200显卡驱动安装
- 开源ImageFilter库v0.4:新增26种图片效果
- 高性能js之js文件的加载与解析
- java 链接占用太多_Java程序链接数过多导致java.net.SocketException: No buffer space available问题...
- 美国播客节目《指数视角》专访李飞飞:疫情、 AI 伦理、人才培养
- VTK:可视化之HanoiInitial
- 民企信息化建设个人经历(四)
- dell电脑计算机专业,戴尔Dell专用英语_电脑基础知识_IT计算机_专业资料.doc
- 四、mysql数据常用命令
- C/C++中break、return、continue和goto在循环语句中的使用
- Block 循环引用(中)
- python二次开发ug_CAD二次开发(UG/Proe/其他) - 随笔分类 - 白途思 - 博客园
- layui框架引入TP教程
- linux里hba状态_Linux下查看FC HBA信息
- 数字滤波器 matlab 仿真,基于matlab的数字滤波器的设计及仿真ppt课件
- DSP Bootloader说明
- linux mate桌面主题下载_使用Mate Tweak配置Mate桌面
- python安装pip之后镜像源配置
- 大学生创新工作室阶段性总结