JS特效二：图片弹窗

今天来看一个商品后台页面设计时常用的js效果，图片弹窗。就是在鼠标点击小图片的时候，会以一个弹窗的形式放大图片，方便我们查看细节，而且还有很多动效在里面。我们先来看看效果图：

这是鼠标在图片外，就是一张小图，加了一点圆角

当鼠标移到图片上的时候就会有阴影效果和透明度变化

点击小图片就是这样的了，可以查看大图

设计思路也很简单，就是先写出来基本的html和css布局，这里说下&times是一个叉号。然后js里面设置两个点击事件，每个点击事件通过方法改变一些元素的css样式。代码里的注释写的很详细！

附上源码：


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片弹窗</title><link rel="stylesheet" href="1.css">
</head><body><!-- 触发弹窗 - 图片为本地的的图片地址 --><img id="myImg" src="img/1.jpg" alt="炸裂得分王-詹姆斯.哈登" width="300" height="200"><!-- 弹窗 --><div id="myModal" class="modal"><!-- 关闭按钮,&times这个是叉号 --><span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span><!-- 弹窗内容 --><img class="modal-content" id="img01"><!-- 文本描述 --><div id="caption"></div></div><script src="1.js"></script>
</body></html>


/* 触发弹窗图片的样式 */#myImg {display: block;margin: auto;border-radius: 5px;/* 光标位于图片的时候，展示形式是个小手 */cursor: pointer;transition: 0.3s;
}/* img的hover效果，可以设置透明度 */#myImg:hover {opacity: 0.85;box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}/* 弹窗背景 */.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.5);
}/* 图片 */.modal-content {border-radius: 10px;margin: auto;display: block;width: 80%;max-width: 700px;
}/* 文本内容 */#caption {margin: auto;display: block;width: 80%;max-width: 700px;text-align: center;color: #aaa;padding: 10px 0;height: 150px;font-size: 1.4rem;
}/* 添加动画 */.modal-content,
#caption {/* 设置动画名 */-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;
}/* 小屏幕中图片宽度为 100%，响应式布局 */@media only screen and (max-width: 700px) {.modal-content {width: 100%;}
}


// 获取弹窗
var modal = document.getElementById('myModal');// 获取图片插入到弹窗 ，使用 "alt" 属性作为文本部分的内容
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function() {modal.style.display = "block";modalImg.src = this.src;captionText.innerHTML = this.alt;
}// 获取 <span>标签里面的元素，也就是那个叉号，设置关闭按钮，数组形式的元素，第一个就是[0]
var span = document.getElementsByClassName("close")[0];// 当点击叉号的时候, 关闭弹窗
span.onclick = function() {modal.style.display = "none";
}

不懂的记得及时评论区或者私信询问哦！

JS特效二：图片弹窗相关推荐

JS特效 -- 网页图片飞起来
刚发现一段有点意思的JS代码,只要复制到浏览器地址栏粘贴后回车, 就可以看到你网站上的所有图片都"旋转着飞了起来".((也许大家早看过-.-我后知后觉了)) 其实刚接触JS的时候, ...
【js特效】图片循环滚动代码
1.效果图如下: 2.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
各大门户网站Flash和JS实现的图片幻灯片切换特效代码文件下载:
最近看到各大门户站都有一个幻灯片特效,而且不是简单的JS特效,是FLASH和JS结合而成的觉得非常不错,今天在IT世界的原代码中查看了一下,特此发布!希望大家喜欢!有什么问题可以与我研究!<a ...
JS特效代码大全（十一）超炫的js图片展示效果（三）
在看过上一篇JS特效代码大全(十)超炫的js图片展示效果(二)文章后,相信很多人都想试试把这种效果用到自己的项目中去了.在用的过程当中个性化的需求就来了,比如,想把小图导航放上边去,或者放左边放右边等 ...
Sequence.js 实现带有视差滚动特效的图片滑块
Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...
图片跟随鼠标移动并放大js特效
js实现图片放大,并跟随鼠标移动图片跟随鼠标移动并放大js特效很多网站有类似于淘宝放大镜的效果,只不过这里说的是 " 不仅能直接放大,而且会跟随鼠标移动 " ! 类似于&quo ...
淘宝商城首页鼠标经过整个区域图片变暗变亮的JS特效代码
淘宝商城首页商品分类模块当鼠标经过整个区域图片变暗,唯一鼠标悬停的那个商品图片变亮的JS特效代码! 在线演示:http://mj.588cy.com/jquery/22.html <!DOCTY ...
js生成二维码以及插入图片
js生成二维码以及插入图片先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/ 进入dem ...
js 图片打碎_html5 tweenmax.js打碎玻璃图片轮播切换特效
特效描述:html5 tweenmax.js 打碎玻璃图片轮播切换特效.html5碎玻璃图片切换特效,tweenmax.js实列代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 co ...

JS特效二：图片弹窗

JS特效二：图片弹窗相关推荐

最新文章

热门文章