快捷導(dǎo)航

Javascript查看大圖功能代碼實(shí)現(xiàn)

更新時(shí)間：2020年05月07日 15:00:15 作者：凌轢VF

這篇文章主要介紹了Javascript查看大圖功能代碼實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

功能與實(shí)現(xiàn)

點(diǎn)擊小圖片可以查看大圖

實(shí)現(xiàn)就是把大圖放置在頂層（z-index大于當(dāng)前頁(yè)面的）,并且還可以加一些額外的比如透明度什么的。

大圖以動(dòng)畫(huà)的形式出現(xiàn)

動(dòng)畫(huà)就是css動(dòng)畫(huà)樣式了，可以自定義動(dòng)畫(huà)，將圖片一點(diǎn)點(diǎn)變大，發(fā)揮想象了。

代碼

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"  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;/*設(shè)置層疊順序：擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面*/
  padding-top:100px;/*放置關(guān)閉按鈕*/
  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 {/*自定義動(dòng)畫(huà)*/
  from {-webkit-transform:scale(0)}
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {/*自定義動(dòng)畫(huà)*/
  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";
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解webpack的proxyTable無(wú)效的解決方案
這篇文章主要介紹了詳解webpack的proxyTable無(wú)效的解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
解析JavaScript實(shí)現(xiàn)DDoS攻擊原理與保護(hù)措施
本文主要對(duì)JavaScript實(shí)現(xiàn)DDoS攻擊原理與保護(hù)措施進(jìn)行介紹，具有一定的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
JavaScript實(shí)現(xiàn)的商品搶購(gòu)倒計(jì)時(shí)功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的商品搶購(gòu)倒計(jì)時(shí)功能,可實(shí)現(xiàn)分秒級(jí)別的實(shí)時(shí)顯示倒計(jì)時(shí)效果,涉及js日期時(shí)間計(jì)算與頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2017-04-04
TypeScript與JavaScript多方面闡述對(duì)比相同點(diǎn)和區(qū)別
TypeScript和JavaScript在開(kāi)發(fā)交互式網(wǎng)頁(yè)方面有許多相似之處,在提供TypeScript與 JavaScript的直接比較時(shí),我們可以說(shuō)JavaScript是一種輕量級(jí)的解釋型動(dòng)態(tài)語(yǔ)言,用于增強(qiáng)HTML網(wǎng)頁(yè),TypeScript是JavaScript的增強(qiáng)版,這意味著TypeScript是JavaScript和其他一些特性的組合
2024-07-07
JS 控件事件小結(jié)
事件對(duì)于控件來(lái)說(shuō)至關(guān)重要，控件的消息通信機(jī)制使用事件的成本最低，但是對(duì)于JS控件來(lái)說(shuō)有一些麻煩需要解決，JS類本身不支持事件，DOM模型支持的事件僅適應(yīng)于瀏覽器的DOM節(jié)點(diǎn)。所以創(chuàng)建一套事件是我們寫(xiě)控件之前要做的
2012-10-10
JavaScript中檢測(cè)數(shù)組的3種方法小結(jié)
數(shù)組檢測(cè)是指在編程中對(duì)數(shù)組進(jìn)行驗(yàn)證和檢查的過(guò)程,本文主要介紹了JavaScript中檢測(cè)數(shù)組的3種方法小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下
2023-08-08
JavaScript操作XML實(shí)例代碼（獲取新聞標(biāo)題并分頁(yè)，并分頁(yè)）
XML 代碼部分這是一個(gè)新聞的XML 文件，如果 NBody部分包含 XML 和Html 不可識(shí)別部分，就包含在DATA 表示附中。
2010-05-05
小程序?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)與數(shù)據(jù)傳遞方案
在開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)遇到在微信小程序的頁(yè)面跳轉(zhuǎn)以及數(shù)據(jù)傳遞的知識(shí)點(diǎn),所以下面這篇文章主要給大家介紹了關(guān)于小程序?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)與數(shù)據(jù)傳遞的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
JS使用H5實(shí)現(xiàn)圖片預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了JS使用H5實(shí)現(xiàn)圖片預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
Javascript 實(shí)現(xiàn)TreeView CheckBox全選效果
Javascript 實(shí)現(xiàn)TreeView CheckBox 選中父節(jié)點(diǎn)時(shí)所有子節(jié)點(diǎn)全選，取消時(shí)全部取消
2010-01-01