jQuery實作簡單的圖片檢視器_jquery-js教程-PHP中文網

首頁

web前端

js教程

jQuery實作簡單的圖片檢視器_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:22 PM

jquery 圖片檢視器

專案中自己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&#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);
  }
 }
}

登入後複製

希望本文所述對大家學習javascript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7467

CakePHP 教程

1376

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

jQuery引用方法詳解：快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法詳解：快速上手指南jQuery是一個受歡迎的JavaScript庫，被廣泛用於網站開發中，它簡化了JavaScript編程，並為開發者提供了豐富的功能和特性。本文將詳細介紹jQuery的引用方法，並提供具體的程式碼範例，幫助讀者快速上手。引入jQuery首先，我們需要在HTML檔案中引入jQuery函式庫。可以透過CDN連結的方式引入，也可以下載

jQuery如何移除元素的height屬性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height屬性？在前端開發中，經常會遇到需要操作元素的高度屬性的需求。有時候，我們可能需要動態改變元素的高度，而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性，並提供具體的程式碼範例。在使用jQuery操作高度屬性之前，我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

如何判斷jQuery元素是否具有特定屬性？ Feb 29, 2024 am 09:03 AM

如何判斷jQuery元素是否具有特定屬性？在使用jQuery操作DOM元素時，常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下，我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性，並附上具體的程式碼範例。方法一：使用attr()方法和typeof運算子//判斷元素是否具有特定屬

了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s

PHP常用的檔案操作函數總結 Apr 03, 2024 pm 02:52 PM

目錄1：basename()2：copy()3：dirname()4：disk_free_space()5：disk_total_space()6：file_exists()7：file_get_contents()8：file_put_contents()9：filesize()10：filetype( )11：glob()12：is_dir()13：is_writable()14：mkdir()15：move_uploaded_file()16：parse_ini_file()17：

See all articles

jQuery實作簡單的圖片檢視器_jquery

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題