图片弹框

用js实现图片弹框的特效。

效果展示
在这里插入图片描述

代码展示

html内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title></head><body><img id="myImg" src="img/c_7.jpg" alt="文本内容" width="300" height="200"><div class="modal" id="myModal"><span class="close" οnclick="document.getElementById('myModal').style.display='none'">&times;</span><img class="modal-content" id="img"><div id="text"></div>
</div>
</body></html>

css内容

#myImg{border-radius: 5px;cursor:pointer;transition:0.3s;}#myImg:hover{opacity:0.7;}.modal{display:none;   position: fixed;z-index: 1;padding-top:100px;left:0;top: 0;width:100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.9);}/* 图片*/.modal-content{margin: auto;display: block;width:80%;max-width: 700px;}/* 文本内容*/#text{margin: auto;display: block;width:80%;max-width: 700px;text-align:center;color:#ccc;padding:10px 0;height: 150px;}.modal-content, #text { -webkit-animation-name: zoom;           -webkit-animation-duration: 0.6s;          animation-name: zoom;animation-duration: 0.6s;}@-webkit-keyframes zoom {                     from {-webkit-transform:scale(0)}  to {-webkit-transform:scale(1)}}@keyframes zoom {from {transform:scale(0)} to {transform:scale(1)}}/* 关闭按钮 */.close {position: absolute;top: 15px;right: 35px;color: #f1f1f1;font-size: 40px;font-weight: bold;transition: 0.3s;}.close:hover,.close:focus {color: #bbb;text-decoration: none;cursor: pointer;}@media only screen and (max-width: 700px){.modal-content {width: 100%;}}

js内容

var modal = document.getElementById('myModal');var img = document.getElementById('myImg');var modalImg = document.getElementById("img");var captionText = document.getElementById("text");img.onclick = function(){modal.style.display = "block";modalImg.src = this.src;captionText.innerHTML = this.alt;}var span = document.getElementsByClassName("close")[0];span.onclick = function() { modal.style.display = "none";}

了解更多关注我哟!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/565282.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最短路径和距离及可视化——matlab

文章目录 一、前言 二、最短路线 2.1 教程 2.1.1 sparse创建稀疏矩阵 2.1.2 有向图最短路径&#xff08;1&#xff09; 2.1.3 有向图最短路径&#xff08;2&#xff09; 2.1.4 无向图最短路径&#xff08;1&#xff09; 2.1.5无向图最短路径&#xff08;2&#xff09; …

c语言备忘录算法矩阵链乘,矩阵链乘法(备忘录法)

/** fileMemoMatrixchain.cpp* briefa solution of martrix chain with memorized way.* author/Univ.taoxiaoxiao/XMU* versionv1.0* date11-3-2013*///实例 A1-A6&#xff1a;30X35 35X15 15X5 5X10 10X20 20X25#include #include using namespace std;#define N 6#define IN…

没有bug队——加贝——Python 练习实例 1,2

目录 1.题目&#xff1a; 2.题目&#xff1a; 1.题目&#xff1a; 有四个数字&#xff1a;1、2、3、4&#xff0c;能组成多少个互不相同且无重复数字的三位数&#xff1f;各是多少&#xff1f; 程序分析&#xff1a;可填在百位、十位、个位的数字都是1、2、3、4。组成所有的…

关闭线程 C语言,如何用C语言实现多线程

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼Windows操作系统&#xff0c;C语言实现多线程&#xff1a;#include #include DWORD APIENTRY ThreadOne ( LPVOID threadArg ){printf ( "线程开始啦&#xff0c;参数是&#xff1a;%s\n" , (char *)threadArg );return …

【OpenCV 例程300篇】250. 梯度算子的传递函数

『youcans 的 OpenCV 例程300篇 - 总目录』 【youcans 的 OpenCV 例程300篇】250. 梯度算子的传递函数 1. 空间卷积与频域滤波 空间域图像滤波是图像与滤波器核的卷积&#xff0c;而空间卷积的傅里叶变换是频率域中相应变换的乘积&#xff0c;因此频率域图像滤波是频率域滤波器…

JS贪吃蛇

Js实现贪吃蛇小游戏。 程序解析&#xff1a; 画表格&#xff0c;画出相对应大小的表格速度的快慢调节随机生成事物的位置使用键盘的方向键控制移动位置当贪吃蛇碰到四周游戏结束&#xff0c;弹框显示效果演示 代码演示 html内容 <!DOCTYPE html> <html><he…

没有bug队——加贝——Python 练习实例 3,4

3.题目&#xff1a; 一个整数&#xff0c;它加上100后是一个完全平方数&#xff0c;再加上168又是一个完全平方数&#xff0c;请问该数是多少&#xff1f; 程序分析&#xff1a; 假设该数为 x。 1、则&#xff1a;x 100 n2, x 100 168 m2 2、计算等式&#xff1a;m2 …

lcd4linux 1602,详解一种LCD1602 的4线接法

