Javascript查看大图功能代码实现

功能与实现

点击小图片可以查看大图

实现就是把大图放置在顶层（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";
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动

    JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动

    修正了网上其它版本的一些错误.完美无错版 JS网页图片查看器-可控制图片放大缩小还原移动效果 body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; } drag = 0 move = 0 //

  • javascript基础知识大全 便于大家学习，也便于我自己查看

    1.javascript的数组API 复制代码 代码如下: //定义数组 var pageIds = new Array(); pageIds.push('A'); 数组长度 pageIds.length; //shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 //unshift:将参数添加到原数组开头,并返回数组的长度 var a = [1,

  • 基于JavaScript实现移动端点击图片查看大图点击大图隐藏

    一.需求 点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css">

  • viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)

    一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式(可做屏保) 支持缩略图 支持标题显示 支持多种自定义事件 Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用. 二.下载 纯JS版本: 下载地址:https://github.com/fengyuanchen/

  • JavaScript编写点击查看大图的页面半透明遮罩层效果实例

    这个效果用的很频繁,经常都会有人问我这个问题,所以要把它写成文章.下次再有人问就直接把这篇文章的URL丢出去就好了.这个效果很简单所以我就不做太多说明了,具体的看看代码注释就会明白.下面就是全部代码,复制到HTML中就可以运行的. <!DOCTYPE html> <style> #mask { position:fixed;width:100%; top:0px;left:0px; _position:absolute; _top:expression(documentElemen

  • JS简单实现查看文档创建日期、修改日期和文档大小的方法示例

    JS简单实现查看文档创建日期、修改日期和文档大小的方法示例

    本文实例讲述了JS简单实现查看文档创建日期.修改日期和文档大小的方法.分享给大家供大家参考,具体如下: 一 介绍 查看文档创建日期.修改日期和文档大小,可以使用fileCreatedDate属性.fileModifiedDate 属性.lastModified属性和fileSize属性来实现. fileCreatedDate属性 该属性用来获取文档的创建日期. 语法: [date=]fileCreatedDate date:字符串变量,用来存储文档的创建日期.date是可选项. fileModi

  • js写的方法实现上传图片之后查看大图

    将图片查询出来之后,还需要加一个查看大图的功能,于是就用js写了一个方法,然后在image的onmouseover事件中调用此方法,这样在鼠标悬浮在小图上面的时候,其大图就会自动的显示出来. 显示大图和隐藏大图的js代码: 复制代码 代码如下: <script type="text/javascript"> //显示图片 function over(imgid,obj,imgbig) { //大图显示的最大尺寸 4比3的大小 400 300 maxwidth=400; ma

  • js canvas实现放大镜查看图片功能

    本文实例为大家分享了canvas实现放大镜查看图片功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="background: black;"> <c

  • Javascript查看大图功能代码实现

    功能与实现 点击小图片可以查看大图 实现就是把大图放置在顶层(z-index大于当前页面的),并且还可以加一些额外的比如透明度什么的. 大图以动画的形式出现 动画就是css动画样式了,可以自定义动画,将图片一点点变大,发挥想象了. 代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<

  • 查看大图功能代码jquery版

    复制代码 代码如下: /*查看大图*/ var screenheight = $(window).height(); var screenwidth = $(window).width(); var loadCSS = function(){ var screenwidth = $(window).width(); var screenheight = $(window).height(); $("div.lookBigPicture").css({"left":s

  • 原生JavaScript实现日历功能代码实例(无引用Jq)

    原生JavaScript实现日历功能代码实例(无引用Jq)

    这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 成品显示,可左右切换月份 html 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi

  • 手机开发必备技巧：javascript及CSS功能代码分享

    1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域, 这是真正有效的区域.由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个: 复制代码 代码如下: width -             //  viewport 的宽度 (范围从200 到10,000,默认为980 像素) height -            //  viewpor

  • JS查看对象功能代码

    <html> <head> <title>通过JS查看到一个页面有些什么对象</title> </head> <body> <textarea id="textarea1" rows="30" cols="30"></textarea> <table><tbody><tr><td></td>&

  • JavaScript CSS 菜单功能代码

    Menu #menubar { font-family:verdana; font-size:12px; margin:1px; } #menubar li { float:left; position:relative; text-align:left; } /* each menu item style */ #menubar li a { border-style:none; color:black; display:block; width:150px; height:20px; lin

  • Android 实现WebView点击图片查看大图列表及图片保存功能

    Android 实现WebView点击图片查看大图列表及图片保存功能

    在日常开发过程中,有时候会遇到需要在app中嵌入网页,此时使用WebView实现效果,但在默认情况下是无法点击图片查看大图的,更无法保存图片.本文将就这一系列问题的实现进行说明. 图示: 项目的知识点: 加载网页后如何捕捉网页中的图片点击事件: 获取点击的图片资源后进行图片显示,获取整个页面所有的图片: 支持查看上下一张的图片以及对图片缩放显示: 对图片进行保存: 其他:图片缓存的处理(不用每次都重新加载已查看过的图片) 项目代码结构: 前期准备(添加权限.依赖和混淆设置): 添加权限: <us

  • jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】

    本文实例讲述了jQuery+css实现的点击图片放大缩小预览功能.分享给大家供大家参考,具体如下: 要求 点击一张图片,图片就会放大,查看大图,点击空白处就会隐藏大图,回到缩略图. 技术要点 主要是Jquery进行元素的显示与隐藏. 代码 <!DOCTYPE html> <html> <head> <title>qqq</title> <meta charset="utf-8"> <style type=&q

  • IOS 开发之查看大图的实现代码

    IOS 开发之查看大图的实现代码

    IOS 开发之查看大图的实现代码 本项目是取自传智播客的教学项目,加入笔者的修改和润饰. 1. 项目名称:查看大图 2. 项目截图展示 3. 项目功能 左右滑动查看图片 支持缩放功能 点击中间按钮移动图片 4. 项目代码 #import "ViewController.h" @interface ViewController ()<UIScrollViewDelegate> @property (strong, nonatomic) IBOutlet UIScrollVie

随机推荐