Javascript查看大图功能代码实现


Posted in Javascript onMay 07, 2020

功能与实现

点击小图片可以查看大图

实现就是把大图放置在顶层(z-index大于当前页面的),并且还可以加一些额外的比如透明度什么的。

大图以动画的形式出现

动画就是css动画样式了,可以自定义动画,将图片一点点变大,发挥想象了。

代码

html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css" rel="external nofollow" type="text/css">
  <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="external nofollow" >
</head>

<body>
<div class="row">
  <div class="col" onclick="open_container(1)">
    <img src="img/1.jpg" class="img">
  </div>
  <div class="col" onclick="open_container(2)">
    <img src="img/2.jpg" class="img">
  </div>
  <div class="col" onclick="open_container(3)">
    <img src="img/3.jpg" class="img">
  </div>
  <div class="col" onclick="open_container(4)">
    <img src="img/4.jpg" class="img">
  </div>
</div>
<div class="container" id="container">
  <div class="close" id="close" onclick="close_container()">
    <i class="fa fa-close" style="font-size:130px;color:white;"></i>
  </div>

  <div class="container_content">
    <img id="content_img" class="content_img" src="img/1.jpg">
  </div>
</div>
</body>
<script type="text/javascript" src="show.js"></script>
</html>

css代码

.row{
  margin:auto;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col{
  float: left;
  width: 20%;
}
img {
  margin-bottom: -4px;
  width:100%;
  height: auto;
}
.close{
  position:absolute;
  top:30px;
  right:30px;
}

.container{
  display:none;
  position:fixed;
  z-index:1;/*设置层叠顺序:拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
  padding-top:100px;/*放置关闭按钮*/
  left:0px;
  top:0px;
  width: 100%;
  height:100%;
  overflow: auto; /*--溢出的情况*/
  opacity:0.85;/*透明*/
  background-color: black;
}

.container_content{
  position: relative;
  background-color: black;
  margin: auto;
  width: 90%;
  max-width: 1200px;
}
 
.content_img{
  width:150%;
  height: auto;
  -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)}
}

js代码

function open_container(x){
  document.getElementById("container").style.display="block";
  var str="";
  str="img/"+x+".jpg";
  document.getElementById("content_img").src=str;
}
function close_container(){
  document.getElementById("container").style.display="none";
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript之编码规范 推荐
May 23 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
vue webpack实用技巧总结
Apr 24 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
用VsCode编辑TypeScript的实现方法
May 07 #Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 #Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 #Javascript
Javascript幻灯片播放功能实现过程解析
May 07 #Javascript
基于javascript实现日历功能原理及代码实例
May 07 #Javascript
Vue简单实现原理详解
May 07 #Javascript
angular组件间通讯的实现方法示例
May 07 #Javascript
You might like
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
php实现可逆加密的方法
2015/08/11 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
JAVASCRIPT HashTable
2007/01/22 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python中的Classes和Metaclasses详解
2015/04/02 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
OpenCV 模板匹配
2019/07/10 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
Python多线程正确用法实例解析
2020/05/30 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
python中print格式化输出的问题
2021/04/16 Python
详解Python函数print用法
2021/06/18 Python
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers