网站白天or黑夜模式來回切換源代码,网站白天or黑夜模式来回切换源代码,现在这个方法只需用一个按钮就可以在【白天模式】&【黑夜模式】之间来回切换啦!并且载入新页面仍保持著黑暗模式。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>暗夜模式,雅爱笔记,yaaibk.com每天更新一点点</title> <link rel="stylesheet" type="text/css" href="1.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> </head> <body> <div class="scene scene--card sundarkmodep"> <div> <div class="card__face card__face--front"><span class="fa fa-moon" aria-hidden="true">暗夜模式</div> <div class="card__face card__face--back"><span class="fa fa-sun" aria-hidden="true">白昼模式</div> </div> </div> <script type="text/javascript"> //翻转动画 var card = document.querySelector('.card'); card.addEventListener('click',function() { card.classList.toggle('is-flipped'); }); /* //换颜色 $('.sundarkmodep').click(function(){ $('*').toggleClass("darkmodecolor"); }); */ </script> <script> $('.sundarkmodep').click(function() { if ($('*').hasClass("darkmodecolor")) { $.removeCookie('darkmodeStatus', { path: '/' }); $.cookie('darkmodeStatus', 'sunmode', { path: '/' }); } else if (!$('.main-body').hasClass("darkmodecolor")) { $.removeCookie('darkmodeStatus', { path: '/' }); $.cookie('darkmodeStatus', 'darkmode', { path: '/' }); } $('*').toggleClass("darkmodecolor"); }); var darkmodeStatus = $.cookie('darkmodeStatus'); if (darkmodeStatus == 'darkmode') { $('*').addClass("darkmodecolor"); } else if (darkmodeStatus == 'sunmode') { $('*').removeClass("darkmodecolor"); } </script> </body> </html>
/*--------------------------------- http://yaaibk.com ----------------------------------*/ .scene { width: 100px; height: 30px; perspective: 600px; position: fixed; z-index: 99999; top: 50px; right: 5px; } .card { width: 100%; height: 100%; cursor: pointer; transform-style: preserve-3d; transform-origin: center right; transition: transform 1s; border: 1px solid rgb(150, 150, 150, .5); } .card.is-flipped { transform: translateX(-100%) rotateY(-180deg); } .card__face { position: absolute; width: 100%; height: 100%; text-align: center; font-size: 16px; backface-visibility: hidden; } .card__face--front { color: black !important; background: white; } .card__face--front:hover { color: white !important; background-color: black; } .card__face--back { color: white !important; background: black; transform: rotateY(180deg); } .card__face--back:hover { color: black !important; background-color: white; } .darkmodecolor { background-color: #2B2B2B !important; color: #C5C5C5 !important; box-shadow: none; }
本文地址:https://5devip.com/post/288.html
温馨提示:文章内容系作者个人观点,不代表雅爱博客对观点赞同或支持。
版权声明:本文为 转载 文章,来源于 点击这里 ,版权归原作者所有,欢迎分享本文,转载请保留出处!
温馨提示:文章内容系作者个人观点,不代表雅爱博客对观点赞同或支持。
版权声明:本文为 转载 文章,来源于 点击这里 ,版权归原作者所有,欢迎分享本文,转载请保留出处!