visualLightbox实现图片相册放大灯箱效果代码
代码语言:html
所属分类:图片放大
代码描述:visualLightbox实现图片相册放大灯箱效果代码,可自动轮换图片、上下键切换图片。
代码标签: visualLightbo 图片 相册 放大 灯箱
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE HTML> <html lang="en-US" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <style> .boxgrid { background-attachment: scroll; background-image: none; background-position: 0 0; background-repeat: repeat; margin-bottom: 24px; overflow: hidden; position: relative; width: 220px; height: 187px; } .boxgrid img { border: 0 none; left: 0; position: absolute; top: 0; } .boxcaption { background: #d2f3ff; color: #5DACC3; float: left; height: 100px; padding-left: 18px; padding-top: 12px; position: relative; width: 202px; height: 100px; opacity: 0.9; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); } .boxgrid:active { border-bottom-width: 5px; border-top-width: 7px; } .captionfull .boxcaption { left: 0; text-shadow: none !important; top: 260px; } .boxcaption .caption { bottom: 30px; font-size: 14px; position: absolute; } .boxcaption .descr { display: none; } .boxcaption .title { color: #5DACC3; display: block; font-size: 15px; font-weight: 700; letter-spacing: 1px; margin-bottom: 12px; text-shadow: none; text-transform: uppercase; } /*#themes{ font-size: 11px; line-height: 12px; text-align: center; text-decoration: none; margin: 0;}#themes a:hover{ text-decoration: none;}#themes img{ border: 2px solid #5DACC3; opacity: 0.75; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);}*/ /* FREE DOWNLOAD PAGE */ .input_text { background-color: #204F73; border: 1px solid transparent; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 1px rgba(0, 107, 138, 0.1); color: #B0EDFF; cursor: text; font: 12px Arial,sans-serif; line-height: 15px; letter-spacing: normal; margin-left: 1px; padding: 2px 4px; text-align: start; text-indent: 0; text-rendering: optimizelegibility; text-shadow: none; text-transform: none; width: 290px; word-spacing: normal; } .register { width: 150px; height: 30px; cursor: pointer; background-image: url("button.jpg"); background-position: 0 0; background-repeat: repeat; border: none; display: inline-block; box-shadow: 0 0 5px 1px rgba(0, 107, 138, 0.2) inset; border-radius: 5px 5px 5px 5px; margin: 10px 0px 0px 248px; text-align: center; font-family: "BebasNeueRegular",sans-serif; font-size: 22px; line-height: 30px; color: #FFFFFF; text-shadow: 0 2px 0 rgba(0, 107, 138, 0.2); } .register:hover { background-image: url("ticket_body.jpg"); box-shadow: 0 0 5px 1px rgba(0, 107, 138, 0.5) inset; color: #1F4E72; text-decoration: none; } #vlightbox1 { width: 100%; zoom:1; } #vlightbox1 .vlightbox1 { display: -moz-inline-stack; display: inline-block; zoom:1; *display: inline; position: relative; vertical-align: top; margin: 5px; font-family: Trebuchet,Tahoma,Arial,sans-serif; font-size: 11px; font-weight: normal; text-decoration: none; text-align: center; color: #000; padding: 10px; border: 1px solid #eee; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); -webkit-transform-style: preserve-3d; } #vlightbox1 .vlightbox1 a { margin: 0; } #vlightbox1 .vlightbox1 img { display: block; border: none; margin: 0; width: 230px; height: 170px; } #vlightbox1 .vlightbox1 div { display: none } #vlightbox1 .vlightbox1:nth-child(even) { -webkit-transform: rotate(3deg) scale(1.05); -moz-transform: rotate(3deg) scale(1.05); -ms-transform: rotate(3deg) scale(1.05); -o-transform: rotate(3deg) scale(1.05); transform: rotate(3deg) scale(1.05); } #vlightbox1 .vlightbox1 { -moz-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; -webkit-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } #vlightbox1 .vlightbox1:hover { position: relative; z-index: 10; box-shadow: 8px 8px 15px rgba(0,0, 0, 0.4); -webkit-transform: rotate(0deg) scale(1.2); -o-transform: rotate(0deg) scale(1.2); -moz-transform: rotate(0deg) scale(1.2); -ms-transform: rotate(0deg) scale(1.2); transform: rotate(0deg) scale(1.2); } </style> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/visuallightbox.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/visuallightbox.js"></script> </head> <body> <div id="content"> <div class="section_first_demo"> <div class="top_menu"> </div> <div class="separator"></div> <!-- Start VisualLightBox.com BODY section id=1 --> <div id="vlightbox1" align="center"> <a class="vlightbox1" href="//repo.bfw.wiki/bfwrepo/image/62de84ef6c5df.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0