communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > jQuery implémente une simple visionneuse d'images_jquery

jQuery implémente une simple visionneuse d'images_jquery

WBOY
Libérer： 2016-05-16 15:22:38
original
1379 Les gens l'ont consulté

Dans le projet, j'ai bricolé une visionneuse d'images. Comme le code initial n'est pas le mien, je l'ai juste modifié un peu et cela ne s'est pas très bien passé. Je réécrirai le style et l'encapsulation quand j'aurai le temps dans le futur, il suffit de les accumuler en guise de sauvegarde. S'il y a des chaussures pour enfants qui sont utiles, vous pouvez les modifier complètement sur cette base c'est relativement facile et le code est relativement simple

.

La visionneuse d'images a plusieurs fonctions principales :

　 1. Afficher les images et les informations sur l'image (nom de l'image, éditeur, etc.)

　2. Changer d'image

　3. Fermez la visionneuse d'images

Fonction d'interface d'initialisation 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"
   }
   ]
  },
  ...
 ] //传入参数的样式
Copier après la connexion

tapNumber : L'index de l'image à afficher dans la liste des images, doit commencer à 0
isBig : Que ce soit pour utiliser une grande image pour la visualisation, la valeur par défaut est false, facultatif
Les codes sources html et css sont les suivants (un exemple suit) 

<!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>
Copier après la connexion

Le code source de js est le suivant

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);
  }
 }
}
Copier après la connexion

J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.

Étiquettes associées：
jquery 图片查看器
source：php.cn
Article précédent：Méthode de vérification du type de données JavaScript_compétences Javascript Article suivant：Exemple de méthode de contrôle de base d'opération jQuery Analysis_jquery
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Comment récupérer les valeurs des lignes non sélectionnées dans un tableau de données HTML à l'aide de jquery J'essaie d'obtenir la valeur de toutes les lignes sur lesquelles le bouton n'a pas été cli...
Depuis 2024-04-05 09:26:49
0
1
1418
Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...
Depuis 2024-04-04 18:40:04
0
1
3528
J'ai créé un élément en CSS pur via des signets. Il est créé mais n'est pas visible Mon code est le suivant : g=document.createElement('div');g.setAttribute("id",&q...
Depuis 2024-04-04 17:27:27
0
1
417
Impossible d'envoyer les données du formulaire sur Safari/Firefox iOS Cela fonctionne sur toutes les plateformes sauf Safari/Firefox sur iOS : jQuery("#gfo...
Depuis 2024-04-04 12:53:48
0
1
303
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal