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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
Javascript var变量删除原理及实现
Aug 26 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 模拟POST|GET操作实现代码
2010/07/20 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
使用angular写一个hello world
2015/01/23 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
python缩进区别分析
2014/02/15 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
Python闭包实现计数器的方法
2015/05/05 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python实现点云投影到平面显示
2020/01/18 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
学生处主任岗位职责
2013/12/01 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
预备党员入党感言
2015/08/01 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python