jQuery实现简单的图片查看器

前端技术 2023/09/06 JavaScript

项目中自己diy了一个图片查看器。因为初始代码不是自己的，只是在上面改了一下也没有弄的很漂亮。等以后有时间了在重写一下样式和封装，作为备用的只是积累吧。如果有童鞋有用到，完全可以在此基础上改，比较容易，代码也比较简单

图片查看器主要有几个功能：

　　1.显示图片和图片信息（图片名称、发布者等等）

　　2.切换图片

　　3.关闭图片查看器

初始化接口函数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\"
   }
   ]
  },
  ...
 ] //传入参数的样式

tapNumber: 要显示的图片在图片列表中的索引，必须，从0开始
isBig：是否使用大图查看，默认是false，可选
html及css源码如下（后面有一个例子）

<!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>

js的源码如下

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?(offTop>30?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?\"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);
  }
 }
}

希望本文所述对大家学习javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/17011

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案