jQuery implementiert einen einfachen Bildbetrachter

Im Rahmen des Projekts habe ich einen Bildbetrachter selbst gebaut. Da der ursprüngliche Code nicht mein eigener ist, habe ich ihn nur ein wenig geändert und es ist nicht sehr gut geworden. Ich werde den Stil und die Kapselung neu schreiben, wenn ich in Zukunft Zeit habe, und sie einfach als Backup sammeln. Wenn es Kinderschuhe gibt, die nützlich sind, können Sie diese auf dieser Basis relativ einfach modifizieren und der Code ist relativ einfach

Der Bildbetrachter verfügt über mehrere Hauptfunktionen:

　 1. Bilder und Bildinformationen (Bildname, Herausgeber usw.) anzeigen

　2. Bilder wechseln

　3. Schließen Sie den Bildbetrachter

Initialisierungsschnittstellenfunktion pictureViewer.init: function(picInfos,tapNumber,isBig)

picInfos: 传入图片组信息，必须，格式如下
 var picInfos = [
  {
   "url" : "default.png",
   "data": [
   {
    "key":"名称:",
    "value":"测试图片"
   },
   {
    "key":"发布者：",
    "value":"chua"
   }
   ]
  },
  {
   "url" : "test.jpeg",
   "data": [
   {
    "key":"名称",
    "value":"测试图片"
   },
   {
    "key":"发布者：",
    "value":"发大水发大水发顺风h"
   },
   {
    "key":"这个图片的其他信息",
    "value":"vsfsgsdgfds234323424"
   }
   ]
  },
  ...
 ] //传入参数的样式

Nach dem Login kopieren

tapNumber: Der Index des Bildes, das in der Bilderliste angezeigt werden soll, muss bei 0 beginnen
isBig: Ob ein großes Bild zum Anzeigen verwendet werden soll, der Standardwert ist false, optional
Die HTML- und CSS-Quellcodes lauten wie folgt (ein Beispiel folgt)

<!DOCTYPE html>
<html lang="ch-cn">
 <head>
　　<meta charset="utf-8">
　　<script type="text/javascript" src='jquery-1.9.1.js'></script>
 <link rel="stylesheet" type="text/css" href="imgTap.css">
 <script type="text/javascript" src='imgTap.js'></script>
 <style type="text/css">
 html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
  margin: 0;
  padding:0;
 }
 *{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }

 body{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .imgTapDetail {
  display: none;
  position: absolute;
  z-index: 2000;
  top: 0;
  width: 100%;
  height: 100%;
  background: none transparent scroll repeat 0% 0%;
  color: #000 !important;
 }
 .page-secShadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  background-color: rgba(0,0,0,.3);
  filter: alpha(opacity=50);
 }

 .page-shadowContent {
  width: 40%;
  margin: 0 auto;
  margin-top: 20%;
  position: relative !important;
  min-width: 400px;
 }
 .page-shadowContent.widget-big{

 }
 .leftTap, .rightTap {
  margin-top: 50%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  top: -80px;
  cursor: pointer;
 }
 .leftTap {
  left: -30%;
  background: url("imgTap.png") 0 0 no-repeat;
 }
 .rightTap {
  right: -30%;
  background: url("imgTap.png") -80px 0 no-repeat;
 }
 .closeTap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  right: -30px;
  top: -30px;
  cursor: pointer;
  background: url("imgTap.png") 0 -165px no-repeat;
  z-index: 99;
 }
 .widget {
  padding: 0 5px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  margin: 3px 0 10px 0;
 }
 .widget-body {
  background-color: #fff;
  -webkit-box-shadow: 1px 0 10px 1px rgba(0,0,0,.3);
  -moz-box-shadow: 1px 0 10px 1px rgba(0,0,0,.3);
  box-shadow: 1px 0 10px 1px rgba(0,0,0,.3);
  padding: 12px;
 }
 .page-shadowContent .widget-body {
  min-height: 200px;
  padding: 15px!important;
  border: 1px solid #ccc;
  overflow: hidden;
 }
 .widget-body .row {
  margin-right: -10px !important;
  margin-left: -10px !important;
 }
 .imgShow {
  text-align: center;
  height: 400px;
  padding-left: 10px;
  padding-right: 10px;
  /*background: url(default.png) center no-repeat;*/
 }
 #tapContent{
  padding-left: 10px;
  padding-right: 10px;
 }
 .imgContent {
  max-width: 400px;
  max-height: 400px;
  vertical-align: middle;
 }
 .widget-body img {
  max-width: 100%;
  height: auto!important;
 }
 .imgShow > span {
  height: 100%;
  display: inline-block;
  vertical-align: middle;
 } 
 .imgTapDetail .form-group {
  overflow: hidden;
  margin-bottom: 0 !important;
  position: relative;
  min-height: 34px;
 }
 .widget-detail .form-group .detail-LabelStyle {
  float: left;
  padding-left: 5px;
  /* max-width: 50%; */
  text-align: left;
  line-height: 34px!important;
  color: rgb(115, 115, 115);
  padding-right: 5px;
  height: 34px;
  overflow: hidden;
  left: 0;
  top: 0;
 }
 .widget-detail .form-group .detail-SpanStyle {
  padding: 8px 0 6px 5px;
  line-height: 20px;
  width: auto;
  height: auto!important;
  min-height: 34px;
  float: left;
  /* margin-left: 80px; */
  word-break: break-all;
 }
 .widget-big {
  width: 80%;
  min-width: 300px;
 }
 .widget-big .leftTap{
  left: -10%;
 }
 .widget-big .rightTap{
  right: -10%;
 }
 .widget-big .widget-detail{
  padding: 40px 0;
 }
 .widget-big .imgShow{
  min-height: 500px;
 }
 .widget-big .imgShow img{
  max-width: 800px; 
  max-height: 550px;
 }
 </style>
 </head>
 <body >
 <div class="imgTapDetail"></div>
 <script type="text/javascript">
 var picInfos = [
  {
  "url" : "default.png",
  "data": [
   {
   "key":"名称:",
   "value":"测试图片"
   },
   {
   "key":"发布者：",
   "value":"chua"
   }
  ]
  },
  {
  "url" : "test.jpeg",
  "data": [
   {
   "key":"名称",
   "value":"测试图片"
   },
   {
   "key":"发布者：",
   "value":"发大水发大水发顺风h"
   },
   {
   "key":"这个图片的其他信息",
   "value":"vsfsgsdgfds234323424"
   }
  ]
  }
 ] 
 pictureViewer.init(picInfos,0,true);
 </script> 
