jQuery實(shí)現(xiàn)簡(jiǎn)單的圖片查看器
更新時(shí)間：2020年09月11日 14:16:22 作者：chua1989
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的圖片查看器的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
項(xiàng)目中自己diy了一個(gè)圖片查看器。因?yàn)槌跏即a不是自己的，只是在上面改了一下也沒有弄的很漂亮。等以后有時(shí)間了在重寫一下樣式和封裝，作為備用的只是積累吧。如果有童鞋有用到，完全可以在此基礎(chǔ)上改，比較容易，代碼也比較簡(jiǎn)單
圖片查看器主要有幾個(gè)功能：
1.顯示圖片和圖片信息（圖片名稱、發(fā)布者等等）
2.切換圖片
3.關(guān)閉圖片查看器
初始化接口函數(shù)pictureViewer.init: function(picInfos,tapNumber,isBig)
picInfos: 傳入圖片組信息，必須，格式如下
var picInfos = [
{
"url" : "default.png",
"data": [
{
"key":"名稱:",
"value":"測(cè)試圖片"
},
{
"key":"發(fā)布者：",
"value":"chua"
}
]
},
{
"url" : "test.jpeg",
"data": [
{
"key":"名稱",
"value":"測(cè)試圖片"
},
{
"key":"發(fā)布者：",
"value":"發(fā)大水發(fā)大水發(fā)順風(fēng)h"
},
{
"key":"這個(gè)圖片的其他信息",
"value":"vsfsgsdgfds234323424"
}
]
},
...
] //傳入?yún)?shù)的樣式
tapNumber: 要顯示的圖片在圖片列表中的索引，必須，從0開始
isBig：是否使用大圖查看，默認(rèn)是false，可選
html及css源碼如下（后面有一個(gè)例子）
<!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":"測(cè)試圖片"
},
{
"key":"發(fā)布者：",
"value":"chua"
}
]
},
{
"url" : "test.jpeg",
"data": [
{
"key":"名稱",
"value":"測(cè)試圖片"
},
{
"key":"發(fā)布者：",
"value":"發(fā)大水發(fā)大水發(fā)順風(fēng)h"
},
{
"key":"這個(gè)圖片的其他信息",
"value":"vsfsgsdgfds234323424"
}
]
}
]
pictureViewer.init(picInfos,0,true);
</script>
</html>
js的源碼如下
pictureViewer = {
picInfos: [],
curPicIndex: 0,
isBig:false,//大圖查看？默認(rèn)為false。默認(rèn)圖片顯示區(qū)域?yàn)閣indow寬度的40%，大圖為80%
imgTapSelector:".imgTapDetail",
init: function(picInfos,tapNumber,isBig){
var _this = this;
_this.picInfos = picInfos;
_this.curPicIndex = tapNumber;
_this.isBig = isBig;
tapImgInit();
//圖片查看器初始化
function tapImgInit(){
//頁(yè)面代碼和事件只需要初始化一次即可
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");
}
//添加左右切換圖標(biāo)、關(guān)閉圖標(biāo)的hover響應(yīng)事件。這個(gè)其實(shí)可以起到css中更好一些
function hoverButton(id, x, y, A, B){
$(id).hover(function(){
$(this).css('background-position', A + ' '+ B)
},function(){
$(this).css('background-position', x + ' '+ y)
})
}
//刷新當(dāng)前圖片及圖片信息
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);
}
}
}
希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
jquery滾動(dòng)加載數(shù)據(jù)的方法
這篇文章主要介紹了jquery滾動(dòng)加載數(shù)據(jù)的方法,實(shí)例分析了jQuery動(dòng)態(tài)加載數(shù)據(jù)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jquery實(shí)現(xiàn)點(diǎn)擊頁(yè)面回到頂部
本篇文章主要是對(duì)點(diǎn)擊回到頁(yè)面頂部或是首頁(yè)的功能進(jìn)行了介紹，這是頁(yè)面常用到的效果，需要的朋友可以過來參考下2016-11-11
B/S開發(fā)的朋友，首頁(yè)常常需要一些新聞圖片切換的特效，鑒于jQuery良好的插件開發(fā)機(jī)制，我也常常自己寫一些實(shí)用的小插件，這里分享一個(gè)新聞圖片切換插件2011-10-10
我們?cè)谇岸碎_發(fā)，經(jīng)常要用到彈出層的效果，以前很早前就想將這個(gè)功能整理成一個(gè)公共的接口來實(shí)現(xiàn)了；自寫的第一個(gè)jQuery插件，這里分享給大家，有需要的小伙伴參考下。2015-04-04
jquery validate添加自定義驗(yàn)證規(guī)則(驗(yàn)證郵箱 郵政編碼)
這篇文章主要介紹了query validate添加自定義驗(yàn)證規(guī)則,可以驗(yàn)證郵箱、郵政編碼等，看代碼參考使用2013-12-12
這篇文章主要介紹了jQuery表單域?qū)傩赃^濾器用法,實(shí)例分析了:checked、:enabled、:disabled:、selected等常用表單域?qū)傩赃^濾器使用技巧,需要的朋友可以參考下2015-02-02
jQuery簡(jiǎn)單實(shí)現(xiàn)QQ空間點(diǎn)贊已經(jīng)取消點(diǎn)贊
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)QQ空間點(diǎn)贊已經(jīng)取消點(diǎn)贊的代碼，非常的好用，這里推薦給大家，有需要的小伙伴參考下。2015-04-04
jQuery實(shí)現(xiàn)導(dǎo)航欄頭部菜單項(xiàng)點(diǎn)擊后變換顏色的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)導(dǎo)航欄頭部菜單項(xiàng)點(diǎn)擊后變換顏色的方法,涉及jQuery響應(yīng)鼠標(biāo)事件針對(duì)頁(yè)面元素的遍歷及屬性變換相關(guān)操作技巧,需要的朋友可以參考下2017-07-07
使用jQuery Ajax功能時(shí)需要注意的一個(gè)問題(內(nèi)存溢出)
最近發(fā)現(xiàn)jQuery越來越火，用它的人也越來越多。jQuery最強(qiáng)大的亮點(diǎn)莫過于它的CSS3 selector和極其簡(jiǎn)單的Ajax請(qǐng)求調(diào)用2012-05-05
這篇文章主要介紹了jQuery EasyUI菜單與按鈕詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07