Browse Source

优化,增加音乐

master
wen 2 years ago
parent
commit
6209982d97
  1. 20
      imgthemes1/css/index.css
  2. 2
      imgthemes1/images/contactUs.svg
  3. 2
      imgthemes1/images/music.svg
  4. 19
      imgthemes1/index.html
  5. 23
      imgthemes1/js/index.js

20
imgthemes1/css/index.css

@ -67,11 +67,15 @@ a:link{text-decoration:none;}
.web_info a{text-decoration: underline;color:#808080;} .web_info a{text-decoration: underline;color:#808080;}
.web_info a:hover{color:#000;} .web_info a:hover{color:#000;}
.btrt_side{position:fixed;bottom:46px;right:16px;transition:all 0.5s ease;} .btrt_side{position:fixed;bottom:48px;right:16px;transition:all 0.5s ease;}
.btrt_side_ul li{margin-top:4px;color:#878686;cursor:pointer;width:38px;height: 38px;line-height:38px;border-radius:50%;text-align:center;background-color:#f5f5f5;} .btrt_side_ul li{margin-top:4px;color:#878686;cursor:pointer;width:38px;height: 38px;line-height:38px;border-radius:50%;text-align:center;background-color:#f5f5f5;}
.btrt_side_ul li:hover{background:rgba(209, 209, 209, 1);color:#3e3d3d;} .btrt_side_ul li:hover{background:rgba(209, 209, 209, 1);color:#3e3d3d;}
.scroll_top{display:none;} .scroll_top{display:none;}
.btrt_side_ul li .svg{width:18px;cursor:pointer;} .btrt_side_ul .svg{width:18px;cursor:pointer;}
.btrt_side_ul .icon3{width:26px;}
/* 音乐相关 */
.music_put{animation:musicTurn 3s linear infinite;}
.blank_cover{transition: all 0.5s ease;position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0, 0, 0, .7);opacity:0;z-index: 1099} .blank_cover{transition: all 0.5s ease;position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0, 0, 0, .7);opacity:0;z-index: 1099}
.right_sidebox{padding:15px 10px 15px 18px;opacity:0;transform:translateX(101%);background-color:#FFF;position:fixed;right:0;top:0;bottom:0;color:#333;width:396px;overflow-y:auto;max-width:100%;z-index:1100;} .right_sidebox{padding:15px 10px 15px 18px;opacity:0;transform:translateX(101%);background-color:#FFF;position:fixed;right:0;top:0;bottom:0;color:#333;width:396px;overflow-y:auto;max-width:100%;z-index:1100;}
@ -85,12 +89,16 @@ a:link{text-decoration:none;}
.page_meta{padding:10px 0 0 0;} .page_meta{padding:10px 0 0 0;}
.page_meta .breadcrumb{background:none;display: inline-block;padding:8px 0 8px 0;margin:0;} .page_meta .breadcrumb{background:none;display: inline-block;padding:8px 0 8px 0;margin:0;}
.breadcrumbs{padding-left:1.5em;padding-bottom:10px}
.breadcrumbs small{font-size:13px;}
/* 主题切换 */ /* 主题切换 */
.lampshow .web_info{border-color:#363636;} .lampshow .web_info{border-color:#363636;}
.lampshow .btrt_side_ul li{background-color:#181818;} .lampshow .btrt_side_ul li{background-color:#181818;}
.lampshow .right_sidebox{background-color:#222;color:#FFF;} .lampshow .right_sidebox{background-color:#222;color:#FFF;}
.lampshow .right_sidebox>h5{border-color: #363636;} .lampshow .right_sidebox>h5{border-color: #363636;}
.lampshow .text_dark{color:#808080;}
.lampshow .text_dark a{color:#f4f7fd;}
@media screen and (max-width: 1199px) { @media screen and (max-width: 1199px) {
.im_item { .im_item {
@ -110,7 +118,15 @@ a:link{text-decoration:none;}
} }
} }
@keyframes musicTurn {
0% {
-webkit-transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg)
}
}
@keyframes bounceInRight { @keyframes bounceInRight {
0%, 0%,
60%, 60%,

2
imgthemes1/images/contactUs.svg

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg class="icon verMiddle" style="color:#6c6c6c;width:2em;height:2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3661"><path d="M364.5 488.8m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#27A27D" p-id="3662"></path><path d="M512 488.8m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#27A27D" p-id="3663"></path><path d="M659.5 488.8m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#27A27D" p-id="3664"></path><path d="M897.8 488.8C897.8 276.1 724.7 103 512 103S126.2 276.1 126.2 488.8c0 83.4 26.2 162.7 75.7 229.5 7.4 10 21.5 12.1 31.5 4.7s12.1-21.5 4.7-31.5c-43.7-59-66.8-129.1-66.8-202.7C171.2 300.9 324.1 148 512 148s340.8 152.9 340.8 340.8c0 182-143.5 330.7-323.2 339.9-9.9-25-34.2-42.7-62.6-42.7-37.2 0-67.5 30.3-67.5 67.5S429.8 921 467 921c30.2 0 55.5-20 64.1-47.4 203.8-10 366.7-178.5 366.7-384.8zM467 876c-12.4 0-22.5-10.1-22.5-22.5S454.6 831 467 831s22.5 10.1 22.5 22.5S479.4 876 467 876z" p-id="3665"></path></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

2
imgthemes1/images/music.svg

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg class="icon1" style="color:#6c6c6c;width: 2em;height: 2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2212"><path d="M875.52 433.152q-7.168-1.024-12.8-10.24t-8.704-33.792q-5.12-39.936-26.112-58.88t-65.024-27.136q-46.08-9.216-81.408-37.376t-58.88-52.736q-22.528-21.504-34.816-15.36t-12.288 22.528l0 44.032 0 96.256q0 57.344-0.512 123.904t-0.512 125.952l0 104.448 0 58.368q1.024 24.576-7.68 54.784t-32.768 56.832-64 45.568-99.328 22.016q-60.416 3.072-109.056-21.504t-75.264-61.952-26.112-81.92 38.4-83.456 81.92-54.272 84.992-16.896 73.216 5.632 47.616 13.312l0-289.792q0-120.832 1.024-272.384 0-29.696 15.36-48.64t40.96-22.016q21.504-3.072 35.328 8.704t28.16 32.768 35.328 47.616 56.832 52.224q30.72 23.552 53.76 33.792t43.008 18.944 39.424 20.992 43.008 39.936q23.552 26.624 28.672 55.296t0.512 52.224-14.848 38.4-17.408 13.824z" p-id="2213"></path></svg>

After

Width:  |  Height:  |  Size: 995 B

19
imgthemes1/index.html

@ -18,6 +18,7 @@
<body> <body>
<div id="image_site" class="main_style"> <div id="image_site" class="main_style">
<!-- 顶部导航栏模块 --> <!-- 顶部导航栏模块 -->
<nav class="navbar navbar-default navbar-fixed-top navbarJS"> <nav class="navbar navbar-default navbar-fixed-top navbarJS">
<div class="container-fluid"> <div class="container-fluid">
@ -25,6 +26,7 @@
<div class="navbar-header"> <div class="navbar-header">
<div class="navbar-toggle"> <div class="navbar-toggle">
<img class="svg icon1 svgimg lampJS verMiddle" src="images/buld.svg" alt="主题切换" title="点击切换主题"/> <img class="svg icon1 svgimg lampJS verMiddle" src="images/buld.svg" alt="主题切换" title="点击切换主题"/>
<img class="icon1 svg connectmeJS svgimg iconr2 verMiddle" src="images/contactUs.svg" alt="联系我们" title="联系我们" />
<button type="button" class="collapsed mr_button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" <button type="button" class="collapsed mr_button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false"> aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
@ -58,7 +60,7 @@
</form> </form>
<div class="nb_right nav navbar-nav navbar-right"> <div class="nb_right nav navbar-nav navbar-right">
<img class="svg icon1 svgimg lampJS verMiddle" src="images/buld.svg" alt="主题切换" title="点击切换主题" /> <img class="svg icon1 svgimg lampJS verMiddle" src="images/buld.svg" alt="主题切换" title="点击切换主题" />
<img class="icon1 svg connectmeJS svgimg svgimg2 iconr2 verMiddle" src="images/scrolltop.svg" alt="联系我们" title="联系我们" /> <img class="icon1 svg connectmeJS svgimg iconr2 verMiddle" src="images/contactUs.svg" alt="联系我们" title="联系我们" />
</div> </div>
</div><!-- /.navbar-collapse --> </div><!-- /.navbar-collapse -->
@ -66,8 +68,9 @@
</nav> </nav>
<!-- 内容主题 --> <!-- 内容主题 -->
<div class="img_main"> <div class="img_main">
<div class="im_mainl row">
<div class="im_mainl row">
<div class="text_dark">我爱你放松放松</div>
<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a class="bor_radius" href="detailed.html" title="美女"> <a class="bor_radius" href="detailed.html" title="美女">
<img class="bor_radius im_img lazy" src="images/lazy.svg" data-original="https://demo.jialuoma.com/girls/%E7%BE%8E%E5%A5%B3/%E4%BD%9F%E4%B8%BD%E5%A8%85/weibo_01.jpg?ver=1666925572" alt="性感女神易阳" /> <img class="bor_radius im_img lazy" src="images/lazy.svg" data-original="https://demo.jialuoma.com/girls/%E7%BE%8E%E5%A5%B3/%E4%BD%9F%E4%B8%BD%E5%A8%85/weibo_01.jpg?ver=1666925572" alt="性感女神易阳" />
@ -207,11 +210,21 @@
<li class="scroll_top scroll_topJS"> <li class="scroll_top scroll_topJS">
<img class="icon svg" src="images/huojian.svg" alt="回到顶部" title="点击回到顶部" /> <img class="icon svg" src="images/huojian.svg" alt="回到顶部" title="点击回到顶部" />
</li> </li>
<li class="music_switch musicJS">
<img class="icon svg verMiddle" src="images/music.svg" alt="音乐" title="开启关闭音乐" />
</li>
<li class="connectmeJS"> <li class="connectmeJS">
<img class="icon svg verMiddle" src="images/scrolltop.svg" alt="联系我们" title="联系我们" /> <img class="icon3 svg verMiddle" src="images/contactUs.svg" alt="联系我们" title="联系我们" />
</li> </li>
</ul> </ul>
</div> </div>
<!-- 音乐 -->
<audio class="music_main musicMJS" id="music_main"
src="https://demo.jialuoma.cn/girls/Unchained_Melody.mp3?ver=1667213175"
preload autoplay controls loop>
你的浏览器不支持<code>audio</code>标签
</audio>
</div> </div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script>

23
imgthemes1/js/index.js

@ -74,4 +74,27 @@ if ($('#image_site').get(0)) {
return; return;
}); });
// 音乐播放
var musicState = 0;
$('#music_main').get(0).volume = 0.5; // 控制音量
$('.musicJS').click(function () {
if (musicState == 0) {
$('#music_main').get(0).play();
$('.musicJS').addClass('music_put');
musicState = 1;
} else {
$('#music_main').get(0).pause();
$('.musicJS').removeClass('music_put');
musicState = 0;
}
return;
})
$(document).one('touchstart mousedown', function () {
$('#music_main').get(0).play();
$('.musicJS').addClass('music_put');
musicState = 1;
});
} }

Loading…
Cancel
Save