</html>

Nach dem Login kopieren

Der Quellcode von js lautet wie folgt

pictureViewer = {
 picInfos: [],
 curPicIndex: 0,
 isBig:false,//大图查看？默认为false。默认图片显示区域为window宽度的40%，大图为80%
 imgTapSelector:".imgTapDetail",
 init: function(picInfos,tapNumber,isBig){
  var _this = this;

  _this.picInfos = picInfos;
  _this.curPicIndex = tapNumber;
  _this.isBig = isBig;
  tapImgInit();
  
  //图片查看器初始化
  function tapImgInit(){
   //页面代码和事件只需要初始化一次即可
   if(!_this.guid){
    _this.guid = 1;
    initTapImgHtml();
    $(document).on("click","#rightTap",function(){
     _this.curPicIndex++;
     if(_this.curPicIndex == _this.picInfos.length){
      _this.curPicIndex = 0;
     }
     $("#tapContent").html("")
     tapImg()
    }).on("click","#leftTap",function(){
     _this.curPicIndex--;
     if(_this.curPicIndex < 0){
      _this.curPicIndex = _this.picInfos.length-1;
     }
     $("#tapContent").html("")
     tapImg();
    }).on("click","#closeTap",function(){
     $(_this.imgTapSelector).hide("fast")
    })
   }
   var offTop = top.document.body.scrollTop || top.document.documentElement.scrollTop;
   $('#imgTapPanel').css("margin-top",_this.isBig&#63;(offTop>30&#63;offTop:30):offTop + 100)
   tapImg();
   $(_this.imgTapSelector).show("fast");
  }
  //初始化图片查看器的html代码
  function initTapImgHtml(){
   var $detailText = '<div class="page-secShadow" >'
    + '<div id="imgTapPanel" class="page-shadowContent '+(_this.isBig&#63;"widget-big":"")+'">'
    + '<div id="leftTap" class="leftTap"></div>'
    + '<div id="rightTap" class="rightTap"></div>'
    + '<div id="closeTap" class="closeTap"></div>'
    + '<div class="widget row"><div class="widget-body">'
    + '<div class="widget-detail row">'
    + '<div class="imgShow">'
    + '<img src="logo.png" id="tapImg" class="imgContent"><span></span>'
    + '</div>'
    + '<div id="tapContent"></div>'
    + '</div></div></div></div></div>';  
   
   $(_this.imgTapSelector).html($detailText);
   hoverButton("#leftTap", 0, 0, 0, "-80px");
   hoverButton("#rightTap", "-80px", 0, "-80px", "-80px");
   hoverButton("#closeTap", 0, "-165px", "-60px", "-165px");
  }
  //添加左右切换图标、关闭图标的hover响应事件。这个其实可以起到css中更好一些
  function hoverButton(id, x, y, A, B){
   $(id).hover(function(){
    $(this).css('background-position', A + ' '+ B)
   },function(){
    $(this).css('background-position', x + ' '+ y)
   })
  }
  //刷新当前图片及图片信息
  function tapImg(){
   var reg = /[:：]$/,
   leftTap = $("#leftTap"),
   rightTap = $("#rightTap"),
   imgTap = $("#tapImg"),
   contentTap = $("#tapContent");

   leftTap.css("display","block");
   rightTap.css("display","block");
   if(_this.picInfos.length == 1){
    leftTap.css("display","none");
    rightTap.css("display","none");
   }
   imgTap.attr("src",_this.picInfos[_this.curPicIndex].url);

   var data = _this.picInfos[_this.curPicIndex].data,
   dataLength = data.length,
   $text = "";

   for(var i=0; i<dataLength; i++){
    $text += '<div class="form-group">'
     + '<label class="detail-LabelStyle">'+data[i].key.replace(reg,"")+'：</label>'
     + '<span id="spanLoginName" class="detail-SpanStyle">'+data[i].value+'</span>'
     + '</div>';
   };
   contentTap.empty().append($text);

   setTimeout(function(){
    if(_this.isBig && imgTap.height() > 400){
     imgTap.parent().attr("style","height:inherit");
    }else{
     imgTap.parent().removeAttr("style");
    }
   },1);
  }
 }
}

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.

jQuery implementiert einen einfachen Bildbetrachter_jquery