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 的addEventListener()及attachEvent()区别分析
May 21 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
RxJS在TypeScript中的简单使用详解
Apr 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教程孙仲岳主讲
2008/01/07 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
网页javascript精华代码集
2007/01/24 Javascript
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
5款Javascript颜色选择器
2009/10/25 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
DOM 事件流详解
2015/01/20 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
python文件编写好后如何实践
2020/07/07 Python
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
小学教师师德师风自我剖析材料
2014/09/29 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python