jQuery实现简单的图片查看器


Posted in Javascript onSeptember 11, 2020

项目中自己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程序设计有所帮助。

Javascript 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
Seajs源码详解分析
Apr 02 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 #Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 #Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 #Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 #Javascript
JavaScript阻止回车提交表单的方法
Dec 30 #Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 #Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 #Javascript
You might like
php Static关键字实用方法
2010/06/04 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
python 项目目录结构设置
2020/02/14 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
Python读写Excel表格的方法
2021/03/02 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
电气自动化自荐信
2013/10/10 职场文书
《乌塔》教学反思
2014/02/17 职场文书