Commit 515ff1ff2fb2e04bda7e8162637403b42a1efeb1
1 parent
3306f394
rebuild
Showing
14 changed files
with
193 additions
and
93 deletions
css/common.css
| @@ -59,23 +59,23 @@ table { | @@ -59,23 +59,23 @@ table { | ||
| 59 | .posabs{ | 59 | .posabs{ |
| 60 | position: absolute; | 60 | position: absolute; |
| 61 | } | 61 | } |
| 62 | -.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} | 62 | +.clearfix{clear:both;height:0;overflow:hidden;} |
| 63 | /*头部*/ | 63 | /*头部*/ |
| 64 | header{ | 64 | header{ |
| 65 | height: 80px; | 65 | height: 80px; |
| 66 | - background:#1e1e1e; | ||
| 67 | } | 66 | } |
| 68 | /*底部*/ | 67 | /*底部*/ |
| 69 | footer{ | 68 | footer{ |
| 70 | width:100%; | 69 | width:100%; |
| 71 | - height:40px; | 70 | + height:130px; |
| 72 | position:fixed; | 71 | position:fixed; |
| 73 | bottom:0; | 72 | bottom:0; |
| 74 | left:0; | 73 | left:0; |
| 75 | - background:#1e1e1e; | 74 | + /*background:#1e1e1e;*/ |
| 76 | cursor: pointer; | 75 | cursor: pointer; |
| 77 | - color: rgba(255,255,255,0.4); | 76 | + /*color: rgba(255,255,255,0.4);*/ |
| 78 | font-size: 12px; | 77 | font-size: 12px; |
| 79 | text-align: center; | 78 | text-align: center; |
| 80 | - line-height: 40px; | ||
| 81 | -} | ||
| 82 | \ No newline at end of file | 79 | \ No newline at end of file |
| 80 | + /*line-height: 40px;*/ | ||
| 81 | +} | ||
| 82 | + |
css/index.css
| @@ -3,16 +3,19 @@ body,html{ | @@ -3,16 +3,19 @@ body,html{ | ||
| 3 | height: 100%; | 3 | height: 100%; |
| 4 | overflow: hidden; | 4 | overflow: hidden; |
| 5 | letter-spacing:1px; | 5 | letter-spacing:1px; |
| 6 | + background: url("../img/bodybg.png") no-repeat; | ||
| 7 | + background-size:100% 100% ; | ||
| 6 | } | 8 | } |
| 7 | /*<!--头部-->*/ | 9 | /*<!--头部-->*/ |
| 8 | header{ | 10 | header{ |
| 9 | height: 80px; | 11 | height: 80px; |
| 10 | - background-color: #1a222c; | 12 | + /*background-color: #1a222c;*/ |
| 11 | } | 13 | } |
| 12 | .index_topbar{ | 14 | .index_topbar{ |
| 13 | width: 1160px; | 15 | width: 1160px; |
| 14 | height: 80px; | 16 | height: 80px; |
| 15 | margin: 0 auto; | 17 | margin: 0 auto; |
| 18 | + /*overflow: hidden;*/ | ||
| 16 | } | 19 | } |
| 17 | .topbar_lmodel{ | 20 | .topbar_lmodel{ |
| 18 | background: url(../img/logo.png) no-repeat; | 21 | background: url(../img/logo.png) no-repeat; |
| @@ -23,7 +26,7 @@ header{ | @@ -23,7 +26,7 @@ header{ | ||
| 23 | font-size: 22px; | 26 | font-size: 22px; |
| 24 | color: #fff; | 27 | color: #fff; |
| 25 | text-indent: 53px; | 28 | text-indent: 53px; |
| 26 | - display: inline-block; | 29 | + float: left; |
| 27 | margin-top: 23.5px; | 30 | margin-top: 23.5px; |
| 28 | } | 31 | } |
| 29 | .topbar_rmodel{ | 32 | .topbar_rmodel{ |
| @@ -61,6 +64,8 @@ header{ | @@ -61,6 +64,8 @@ header{ | ||
| 61 | margin-right: 26px; | 64 | margin-right: 26px; |
| 62 | color: #fff; | 65 | color: #fff; |
| 63 | font-size: 14px; | 66 | font-size: 14px; |
| 67 | + padding-left: 48px; | ||
| 68 | + background: url("../img/userId-icon.png") no-repeat 0 center; | ||
| 64 | } | 69 | } |
| 65 | .topbar_userMsg li{ | 70 | .topbar_userMsg li{ |
| 66 | float: left; | 71 | float: left; |
| @@ -69,10 +74,11 @@ header{ | @@ -69,10 +74,11 @@ header{ | ||
| 69 | cursor: pointer; | 74 | cursor: pointer; |
| 70 | } | 75 | } |
| 71 | .userId{ | 76 | .userId{ |
| 72 | - width: 80px; | ||
| 73 | - overflow: hidden; | ||
| 74 | - white-space: nowrap; | ||
| 75 | - text-overflow: ellipsis; | 77 | + /*width: 80px;*/ |
| 78 | + /*overflow: hidden;*/ | ||
| 79 | + /*white-space: nowrap;*/ | ||
| 80 | + /*text-overflow: ellipsis;*/ | ||
| 81 | + | ||
| 76 | } | 82 | } |
| 77 | .login_out_btn{ | 83 | .login_out_btn{ |
| 78 | cursor: pointer; | 84 | cursor: pointer; |
| @@ -82,11 +88,9 @@ header{ | @@ -82,11 +88,9 @@ header{ | ||
| 82 | /*<!--内容-->*/ | 88 | /*<!--内容-->*/ |
| 83 | .main-con{ | 89 | .main-con{ |
| 84 | width: 100%; | 90 | width: 100%; |
| 85 | - height: calc(100% - 120px); | ||
| 86 | - height: -webkit-calc(100% - 120px); | ||
| 87 | - height: -moz-calc(100% - 120px); | ||
| 88 | - background: url("../img/bg.png") no-repeat; | ||
| 89 | - background-size: 100% 100%; | 91 | + height: calc(100% - 210px); |
| 92 | + height: -webkit-calc(100% - 210px); | ||
| 93 | + height: -moz-calc(100% - 210px); | ||
| 90 | position: relative; | 94 | position: relative; |
| 91 | } | 95 | } |
| 92 | .main-wrap{ | 96 | .main-wrap{ |
| @@ -1198,4 +1202,63 @@ header{ | @@ -1198,4 +1202,63 @@ header{ | ||
| 1198 | width: 100%; | 1202 | width: 100%; |
| 1199 | margin-top: 8px; | 1203 | margin-top: 8px; |
| 1200 | } | 1204 | } |
| 1205 | +.silde-wrap{ | ||
| 1206 | + width: 1200px; | ||
| 1207 | + height: 444px; | ||
| 1208 | + overflow: hidden; | ||
| 1209 | + margin: 0 auto; | ||
| 1210 | + | ||
| 1211 | +} | ||
| 1212 | +.silde-wrap li:nth-of-type(1){ | ||
| 1213 | + width: 1200px; | ||
| 1214 | + height: 444px; | ||
| 1215 | + background:url("../img/silde-wrap1-icon.png") no-repeat ; | ||
| 1216 | + cursor: pointer; | ||
| 1217 | +} | ||
| 1218 | +.silde-wrap li:nth-of-type(2){ | ||
| 1219 | + width: 1200px; | ||
| 1220 | + height: 444px; | ||
| 1221 | + background-color: #ff0; | ||
| 1222 | + cursor: pointer; | ||
| 1223 | +} | ||
| 1224 | +.silde-wrap li:nth-of-type(3){ | ||
| 1225 | + width: 1200px; | ||
| 1226 | + height: 444px; | ||
| 1227 | + background-color: #f0f; | ||
| 1228 | + cursor: pointer; | ||
| 1229 | +} | ||
| 1230 | +/*底部_______________________________________________*/ | ||
| 1231 | +.footer-nav{ | ||
| 1232 | + width: 1270px; | ||
| 1233 | + height: 130px; | ||
| 1234 | + margin: 0 auto; | ||
| 1235 | + background: url("../img/footer-bg.png") no-repeat center bottom; | ||
| 1236 | + display: flex; | ||
| 1237 | +} | ||
| 1238 | +.footer-nav li{ | ||
| 1239 | + flex: 1; | ||
| 1240 | + width: 76px; | ||
| 1241 | + height: 130px; | ||
| 1242 | + padding-top: 86px; | ||
| 1243 | + cursor: pointer; | ||
| 1244 | + font-size:24px; | ||
| 1245 | + font-weight:600; | ||
| 1246 | + color:rgba(255,255,255,1); | ||
| 1247 | + background-repeat: no-repeat; | ||
| 1248 | + background-position: center 0; | ||
| 1249 | +} | ||
| 1250 | +.footer-nav li:nth-of-type(1){ | ||
| 1251 | + background-image:url("../img/footer-nav1-icon.png") ; | ||
| 1252 | +} | ||
| 1253 | +.footer-nav li:nth-of-type(2){ | ||
| 1254 | + background-image:url("../img/footer-nav2-icon.png") ; | ||
| 1255 | +} | ||
| 1256 | +.footer-nav li:nth-of-type(3){ | ||
| 1257 | + background-image:url("../img/footer-nav3-icon.png") ; | ||
| 1258 | +} | ||
| 1259 | +.nav-active{ | ||
| 1260 | + background-color:rgba(255,255,255,.1) ; | ||
| 1261 | + border-radius:31px; | ||
| 1262 | + border:1px solid rgba(158,231,255,.3); | ||
| 1201 | 1263 | ||
| 1264 | +} |
img/bg.png deleted
402 KB
img/bodybg.png
0 → 100644
2.58 MB
img/footer-bg.png
0 → 100644
33.1 KB
img/footer-nav1-icon.png
0 → 100644
5.22 KB
img/footer-nav2-icon.png
0 → 100644
3.67 KB
img/footer-nav3-icon.png
0 → 100644
4.45 KB
img/silde-wrap1-icon.png
0 → 100644
167 KB
img/userId-icon.png
0 → 100644
1.23 KB
index.html
| @@ -9,89 +9,97 @@ | @@ -9,89 +9,97 @@ | ||
| 9 | <meta http-equiv="expires" content="0"> | 9 | <meta http-equiv="expires" content="0"> |
| 10 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | 10 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
| 11 | <title>平台汇总</title> | 11 | <title>平台汇总</title> |
| 12 | - <link rel="stylesheet" href="css/common.css"> | ||
| 13 | - <link rel="stylesheet" href="css/index.css"> | 12 | + <link rel="stylesheet" href="css/common.css?v=1"> |
| 13 | + <link rel="stylesheet" href="css/index.css?a=1"> | ||
| 14 | <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> | 14 | <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> |
| 15 | <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> | 15 | <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> |
| 16 | </head> | 16 | </head> |
| 17 | <body> | 17 | <body> |
| 18 | <!--头部--> | 18 | <!--头部--> |
| 19 | <header> | 19 | <header> |
| 20 | - <div class="index_topbar"> | 20 | + <div class="index_topbar clearfix"> |
| 21 | <span class="topbar_lmodel">丹阳行</span> | 21 | <span class="topbar_lmodel">丹阳行</span> |
| 22 | <ul class="topbar_rmodel"> | 22 | <ul class="topbar_rmodel"> |
| 23 | <!--登录前--> | 23 | <!--登录前--> |
| 24 | - <li id="topbar_tologin" class="topbar_tologin" onclick="window.location.href='login.html'"> | ||
| 25 | - 登入 | ||
| 26 | - </li> | 24 | + <!--<li id="topbar_tologin" class="topbar_tologin" onclick="window.location.href='login.html'">--> |
| 25 | + <!--登入--> | ||
| 26 | + <!--</li>--> | ||
| 27 | <!--登录后--> | 27 | <!--登录后--> |
| 28 | <li class="topbar_userMsg" id="topbar_userMsg"> | 28 | <li class="topbar_userMsg" id="topbar_userMsg"> |
| 29 | - <span class="userId" id="userId">赤峰管理员</span> | 29 | + <span class="userId" id="userId"></span> |
| 30 | <span class="login_out_btn" id="login_out_btn">退出</span> | 30 | <span class="login_out_btn" id="login_out_btn">退出</span> |
| 31 | </li> | 31 | </li> |
| 32 | - <li class="topbar_addLeague" onclick="window.location.href='league.html'">加盟</li> | 32 | + <!--<li class="topbar_addLeague" onclick="window.location.href='league.html'">加盟</li>--> |
| 33 | </ul> | 33 | </ul> |
| 34 | 34 | ||
| 35 | </div> | 35 | </div> |
| 36 | </header> | 36 | </header> |
| 37 | <!--内容--> | 37 | <!--内容--> |
| 38 | -<div class="main-con"> | ||
| 39 | - <ul class="main-wrap" id="main-wrap"> | ||
| 40 | - <li> | ||
| 41 | - <div class="demo1"> | ||
| 42 | - <figure class="imghvr-push-down"><img src="img/index-l-1.png"> | ||
| 43 | - <figcaption class="posrel"> | ||
| 44 | - <img src="img/index-l-2.png"> | ||
| 45 | - <div class="posabs clicklink" data-link="http://ent.dyszt.com/parkingcloud/admin/SubMenus/index.html">企业云</div> | ||
| 46 | -<!-- <div class="posabs clicklink" id="monPlat" data-link="http://www.rnting.com/monitoringPlatform/" >监控平台</div> | ||
| 47 | ---> | ||
| 48 | - </figcaption> | ||
| 49 | - </figure> | ||
| 50 | - </div> | ||
| 51 | - </li> | ||
| 52 | - <li> | ||
| 53 | - <div class="demo2"> | ||
| 54 | - <figure class="imghvr-push-down"><img src="img/index-t-1.png"> | ||
| 55 | - <figcaption class="posrel"> | ||
| 56 | - <img src="img/index-t-2.png"> | ||
| 57 | -<!-- | ||
| 58 | - <div class="posabs clicklink" id="cfgov_data" data-link="http://zteits.gnway.cc:8021/cfgovcloud/pages/total.html">数据平台</div> | ||
| 59 | ---> | ||
| 60 | -<div class="posabs clicklink" id="cfgov_data1" data-link="http://gov.dyszt.com/govcloud/webpage/auth.html?authCode=104b8b62e02a324e9c4c9e52ad5b0003">数据平台</div> | ||
| 61 | - </figcaption> | ||
| 62 | - </figure> | ||
| 63 | - </div> | ||
| 64 | - <div class="demo3"> | ||
| 65 | - <figure class="imghvr-push-down"><img src="img/index-b-1.png"> | ||
| 66 | - <figcaption class="posrel"> | ||
| 67 | - <img src="img/index-b-2.png"> | ||
| 68 | -<!-- | ||
| 69 | - <div class="posabs clicklink" id="onlyInterLogin" data-link="">接口平台</div> | ||
| 70 | ---> | ||
| 71 | - </figcaption> | ||
| 72 | - </figure> | ||
| 73 | - </div> | ||
| 74 | - </li> | ||
| 75 | - <li> | ||
| 76 | - <div class="demo4"> | ||
| 77 | - <figure class="imghvr-push-down"><img src="img/index-r-1.png"> | ||
| 78 | - <figcaption class="posrel"> | ||
| 79 | - <img src="img/index-r-2.png"> | ||
| 80 | -<!-- | ||
| 81 | - <div class="posabs clicklink" id="gprmxc" data-link="http://www.rnting.com/gprmxc/home/home.html">备案系统</div> | ||
| 82 | - <div class="posabs clicklink" id="caruser_msg" data-link="http://121.40.121.40:8070/v2.1/html/user_login.html">车主系统</div> | ||
| 83 | ---> | ||
| 84 | - </figcaption> | ||
| 85 | - </figure> | ||
| 86 | - </div> | ||
| 87 | - </li> | 38 | +<div class="main-con clearfix"> |
| 39 | + <!--<ul class="main-wrap" id="main-wrap">--> | ||
| 40 | + <!--<li>--> | ||
| 41 | + <!--<div class="demo1">--> | ||
| 42 | + <!--<figure class="imghvr-push-down"><img src="img/index-l-1.png">--> | ||
| 43 | + <!--<figcaption class="posrel">--> | ||
| 44 | + <!--<img src="img/index-l-2.png">--> | ||
| 45 | + <!--<div class="posabs clicklink" data-link="http://ent.dyszt.com/parkingcloud/admin/SubMenus/index.html">企业云</div>--> | ||
| 46 | +<!--<!– <div class="posabs clicklink" id="monPlat" data-link="http://www.rnting.com/monitoringPlatform/" >监控平台</div>--> | ||
| 47 | +<!--–>--> | ||
| 48 | + <!--</figcaption>--> | ||
| 49 | + <!--</figure>--> | ||
| 50 | + <!--</div>--> | ||
| 51 | + <!--</li>--> | ||
| 52 | + <!--<li>--> | ||
| 53 | + <!--<div class="demo2">--> | ||
| 54 | + <!--<figure class="imghvr-push-down"><img src="img/index-t-1.png">--> | ||
| 55 | + <!--<figcaption class="posrel">--> | ||
| 56 | + <!--<img src="img/index-t-2.png">--> | ||
| 57 | +<!--<!–--> | ||
| 58 | + <!--<div class="posabs clicklink" id="cfgov_data" data-link="http://zteits.gnway.cc:8021/cfgovcloud/pages/total.html">数据平台</div>--> | ||
| 59 | +<!--–>--> | ||
| 60 | +<!--<div class="posabs clicklink" id="cfgov_data1" data-link="http://gov.dyszt.com/govcloud/webpage/auth.html?authCode=104b8b62e02a324e9c4c9e52ad5b0003">数据平台</div>--> | ||
| 61 | + <!--</figcaption>--> | ||
| 62 | + <!--</figure>--> | ||
| 63 | + <!--</div>--> | ||
| 64 | + <!--<div class="demo3">--> | ||
| 65 | + <!--<figure class="imghvr-push-down"><img src="img/index-b-1.png">--> | ||
| 66 | + <!--<figcaption class="posrel">--> | ||
| 67 | + <!--<img src="img/index-b-2.png">--> | ||
| 68 | +<!--<!–--> | ||
| 69 | + <!--<div class="posabs clicklink" id="onlyInterLogin" data-link="">接口平台</div>--> | ||
| 70 | +<!--–>--> | ||
| 71 | + <!--</figcaption>--> | ||
| 72 | + <!--</figure>--> | ||
| 73 | + <!--</div>--> | ||
| 74 | + <!--</li>--> | ||
| 75 | + <!--<li>--> | ||
| 76 | + <!--<div class="demo4">--> | ||
| 77 | + <!--<figure class="imghvr-push-down"><img src="img/index-r-1.png">--> | ||
| 78 | + <!--<figcaption class="posrel">--> | ||
| 79 | + <!--<img src="img/index-r-2.png">--> | ||
| 80 | +<!--<!–--> | ||
| 81 | + <!--<div class="posabs clicklink" id="gprmxc" data-link="http://www.rnting.com/gprmxc/home/home.html">备案系统</div>--> | ||
| 82 | + <!--<div class="posabs clicklink" id="caruser_msg" data-link="http://121.40.121.40:8070/v2.1/html/user_login.html">车主系统</div>--> | ||
| 83 | +<!--–>--> | ||
| 84 | + <!--</figcaption>--> | ||
| 85 | + <!--</figure>--> | ||
| 86 | + <!--</div>--> | ||
| 87 | + <!--</li>--> | ||
| 88 | + <!--</ul>--> | ||
| 89 | + <ul class="silde-wrap" id="box"> | ||
| 90 | + <li ></li> | ||
| 91 | + <li ></li> | ||
| 92 | + <li ></li> | ||
| 88 | </ul> | 93 | </ul> |
| 89 | 94 | ||
| 90 | - | ||
| 91 | </div> | 95 | </div> |
| 92 | <!--底部--> | 96 | <!--底部--> |
| 93 | <footer> | 97 | <footer> |
| 94 | - 版权所有: 中兴智能交通股份有限公司 © 2008-2017.ZTE ITS LIMITED. All Rights Reserved | 98 | + <ul class="footer-nav" id="controls"> |
| 99 | + <li class="" data-slideindex="0">云平台</li> | ||
| 100 | + <li data-slideindex="1">数据平台</li> | ||
| 101 | + <li data-slideindex="2">接口平台</li> | ||
| 102 | + </ul> | ||
| 95 | </footer> | 103 | </footer> |
| 96 | <!--提示弹窗 sta--> | 104 | <!--提示弹窗 sta--> |
| 97 | <div class="modal fade" id="alertmodel" style="display: none" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> | 105 | <div class="modal fade" id="alertmodel" style="display: none" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> |
| @@ -112,6 +120,7 @@ | @@ -112,6 +120,7 @@ | ||
| 112 | <script src="js/jquery.min.js"></script> | 120 | <script src="js/jquery.min.js"></script> |
| 113 | <script src="js/unit.js"></script> | 121 | <script src="js/unit.js"></script> |
| 114 | <script src="bootstrap/js/bootstrap.min.js"></script> | 122 | <script src="bootstrap/js/bootstrap.min.js"></script> |
| 123 | +<script src="js/slider.js"></script> | ||
| 115 | <script type="text/javascript"> | 124 | <script type="text/javascript"> |
| 116 | document.write("<s" + "cript type='text/javascript' src='js/index.js?ver" + Math.random() + "'></s" + "cript>"); | 125 | document.write("<s" + "cript type='text/javascript' src='js/index.js?ver" + Math.random() + "'></s" + "cript>"); |
| 117 | </script> | 126 | </script> |
js/index.js
| 1 | -/** | ||
| 2 | - * Created by mac on 17/11/28. | ||
| 3 | - */ | ||
| 4 | -// <!--头部--> | 1 | + |
| 5 | 2 | ||
| 6 | // <!--内容--> | 3 | // <!--内容--> |
| 7 | // fn.getUserName(); | 4 | // fn.getUserName(); |
| 8 | console.log(fn.getUserName()); | 5 | console.log(fn.getUserName()); |
| 9 | if(fn.getUserName()==''|| fn.getUserName()==undefined||fn.getUserName()==null){ | 6 | if(fn.getUserName()==''|| fn.getUserName()==undefined||fn.getUserName()==null){ |
| 10 | - | 7 | + fn.loginOut(); |
| 11 | $('#topbar_userMsg').hide(); | 8 | $('#topbar_userMsg').hide(); |
| 12 | $('#topbar_tologin').show(); | 9 | $('#topbar_tologin').show(); |
| 13 | }else if(fn.getUserName()=='燕松梅赤峰测试'){ | 10 | }else if(fn.getUserName()=='燕松梅赤峰测试'){ |
| @@ -41,15 +38,7 @@ $('#login_out_btn').on('click', function () { | @@ -41,15 +38,7 @@ $('#login_out_btn').on('click', function () { | ||
| 41 | // console.log("token:" + fn.getToken()); | 38 | // console.log("token:" + fn.getToken()); |
| 42 | fn.loginOut(); | 39 | fn.loginOut(); |
| 43 | }); | 40 | }); |
| 44 | -/*$('#main-wrap .clicklink').on('click',function () { | ||
| 45 | - if($('#topbar_tologin').css('display')=='block'){ | ||
| 46 | - fn.toLoginPage(); | ||
| 47 | - }else{ | ||
| 48 | - var link = $(this).attr('data-link'); | ||
| 49 | - window.open(link) | ||
| 50 | - } | ||
| 51 | -http://www.rnting.com/api/index.html | ||
| 52 | -})*/ | 41 | + |
| 53 | $('#main-wrap .clicklink').on('click',function () { | 42 | $('#main-wrap .clicklink').on('click',function () { |
| 54 | if($('#topbar_tologin').css('display')=='block'){ | 43 | if($('#topbar_tologin').css('display')=='block'){ |
| 55 | fn.toLoginPage(); | 44 | fn.toLoginPage(); |
| @@ -75,4 +64,23 @@ $('#main-wrap .clicklink').on('click',function () { | @@ -75,4 +64,23 @@ $('#main-wrap .clicklink').on('click',function () { | ||
| 75 | window.open(link) | 64 | window.open(link) |
| 76 | } | 65 | } |
| 77 | 66 | ||
| 78 | -}) | ||
| 79 | \ No newline at end of file | 67 | \ No newline at end of file |
| 68 | +}) | ||
| 69 | +var $box = $('#box') | ||
| 70 | +$box.boxSlider({ | ||
| 71 | + speed: 1000 | ||
| 72 | + , autoScroll: true | ||
| 73 | + , timeout: 5000 | ||
| 74 | + , next: '#next' | ||
| 75 | + , prev: '#prev' | ||
| 76 | + , pause: '#pause' | ||
| 77 | + , effect: 'scrollHorz' | ||
| 78 | + , blindCount: 15 | ||
| 79 | + | ||
| 80 | +}); | ||
| 81 | + | ||
| 82 | +$('#controls').on('click', 'li', function (ev) { | ||
| 83 | + console.log($(this).data('slideindex')) | ||
| 84 | + $box.boxSlider('showSlide', $(this).data('slideindex')); | ||
| 85 | + //ev.preventDefault(); | ||
| 86 | +}); | ||
| 87 | + |
js/slider.js
0 → 100644
| 1 | +// JavaScript Document | ||
| 2 | +(function(i,f,r){var g={},s=!0,p={},u={speed:800,timeout:5E3,autoScroll:!1,pauseOnHover:!1,effect:"scrollVert3d",perspective:1E3};i.jqBoxSlider=g;g.init=function(a){var b=f.extend({},u,a),d=g.slideAnimator(b.effect);return this.each(function(){var a=f(this),h=a.children(),e=f.extend({},b);a.data("bssettings",e);e.slideAnimator=d;e.slideAnimator.initialize(a,h,e);v(a,e);if(e.autoScroll&&(e.autointv=setInterval(function(){n(a)},e.timeout+e.speed),e.pauseOnHover))a.on("hover",o)})};g.playPause=function(){return this.each(function(){o.call(f(this))})}; | ||
| 3 | + g.showSlide=function(a){a=parseInt(a,10);return this.each(function(){var b=f(this);q(b);n(b,a)})};g.registerAnimator=function(a,b){f.each(a.split(","),function(a,c){p[c]=b});b._cacheOriginalCSS=w;"function"===typeof b.configure&&b.configure(s,x)};g.slideAnimator=function(a){if("object"===typeof p[a])return p[a];throw Error("The slide animator for the "+a+" effect has not been registered");};g.option=function(a,b){return"undefined"===typeof b?(this.data("bssettings")||{})[a]:this.each(function(){var d= | ||
| 4 | + f(this),c=d.data("bssettings")||{};c[a]=b;q(d,c);"effect"===a?(c.slideAnimator.destroy(d,c),c.slideAnimator=g.slideAnimator(b),c._slideFilter=null,c.bsfaceindex=0,c.slideAnimator.initialize(d,d.children(),c)):"function"===typeof c.slideAnimator.reset&&c.slideAnimator.reset(d,c)})};g.destroy=function(){return this.each(function(){var a=f(this),b=(a.data()||{}).bssettings;b&&"object"===typeof b.slideAnimator&&(b.autointv&&clearInterval(b.autointv),b.slideAnimator.destroy(a,b))})};var v=function(a,b){var d= | ||
| 5 | + f();null!=b.next&&(d=d.add(f(b.next).on("click",{reverse:!1},t)));null!=b.prev&&(d=d.add(f(b.prev).on("click",{reverse:!0},t)));null!=b.pause&&(d=d.add(f(b.pause).on("click",y)));d.data("bsbox",a)},t=function(a){var b=f(this).data("bsbox");q(b);n(b,r,a.data.reverse);a.preventDefault()},y=function(a){var b=f(this),d=b.data("bsbox");o.call(d);b.toggleClass("paused");a.preventDefault()},o=function(a,b,d){var c=f(this);d||(d=c.data("bssettings"));if(null!=d.autointv||b)if(d.autointv=clearInterval(d.autointv), | ||
| 6 | + !b)return;d.autointv=setInterval(function(){n(c)},d.timeout+d.speed)},n=function(a,b,d){var c=a.data("bssettings"),h=a.children(),e,k,j,g;null!=c._slideFilter&&(h="function"===typeof c._slideFilter?h.filter(function(b){return c._slideFilter.call(h,b,c)}):h.filter(c.slideFilter));e=c.bsfaceindex||0;k=z(e,h.length,d,b);a.hasClass("jbs-in-motion")||-1===k||(j=h.eq(e),g=h.eq(k),a.addClass("jbs-in-motion"),"function"===typeof c.onbefore&&c.onbefore.call(a,j,g,e,k),f.extend(c,c.slideAnimator.transition(f.extend({$box:a, | ||
| 7 | + $slides:h,$currSlide:j,$nextSlide:g,reverse:d,currIndex:e,nextIndex:k},c))),setTimeout(function(){a.removeClass("jbs-in-motion");"function"===typeof c.onafter&&c.onafter.call(a,j,g,e,k)},c.speed),c.bsfaceindex=k)},q=function(a,b){b||(b=a.data("bssettings")||{});b.autoScroll&&o.call(a,r,!0,b)},z=function(a,b,d,c){null==c&&(c=d?0>a-1?b-1:a-1:a+1<b?a+1:0);return c===a||c>=b||0>c?-1:c},w=function(a,b,d,c){c="position top left display overflow width height".split(" ").concat(c||[]);d.origCSS||(d.origCSS= | ||
| 8 | + {});d.origCSS[b]||(d.origCSS[b]={});f.each(c,function(h,e){d.origCSS[b][e]=a.css(e)})},x=function(){var a=document.body.style,b="";"webkitTransition"in a&&(b="-webkit-");"MozTransition"in a&&(b="-moz-");s="webkitPerspective"in a||"MozPerspective"in a||"perspective"in a;return b}();f.fn.boxSlider=function(a){return"string"===typeof a&&"function"===typeof g[a]?g[a].apply(this,Array.prototype.slice.call(arguments,1)):g.init.apply(this,arguments)};i.jqBoxSlider.registerAnimator("blindDown,blindLeft", | ||
| 9 | + function(){var a=function(b,a){return this.get(b)!==a.$blinds.get(0)},b=function(b){return b.attr("src")||b.find("img").attr("src")},d=function(b){switch(b.effect){case "blindDown":return{top:"100%"};case "blindLeft":return{width:"0px"}}},c=function(a){var e={backgroundImage:"url("+b(a.$nextSlide)+")"};switch(a.effect){case "blindDown":e.top="0px";break;case "blindLeft":e.width=a.blindSize}return e};return{initialize:function(d,e,c){var j=f(document.createElement("div")),g=b(e.eq(0)),l,m=0;c.blindCount|| | ||
| 10 | + (c.blindCount=10);c.blindSpeed=c.speed;c.blindintv=c.speed/c.blindCount;c.speed+=c.blindintv*c.blindCount;c.blindSize=d.width()/c.blindCount;this._cacheOriginalCSS(d,"box",c);for(this._cacheOriginalCSS(e,"slides",c);m<c.blindCount;++m)l=m*c.blindSize,f(document.createElement("div")).css({position:"absolute",top:"0px",left:l+"px",width:c.blindSize+"px",height:"100%",backgroundImage:"url("+g+")",backgroundPosition:-l+"px 0px"}).appendTo(j);d.css("position","relative");d.css({height:e.css("height"), | ||
| 11 | + overflow:"hidden"});e.css({zIndex:1,position:"absolute",top:0,left:0});j.css({position:"absolute",top:"0px",left:"0px",width:"100%",height:"100%",zIndex:2}).appendTo(d);c.$blinds=j;c._slideFilter=a},transition:function(b){b.$box.height();var a=b.$blinds.children();b.$slides.hide();b.$nextSlide.show();a.each(function(a,c){(function(){var e=b.blindintv*a,g=f(c);setTimeout(function(){g.animate(d(b),b.blindSpeed)},e)})()});setTimeout(function(){a.css(c(b))},b.speed)},destroy:function(b,a){a.$blinds.remove(); | ||
| 12 | + b.css(a.origCSS.box);b.children().css(a.origCSS.slides);a.speed=a.blindSpeed;delete a.blindCount;delete a.blindSpeed;delete a.blindintv;delete a.$blinds;delete a.blindSize}}}());i.jqBoxSlider.registerAnimator("fade",function(){var a={initialize:function(b,d,c){a._cacheOriginalCSS(b,"box",c);a._cacheOriginalCSS(d,"slides",c);-1!=="static inherit".indexOf(b.css("position"))&&b.css("position","relative");b.css({height:d.eq(0).height(),overflow:"hidden"});d.css({position:"absolute",top:0,left:0}).filter(":gt(0)").hide()}, | ||
| 13 | + transition:function(b){b.$nextSlide.fadeIn(b.speed);b.$currSlide.fadeOut(b.speed)},destroy:function(b,a){b.children().css(a.origCSS.slides);b.css(a.origCSS.box)}};return a}());i.jqBoxSlider.registerAnimator("scrollVert3d,scrollHorz3d",function(){var a={},b=!1,d="";a.configure=function(a,c){b=a;d=c};a.initialize=function(c,e,f){var g=c.parent(),i=g.innerWidth(),l=g.innerHeight(),m={position:"absolute",top:0,left:0,width:i,height:l};a._cacheOriginalCSS(c,"box",f,[d+"transform",d+"transition",d+"transform-style"]); | ||
| 14 | + a._cacheOriginalCSS(e,"slides",f,[d+"transform"]);a._cacheOriginalCSS(e,"viewport",f,[d+"perspective"]);e.css(m);c.css(m);-1!=="static inherit".indexOf(g.css("position"))&&g.css("position","relative");b?(f.translateZ="scrollVert3d"===f.effect?l/2:i/2,f.bsangle=0,g.css(d+"perspective",f.perspective),g.css("overflow","visible"),c.css(d+"transform-style","preserve-3d"),c.css(d+"transform","translate3d(0, 0, -"+f.translateZ+"px)"),e.eq(0).css(d+"transform","rotate3d(0, 1, 0, 0deg) translate3d(0, 0, "+ | ||
| 15 | + f.translateZ+"px)"),setTimeout(function(){a.reset(c,f)},10)):e.filter(":gt(0)").hide()};a.reset=function(b,a){b.css(d+"transition",d+"transform "+(a.speed/1E3+"s"))};a.transition=function(a){var e=a.bsangle+(a.reverse?90:-90),f="scrollVert3d"===a.effect;if(b)return 0===e&&(e=a.reverse?360:-360),a.$currSlide.css("z-index",1),a.$slides.filter(function(b){return a.currIndex!==b}).css(d+"transform","none").css("display","none"),a.$nextSlide.css(d+"transform",c(e,f)+" translate3d(0, 0,"+a.translateZ+"px)").css({display:"block", | ||
| 16 | + zIndex:2}),a.$box.css(d+"transform","translate3d(0, 0, -"+a.translateZ+"px) rotate3d("+(f?"1, 0, 0, ":"0, 1, 0, ")+e+"deg)"),360===Math.abs(e)&&(a.$box.css(d+"transform","translate3d(0, 0, -"+a.translateZ+"px)"),e=0),{bsangle:e};a.$slides.filter(function(b){return a.currIndex!==b}).hide();a.$currSlide.fadeOut(a.speed);a.$nextSlide.fadeIn(a.speed)};a.destroy=function(a,b){var c=a.children(),d=a.parent();b.origCSS&&(a.css(b.origCSS.box),c.css(b.origCSS.slides),d.css(b.origCSS.viewport),delete b.bsangle, | ||
| 17 | + delete b.translateZ)};var c=function(a,b){switch(a){case 360:case -360:return"rotate3d(0, 1, 0, 0deg)";case 90:case -270:return"rotate3d("+(b?"1, 0, 0,":"0, 1, 0,")+" -90deg)";case 180:case -180:return"rotate3d("+(b?"1, 0, 0,":"0, 1, 0,")+" 180deg)";case 270:case -90:return"rotate3d("+(b?"1, 0, 0,":"0, 1, 0,")+" 90deg)"}};return a}());i.jqBoxSlider.registerAnimator("scrollVert,scrollHorz",function(){var a={initialize:function(b,d,c){var f=b.width(),e=d.eq(0).height();a._cacheOriginalCSS(b,"box",c); | ||
| 18 | + a._cacheOriginalCSS(d,"slides",c);-1!=="static inherit".indexOf(b.css("position"))&&b.css("position","relative");b.css({height:e,overflow:"hidden"});d.css({position:"absolute",top:0,left:0,width:f,height:e}).filter(":gt(0)").hide()},transition:function(a){var d=a.$box,c=a.reverse,g={},e={};"scrollVert"===a.effect?(e.top=(c?d.height():-d.height())+"px",g.top=-parseInt(e.top,10)+"px",d={top:"0px"}):(e.left=(c?d.width():-d.width())+"px",g.left=-parseInt(e.left,10)+"px",d={left:"0px"});a.$nextSlide.css(f.extend(e, | ||
| 19 | + {display:"block"})).animate(d,a.speed);a.$currSlide.animate(g,a.speed)},destroy:function(a,d){a.children().css(d.origCSS.slides);a.css(d.origCSS.box)}};return a}())})(window,jQuery||Zepto); |