描述虽然LCD1602的显示屏幕与显示字符都较小&#xff0c;实用性并不强&#xff0c;但是在一般的教学实验中&#xff0c;它仍不失为一个常用的输出显示设备。LCD1602与单片机连接的线路共有11条&#xff0c;其中有8条数据线&#xff0c;3条控制线。如果把它们都连接上&#xff0…

没有bug队——加贝——Python 练习实例 5,6

目录 5.题目&#xff1a; 6.题目&#xff1a; 5.题目&#xff1a; 输入三个整数x,y,z&#xff0c;请把这三个数由小到大输出。 程序分析&#xff1a;我们想办法把最小的数放到x上&#xff0c;先将x与y进行比较&#xff0c;如果x>y则将x与y的值进行交换&#xff0c;然后再…

android launcher 字体大小,Android6.0 Launcher3 修改app字体大小

在原生的Android6.0中&#xff0c;在修改了系统字体大小后&#xff0c;Launcher 3上的app字体大小没有改变&#xff0c;下面方法可以解决&#xff1a;--- a/packages/apps/Launcher3/src/com/android/launcher3/BubbleTextView.java b/packages/apps/Launcher3/src/com/android…

Js常用40个页面效果

1.彻底屏蔽鼠标右键 οncοntextmenu"window.event.returnValuefalse" <table border οncοntextmenureturn(false)><td>no</table> 可用于Table取消选取、防止复制 <body onselectstart"return false"> 3.不准粘贴 οnpaste&qu…

MATLAB教程(1) MATLAB 基础知识(1)

第一部分&#xff1a;MATLAB显示桌面的基本布局 桌面基础知识- MATLAB & Simulink- MathWorks 中国 1.启动MATLAB后&#xff0c;桌面会显示默认布局&#xff0c;主要有以下三个部分&#xff1a; 当前文件夹命令行窗口工作空间 2.在MATLAB中一般需要创建变量和调用函数。…

【OpenCV 例程 300篇】247. 特征检测之最大稳定极值区域(MSER)

『youcans 的 OpenCV 例程300篇 - 总目录』 【youcans 的 OpenCV 例程 300篇】247. 特征检测之最大稳定极值区域&#xff08;MSER&#xff09; 1. 最大稳定极值区域&#xff08;MSER&#xff09; 最大稳定极值区域&#xff08;MSER-Maximally Stable Extremal Regions&#xf…

android 手机号码显示加空格,Android实现输入手机号时自动添加空格

为了用户更好的体验,我们在输入手机号的时候 添加空格,方便用户查看是否输入错误,不多说代码上去final EditText et_phone (EditText) findViewById(R.id.et_phone);et_phone.addTextChangedListener(new TextWatcher() {Overridepublic void onTextChanged(CharSequence s, i…

电脑蹦迪

如何建立一个小程序让你的电脑蹦迪的呢&#xff1f; 效果演示 1.首先在桌面新建一个记事本 2.在里面添加如下代码 color 1A echo 电脑color 1B echo 电脑color 1C echo 电脑color 1D echo 电脑echo %0 3.保存记事本文件 4.修改后对名为.bat之后点击运行即可。

MATLAB教程(1) MATLAB 基础知识(2)

第三部分&#xff1a;数组的索引 数组索引- MATLAB & Simulink- MathWorks 中国 MATLAB中的每一个变量都是可以存储多个值的数组。如果想要使用数组中的某一个值&#xff0c;则需要用到索引。 1.单个元素的索引 从一个数组中索引某个元素一般有两种方法&#xff1a; 第…

android点击切换,android 导航栏中的按钮的点击切换

Drawable drawable_home res.getDrawable(R.drawable.main_home_selected);//图片drawable_home.setBounds(0, 0, drawable_home.getMinimumWidth(), drawable_home.getMinimumHeight());//设置边距home_bt.setCompoundDrawables(null, drawable_home, null, null);//设置按钮…

css动画与js动画的区别

CSS动画 优点&#xff1a; (1)浏览器可以对动画进行优化。 1、 浏览器使用与 requestAnimationFrame 类似的机制&#xff0c;requestAnimationFrame比起setTimeout&#xff0c;setInterval设置动画的优势主要是:requestAnimationFrame 会把每一帧中的所有DOM操作集中起来&…

没有bug队——加贝——Python 练习实例 7,8

7.题目&#xff1a; 将一个列表的数据复制到另一个列表中。 程序分析&#xff1a;使用列表[:]。 注&#xff1a;[:] 表示索引全部&#xff1b;[1:]表示从索引1到最后&#xff1b;[:2]表示从第一个索引到索引2前一个 a [1, 2, 3] b1 a[:] b2 a[1:] b3 a[:2] print (b1) …

ios android 字体颜色,iOS-修改导航栏文字字体和颜色

ASP&period;NET MVC搭建项目后台UI框架—9、服务器端排序ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...一致性hash算法简介与代码实现一.简介: 一致性hash算法提…