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 相关文章推荐
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
JavaScript中Function详解
Feb 27 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
供参考的 php 学习提高路线分享
2011/10/23 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
PHP URL路由类实例
2013/11/12 PHP
php分页函数示例代码分享
2014/02/24 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
php中__toString()方法用法示例
2016/12/07 PHP
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
Python遍历目录的4种方法实例介绍
2015/04/13 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
《月亮湾》教学反思
2014/04/14 职场文书
80后婚前协议书范本
2014/10/24 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
开学典礼观后感
2015/06/15 职场文书
2015团员个人年度总结
2015/11/24 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
python实现层次聚类的方法
2021/11/01 Python
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技