首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

jQuery实现简单的图片查看器

- Author -

chua1989

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 Javascript
值得分享的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
GF515(1) PL550(1) SHARP(1) RP2100(1) 德劲1102(1) 德劲1107(1) SRF-M100(1) 乐信(1) 安健(1) A254(1)
You might like
PHP的MVC模式实现原理分析（一相简单的MVC框架范例）
2014/04/29 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
javascript 弹出层组件（升级版）
2011/05/12 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
Python3实现发送QQ邮件功能（文本）
2017/12/15 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
python线程池如何使用
2020/05/28 Python
CSS3贝塞尔曲线示例：创建链接悬停动画效果
2020/11/19 HTML / CSS
人力资源专员自我评价怎么写
2013/09/19 职场文书
中医药大学市场营销专业自荐信
2013/09/29 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
决心书格式及范文
2019/06/24 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
JS代码编译器Monaco使用方法
2021/06/11 Javascript