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

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

代码语言：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;
  .........完整代码请登录后点击上方下载按钮下载查看