jquery.poptrox实现相册图片点击放大轮换效果代码-html代码-BFW代码库

代码语言：html
代码描述：jquery.poptrox实现相册图片点击放大轮换效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE HTML>
<html>

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/fontawesome.5.9.0.css">
    <style>
        /*
        	Parallelism by HTML5 UP
        	html5up.net | @ajlkn
        	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
        */
        
        html, body, div, span, applet, object,
        iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
        pre, a, abbr, acronym, address, big, cite,
        code, del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var, b,
        u, i, center, dl, dt, dd, ol, ul, li, fieldset,
        form, label, legend, table, caption, tbody,
        tfoot, thead, tr, th, td, article, aside,
        canvas, details, embed, figure, figcaption,
        footer, header, hgroup, menu, nav, output, ruby,
        section, summary, time, mark, audio, video {
        	margin: 0;
        	padding: 0;
        	border: 0;
        	font-size: 100%;
        	font: inherit;
        	vertical-align: baseline;}
        
        article, aside, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section {
        	display: block;}
        
        body {
        	line-height: 1;
        }
        
        ol, ul {
        	list-style: none;
        }
        
        blockquote, q {
        	quotes: none;
        }
        
        	blockquote:before, blockquote:after, q:before, q:after {
        		content: '';
        		content: none;
        	}
        
        table {
        	border-collapse: collapse;
        	border-spacing: 0;
        }
        
        body {
        	-webkit-text-size-adjust: none;
        }
        
        mark {
        	background-color: transparent;
        	color: inherit;
        }
        
        input::-moz-focus-inner {
        	border: 0;
        	padding: 0;
        }
        
        input, select, textarea {
        	-moz-appearance: none;
        	-webkit-appearance: none;
        	-ms-appearance: none;
        	appearance: none;
        }
        
        /* Basic */
        
        	html {
        		box-sizing: border-box;
        	}
        
        	*, *:before, *:after {
        		box-sizing: inherit;
        	}
        
        	body {
    
      
        		background-position: top left, bottom left, auto;
        		background-size: auto, 100% 100%, cover;
        		background-attachment: fixed;
        		background-repeat: repeat, no-repeat, auto;
        		position: relative;
        		background-color: #150C07;
        		line-height: 1.75em;
        		overflow-x: hidden;
        		overflow-y: auto;
        	}
        
        		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
        			-moz-animation: none !important;
        			-webkit-animation: none !important;
        			-ms-animation: none !important;
        			animation: none !important;
        			-moz-transition: none !important;
        			-webkit-transition: none !important;
        			-ms-transition: none !important;
        			transition: none !important;
        		}
        
        		@media screen and (max-width: 1280px) {
        
        			body {
        				background-attachment: scroll;
        			}
        
        		}
        
        		@media screen and (max-width: 736px) {
        
        			body {
        				background-attachment: scroll;
        				background-size: auto, 100% 100%, 250% auto;
        				background-repeat: repeat, no-repeat, no-repeat;
        				background-position: top left, bottom left, 50% 0%;
        			}
        
        		}
        
        	body, input, select, textarea {
        		font-family: 'Source Sans Pro';
        		font-weight: 400;
        		padding: 0;
        		font-size: 13pt;
        		color: rgba(255, 255, 255, 0.6);
        	}
        
        		@media screen and (max-width: 1680px) {
        
        			body, input, select, textarea {
        				font-size: 11pt;
        			}
        
        		}
        
        		@media screen and (max-width: 1280px) {
        
        			body, input, select, textarea {
        				font-size: 10pt;
        			}
        
        		}
        
        		@media screen and (max-width: 980px) {
        
        			body, input, select, textarea {
        				font-size: 11pt;
        			}
        
        		}
        
        	a {
        		color: #fff;
        		color: rgba(255, 255, 255, 0.85);
        		text-decoration: none;
        		-moz-transition: color 0.25s ease-in-out;
        		-webkit-transition: color 0.25s ease-in-out;
        		-ms-transition: color 0.25s ease-in-out;
        		transition: color 0.25s ease-in-out;
        	}
        
        		a:hover {
        			color: #d64760;
        		}
        
        	h1, h2, h3, h4, h5, h6 {
        		font-weight: 400;
        		color: #fff;
        		letter-spacing: -0.05em;
        	}
        
        	strong, b {
        		color: #fff;
        		color: rgba(255, 255, 255, 0.85);
        		font-weight: 600;
        	}
        
        /* List */
        
        	ul.icons {
        		cursor: default;
        		margin: 0 0 0.5em 0;
        	}
        
        		ul.icons li {
        			display: inline-block;
        			font-size: 1.5em;
        			margin-left: 1em;
        		}
        
        			ul.icons li span {
        				display: none;
        			}
        
        			ul.icons li a {
        				opacity: 0.35;
        				color: #fff;
        				-moz-transition: opacity 0.25s ease-in-out;
        				-webkit-transition: opacity 0.25s ease-in-out;
        				-ms-transition: opacity 0.25s ease-in-out;
        				transition: opacity 0.25s ease-in-out;
        			}
        
        				ul.icons li a:hover {
        					opacity: 1.0;
        				}
        
        			ul.icons li:first-child {
        				margin-left: 0;
        			}
        
        		@media screen and (max-width: 736px) {
        
        			ul.icons {
        				margin: 0 0 2em 0;
        			}
        
        		}
        
        /* Icons */
        
        	.icon {
        		text-decoration: none;
        		position: relative;
        		text-decoration: none;
        	}
        
        		.icon:before {
        			-moz-osx-font-smoothing: grayscale;
        			-webkit-font-smoothing: antialiased;
        			display: inline-block;
        			font-style: normal;
        			font-variant: normal;
        			text-rendering: auto;
        			line-height: 1;
        			text-transform: none !important;
        			font-family: 'Font Awesome 5 Free';
        			font-weight: 400;
        		}
        
        		.icon:before {
        			line-height: inherit;
        		}
        
        		.icon > .label {
        			display: none;
        		}
        
        		.icon.solid:before {
        			font-weight: 900;
        		}
        
        		.icon.brands:before {
        			font-family: 'Font Awesome 5 Brands';
        		}
        
        /* Wrapper */
        
        	#wrapper {
        		min-height: 100vh;
        		display: -moz-flex;
        		display: -webkit-flex;
        		display: -ms-flex;
        		display: flex;
        		-moz-flex-direction: column;
        		-webkit-flex-direction: column;
        		-ms-flex-direction: column;
        		flex-direction: column;
        		-moz-justify-content: space-between;
        		-webkit-justify-content: space-between;
        		-ms-justify-content: space-between;
        		justify-content: space-between;
        		-moz-align-items: center;
        		-webkit-align-items: center;
        		-ms-align-items: center;
        		align-items: center;
        		-moz-transition: -moz-filter 0.5s ease-in-out;
        		-webkit-transition: -webkit-filter 0.5s ease-in-out;
        		-ms-transition: -ms-filter 0.5s ease-in-out;
        		transition: filter 0.5s ease-in-out;
        	}
        
        		#wrapper:before {
        			content: '';
        			display: block;
        		}
        
        		body.is-poptrox-visible #wrapper {
        			-moz-filter: blur(0.25em);
        			-webkit-filter: blur(0.25em);
        			-ms-filter: blur(0.25em);
        			filter: blur(0.25em);
        		}
        
        		@media screen and (max-width: 736px) {
        
        			#wrapper {
        				min-height: 0;
        			}
        
        		}
        
        /* Scroll Zone */
        
        	.scrollZone {
        		position: fixed;
        		width: 6rem;
        		height: 100vh;
        		cursor: -moz-grab;
        		cursor: -webkit-grab;
        		cursor: -ms-grab;
        		cursor: grab;
        		z-index: 10001;
        	}
        
        		.scrollZone.left {
        			left: 0;
        		}
        
        		.scrollZone.right {
        			right: 0;
        		}
        
        		@media screen and (max-width: 736px) {
        
        			.scrollZone {
        				display: none;
        			}
        
.........完整代码请登录后点击上方下载按钮下载查看