filesite
/
themes
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化，增加音乐

master
wen 2 years ago
parent
133e66ffb0
commit
6209982d97
5 changed files with 61 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -67,11 +67,15 @@ a:link{text-decoration:none;} @@ -67,11 +67,15 @@ a:link{text-decoration:none;}
.web_info a{text-decoration: underline;color:#808080;}
.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:hover{background:rgba(209, 209, 209, 1);color:#3e3d3d;}
.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}
.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;} @@ -85,12 +89,16 @@ a:link{text-decoration:none;}
.page_meta{padding:10px 0 0 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 .btrt_side_ul li{background-color:#181818;}
.lampshow .right_sidebox{background-color:#222;color:#FFF;}
.lampshow .right_sidebox>h5{border-color: #363636;}
.lampshow .text_dark{color:#808080;}
.lampshow .text_dark a{color:#f4f7fd;}
@media screen and (max-width: 1199px) {
.im_item {
@ -110,7 +118,15 @@ a:link{text-decoration:none;} @@ -110,7 +118,15 @@ a:link{text-decoration:none;}
}
}
@keyframes musicTurn {
0% {
-webkit-transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg)
}
}
@keyframes bounceInRight {
0%,
60%,

2
imgthemes1/images/contactUs.svg
Unescape View File

@ -0,0 +1,2 @@ @@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

2
imgthemes1/images/music.svg
Unescape View File

@ -0,0 +1,2 @@ @@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 995 B

19
imgthemes1/index.html
Unescape View File

@ -18,6 +18,7 @@ @@ -18,6 +18,7 @@
<body>
<div id="image_site" class="main_style">
<!-- 顶部导航栏模块 -->
<nav class="navbar navbar-default navbar-fixed-top navbarJS">
<div class="container-fluid">
@ -25,6 +26,7 @@ @@ -25,6 +26,7 @@
<div class="navbar-header">
<div class="navbar-toggle">
<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"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
@ -58,7 +60,7 @@ @@ -58,7 +60,7 @@
</form>
<div class="nb_right nav navbar-nav navbar-right">
<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><!-- /.navbar-collapse -->
@ -66,8 +68,9 @@ @@ -66,8 +68,9 @@
</nav>
<!-- 内容主题 -->
<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">
<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="性感女神易阳" />
@ -207,11 +210,21 @@ @@ -207,11 +210,21 @@
<li class="scroll_top scroll_topJS">
<img class="icon svg" src="images/huojian.svg" alt="回到顶部" title="点击回到顶部" />
</li>
<li class="music_switch musicJS">
<img class="icon svg verMiddle" src="images/music.svg" alt="音乐" title="开启关闭音乐" />
</li>
<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>
</ul>
</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>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

23
imgthemes1/js/index.js
Unescape View File

@ -74,4 +74,27 @@ if ($('#image_site').get(0)) { @@ -74,4 +74,27 @@ if ($('#image_site').get(0)) {
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;
});
}

Write Preview
Loading…
Cancel
Save