console
;(function ($, document, window) {
$.pic_view = function (options) {
var pictureViewer_html = '<div class="pic_view">' +
'<div class="content">' +
'<div class="menu_bar">' +
'<div class="handel close_view" title="\u5173\u95ED(ESC)"></div>' +
'<div class="handel max" title="\u6700\u5927\u5316"></div>' +
'<div class="handel min hide" title="\u5C0F\u7A97\u53E3"></div>' +
'<div class="clear_flex"></div>' +
'</div>' +
'<div class="handel_prev left" title="\u4E0A\u4E00\u5F20(\u2190)"></div>' +
'<div class="pic_cont">' +
'<img class="cover" src="">' +
'</div>' +
'<div class="handel_next right" title="\u4E0B\u4E00\u5F20(\u2192)"></div>' +
'<div class="counter">' +
'<span class="num"></span> of <span class="total"></span>' +
'</div>' +
'</div>' +
'</div>';
var $images = options.images,
$initImageIndex = options.initImageIndex,
$scrollSwitch = options.scrollSwitch;
if (!$images || !$images.length) return;
if (!$initImageIndex) $initImageIndex = 1;
var $nowImageIndex = $initImageIndex;
if (!$('.pic_view').length) $('body').append(pictureViewer_html);
var BODY = $('body');
var ESC_KEY_CODE = 27;
var LEFT_KEY_CODE = 37;
var RIGHT_KEY_CODE = 39;
var $pictureViewer = $('.pic_view');
var $pictureViewerContent = $pictureViewer.children('.content');
var $cover = $pictureViewer.find('.pic_cont .cover');
var $closeBtn = $pictureViewer.find('.close_view');
var $maximizationBtn = $pictureViewer.find('.max');
var $miniaturizationBtn = $pictureViewer.find('.min');
var $prevBtn = $pictureViewer.find('.handel_prev');
var $nextBtn = $pictureViewer.find('.handel_next');
var $num = $pictureViewer.find('.counter .num');
var $total = $pictureViewer.find('.counter .total');
var defaultViewWidth = $pictureViewerContent.css('width');
var defaultViewHeight = $pictureViewerContent.css('height');
var $imagesTotal = $images.length;
var viewIsShow = function viewIsShow() {
return $pictureViewer.is(':visible');
};
var lockBody = function lockBody() {
return BODY.css('overflow', 'hidden');
};
var unlockBody = function unlockBody() {
return BODY.css('overflow', 'auto');
};
var showView = function showView() {
$pictureViewer.show();
lockBody();
};
var hideView = function hideView() {
$pictureViewer.hide();
$maximizationBtn.show();
$miniaturizationBtn.hide();
$pictureViewerContent.css({ 'width': defaultViewWidth, 'height': defaultViewHeight });
unlockBody();
};
var changeImage = function changeImage(index) {
$cover.attr('src', $images[index]);
$nowImageIndex = index;
changeImageNum();
};
var changeImageNum = function changeImageNum() {
$num.text($nowImageIndex + 1);
};
var toPrevImage = function toPrevImage() {
return changeImage($nowImageIndex === 0 ? $imagesTotal - 1 : $nowImageIndex - 1);
};
var toNextImage = function toNextImage() {
return changeImage($nowImageIndex === $imagesTotal - 1 ? 0 : $nowImageIndex + 1);
};
showView();
changeImage($initImageIndex - 1);
$total.text($imagesTotal);
$closeBtn.on('click', hideView);
$maximizationBtn.on('click', function () {
$(this).hide();
$miniaturizationBtn.show();
$pictureViewerContent.css({ 'width': '100%', 'height': '100%' });
});
$miniaturizationBtn.on('click', function () {
$(this).hide();
$maximizationBtn.show();
$pictureViewerContent.css({ 'width': defaultViewWidth, 'height': defaultViewHeight });
});
$(document).on('keydown', function (event) {
if (!viewIsShow()) return;
var keyCode = event.keyCode;
if (keyCode === ESC_KEY_CODE) hideView();
if (keyCode === LEFT_KEY_CODE) toPrevImage();
if (keyCode === RIGHT_KEY_CODE) toNextImage();
});
$prevBtn.on('click', toPrevImage);
$nextBtn.on('click', toNextImage);
if ($scrollSwitch) {
try {
$pictureViewerContent.mousewheel(function (event, delta) {
if (delta === 1) toPrevImage();
if (delta === -1) toNextImage();
});
} catch (e) {
throw 'mousewheel plugin No import!';
}
}
};
})(jQuery, document, window);
!
function(a) {
"function" == typeof define && define.amd ? define(["jquery"], a) : "object" == typeof exports ? module.exports = a: a(jQuery)
} (function(a) {
function b(b) {
var g = b || window.event,
h = i.call(arguments, 1),
j = 0,
l = 0,
m = 0,
n = 0,
o = 0,
p = 0;
if (b = a.event.fix(g), b.type = "mousewheel", "detail" in g && (m = -1 * g.detail), "wheelDelta" in g && (m = g.wheelDelta), "wheelDeltaY" in g && (m = g.wheelDeltaY), "wheelDeltaX" in g && (l = -1 * g.wheelDeltaX), "axis" in g && g.axis === g.HORIZONTAL_AXIS && (l = -1 * m, m = 0), j = 0 === m ? l: m, "deltaY" in g && (m = -1 * g.deltaY, j = m), "deltaX" in g && (l = g.deltaX, 0 === m && (j = -1 * l)), 0 !== m || 0 !== l) {
if (1 === g.deltaMode) {
var q = a.data(this, "mousewheel-line-height");
j *= q,
m *= q,
l *= q
} else if (2 === g.deltaMode) {
var r = a.data(this, "mousewheel-page-height");
j *= r,
m *= r,
l *= r
}
if (n = Math.max(Math.abs(m), Math.abs(l)), (!f || f > n) && (f = n, d(g, n) && (f /= 40)), d(g, n) && (j /= 40, l /= 40, m /= 40), j = Math[j >= 1 ? "floor": "ceil"](j / f), l = Math[l >= 1 ? "floor": "ceil"](l / f), m = Math[m >= 1 ? "floor": "ceil"](m / f), k.settings.normalizeOffset && this.getBoundingClientRect) {
var s = this.getBoundingClientRect();
o = b.clientX - s.left,
p = b.clientY - s.top
}
return b.deltaX = l,
b.deltaY = m,
b.deltaFactor = f,
b.offsetX = o,
b.offsetY = p,
b.deltaMode = 0,
h.unshift(b, j, l, m),
e && clearTimeout(e),
e = setTimeout(c, 200),
(a.event.dispatch || a.event.handle).apply(this, h)
}
}
function c() {
f = null
}
function d(a, b) {
return k.settings.adjustOldDeltas && "mousewheel" === a.type && b % 120 === 0
}
var e, f, g = ["wheel", "mousewheel", "DOMMouseScroll", "MozMousePixelScroll"],
h = "onwheel" in document || document.documentMode >= 9 ? ["wheel"] : ["mousewheel", "DomMouseScroll", "MozMousePixelScroll"],
i = Array.prototype.slice;
if (a.event.fixHooks) for (var j = g.length; j;) a.event.fixHooks[g[--j]] = a.event.mouseHooks;
var k = a.event.special.mousewheel = {
version: "3.1.12",
setup: function() {
if (this.addEventListener) for (var c = h.length; c;) this.addEventListener(h[--c], b, !1);
else this.onmousewheel = b;
a.data(this, "mousewheel-line-height", k.getLineHeight(this)),
a.data(this, "mousewheel-page-height", k.getPageHeight(this))
},
teardown: function() {
if (this.removeEventListener) for (var c = h.length; c;) this.removeEventListener(h[--c], b, !1);
else this.onmousewheel = null;
a.removeData(this, "mousewheel-line-height"),
a.removeData(this, "mousewheel-page-height")
},
getLineHeight: function(b) {
var c = a(b),
d = c["offsetParent" in a.fn ? "offsetParent": "parent"]();
return d.length || (d = a("body")),
parseInt(d.css("fontSize"), 10) || parseInt(c.css("fontSize"), 10) || 16
},
getPageHeight: function(b) {
return a(b).height()
},
settings: {
adjustOldDeltas: !0,
normalizeOffset: !0
}
};
a.fn.extend({
mousewheel: function(a) {
return a ? this.bind("mousewheel", a) : this.trigger("mousewheel")
},
unmousewheel: function(a) {
return this.unbind("mousewheel", a)
}
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片列表页</title>
<meta name="keywords" content="网页关键词" />
<meta name="description" content="这里写网页的简要描述" />
</head>
<body>
<main>
<div class="curre">
<a href=""><div class="home"></div></a>
<span> </span>
<span><a href="">首页</a></span>
<span> > </span>
<span><a href="#">成长相册</a></span>
<span> > </span>
<span class="cur_pag">成长相册</span>
</div>
<div class="main_cont">
<div class="image_list">
<ul class="show_6" pagesize="6">
<li>
<div class="cover"><img src="https://s1.ax1x.com/2020/06/19/NujmAP.png" alt="">
<h4>测试图片1</h4>
<p>2020-06-19</p>
</div>
</li>
<li>
<div class="cover"><img src="https://s1.ax1x.com/2020/06/19/NujNNV.png" alt="">
<h4>测试图片2</h4>
<p>2020-06-19</p>
</div>
</li>
<li>
<div class="cover"><img src="https://s1.ax1x.com/2020/06/19/NujmAP.png" alt="">
<h4>测试图片3</h4>
<p>2020-06-19</p>
</div>
</li>
<li>
<div class="cover"><img src="https://s1.ax1x.com/2020/06/19/NujNNV.png" alt="">
<h4>测试图片4</h4>
<p>2020-06-19</p>
</div>
</li>
<li>
<div class="cover"><img src="https://s1.ax1x.com/2020/06/19/NujmAP.png" alt="">
<h4>测试图片5</h4>
<p>2020-06-19</p>
</div>
</li>
<li>
<div class="cover"><img src="https://s1.ax1x.com/2020/06/19/NujNNV.png" alt="">
<h4>测试图片6</h4>
<p>2020-06-19</p>
</div>
</li>
<li>
<div class="cover"><img src="https://s1.ax1x.com/2020/06/19/NujmAP.png" alt="">
<h4>测试图片7</h4>
<p>2020-06-19</p>
</div>
</li>
<li>
<div class="cover"><img src="https://s1.ax1x.com/2020/06/19/NujNNV.png" alt="">
<h4>测试图片8</h4>
<p>2020-06-19</p>
</div>
</li>
</ul>
</div>
</div>
</main>
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/pic_view.js"></script>
<script>
$(function () {
$('.image_list').on('click', '.cover', function () {
var this_ = $(this);
var images = this_.parents('.image_list').find('.cover');
var imagesArr = new Array();
$.each(images, function (i, image) {
imagesArr.push($(image).children('img').attr('src'));
});
$.pic_view({
images: imagesArr,
initImageIndex: this_.index() + 1,
scrollSwitch: true
});
});
});
</script>
</body>
</html>
html { height: 100% }
body { min-height: 100%; _height: 100%; background-color:#F5F7F9 }
body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, iframe, pre, code, fieldset, legend, form, input, select, textarea, button, p, blockquote, th, td, figure { margin: 0; padding: 0 }
body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, iframe, pre, code, fieldset, legend, form, p, blockquote, figure, header, footer, nav, article, section, aside, address, figcaption { *zoom: 1 }
li { list-style-type: none }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight:normal; }
iframe, frame, fieldset, img { border: none }
img { vertical-align: top }
input[type=button], input[type=submit], input[type=reset] { cursor: pointer }
button { cursor: pointer }
input, textarea, button { -webkit-border-radius: 0; -webkit-appearance: none }
input[type=radio] { -webkit-border-radius: 100%; -webkit-appearance: radio }
input[type=checkbox] { -webkit-appearance: checkbox }
input[type=search] { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box }
textarea { overflow: auto; resize: none }
blockquote, q { quotes: none }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none }
table { border-collapse: collapse; border-spacing: 0 }
caption, th { text-align: left }
th { font-weight: normal }
em, cite, address,i { font-style: normal }
sup { vertical-align: text-top }
sub { vertical-align: text-bottom }
body, input, select, button, textarea { font-size: 14px; font-family:"\5FAE\8F6F\96C5\9ED1",arial,"\5b8b\4f53" }
body { line-height: 1.5 }
a { color:#06c; text-decoration: none }
a * { *cursor: pointer }
a:hover { color:#f30; text-decoration:underline }
.clearboth { clear:both; overflow:hidden; height:1px; line-height:1px }
.a_space_line { height:8px; line-height:8px; overflow:hidden }
.a_alert { font-size:14px; margin:10px auto 0 auto; text-align:center; color:#03a; line-height:15px }
.a_error_alert { font-size:14px; text-align:center; color:#f00; margin:14px auto 0 auto; line-height:15px }
.home, .tb, .max, .min, .close_view, .handel_prev, .handel_next { background: url(https://s1.ax1x.com/2020/06/19/NujyH1.png) no-repeat; }
.curre { width: 100%; height: 100%; margin-top: 100px; margin-left: 360px; display: inline-block; }
.curre .home { display: inline-block; width: 12px; height: 12px; background-position: -1887px -415px; }
.curre span { margin-top: -5px; }
.curre span a { font-size: 15px; font-weight: bold; color: #333333; }
.curre .cur_pag { font-size: 15px; font-weight: bold; color: #007855; }
.curre a:hover { text-decoration: none; color: #F08200; }
img { max-width: 100%; max-height: 100%; }
.main_cont { width: 960px; margin-left: 320px; overflow: hidden; }
.image_list { margin-top: 40px; }
.image_list .cover { position: relative; float: left; margin-left: 40px; margin-top: 30px; cursor: pointer; }
.image_list .cover img { width: 438px; height: 280px; }
.image_list .cover h4 { font-size: 18px; font-weight: 500; margin-top: 10px; text-align: center; }
.image_list .cover p { font-size: 14px; font-weight: 400; margin-top: 5px; text-align: center; }
.pic_view { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,.3); z-index: 10000; }
.pic_view > .content { background-color: #fff; position: absolute; width: 590px; height: 420px; margin: auto; top: 0; right: 0; bottom: 0; left: 0; }
.pic_view .menu_bar { width: 100%; }
.pic_view .menu_bar .handel { width: 40px; height: 40px; float: right; background-repeat: no-repeat; background-position: 50%; cursor: pointer;}
.pic_view .menu_bar .handel:hover { -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
.pic_view .menu_bar .handel.max { width: 14px; height: 14px; background-position: -43px -763px; margin-top: 10px; margin-right: 10px; }
.pic_view .menu_bar .handel.max:hover { width: 14px; height: 14px; background-position: -89px -763px; }
.pic_view .menu_bar .handel.min { width: 18px; height: 16px; background-position: -137px -763px; margin-top: 10px; margin-right: 10px; }
.pic_view .menu_bar .handel.min:hover { width: 18px; height: 16px; background-position: -199px -763px; }
.pic_view .menu_bar .handel.close_view { width: 15px; height: 15px; background-position: -42px -840px; margin-top: 10px; margin-right: 10px; }
.pic_view .menu_bar .handel.close_view:hover { width: 15px; height: 15px; background-position: -81px -840px; }
.pic_view .handel_prev,.pic_view .handel_next { display: inline-block; position: relative; top: calc(50% - 80px); background-repeat: no-repeat; background-position: 50%; cursor: pointer; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
.pic_view .handel_prev { width: 23px; height: 40px; background-position: -43px -900px; }
.pic_view .handel_next { width: 21px; height: 38px; background-position: -134px -902px; }
.pic_view .handel_prev:hover,.pic_view .handel_next:hover { background-color: #ff2e67; }
.pic_view .handel_prev:hover { width: 23px; height: 40px; background-position: -43px -983px; }
.pic_view .handel_next:hover { width: 21px; height: 38px; background-position: -134px -983px; }
.pic_view .pic_cont { display: inline-block; width: 80%; height: calc(100% - 80px); position: absolute; margin: 0 auto; left: 0; right: 0; }
.pic_view .pic_cont .cover { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; }
.pic_view .counter { position: absolute; bottom: 0; height: 40px; line-height: 40px; width: 100%; text-align: center; color: #808080; font-size: 13px; }
.pic_view .hide { display: none; }
.pic_view .left { float: left; }
.pic_view .right { float: right; }
.pic_view .clear_flex { clear: both; }
.pic_view img { max-width: 100%; max-height: 100%; }