博客园美化鼠标滚轮下滑出现小标题方便查找
程序员文章站
2022-03-28 12:21:56
一.自己给自己定的需求 鼠标滑轮移动合适位置出现小标题 鼠标下滑时候出现,鼠标上滑时候消失 淡出的效果 二.代码 三.效果展示 ......
一.自己给自己定的需求
- 鼠标滑轮移动合适位置出现小标题
- 鼠标下滑时候出现,鼠标上滑时候消失
- 淡出的效果
二.代码
<!--小标题--> <style> .my_catalogue_div { line-height: 50px; position: fixed; height: 50px; width: 100%; background: url(https://images.cnblogs.com/cnblogs_com/pythonywy/1456775/o_44.png); background-size: 100% 100%; top: 0; z-index: 999999; } .my_catalogue { margin-right: 10px; float: left; display: block; position: initial; } .my_catalogue a:link, .my_catalogue a:visited, .my_catalogue a { display: inline-block; vertical-align: middle; font-size: 15px; padding: 0 10px; -webkit-transform: perspective(1px) translatez(0); transform: perspective(1px) translatez(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; color: black; text-decoration: none; } .my_catalogue a:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #222; transform: scaley(0); transform-origin: 50% 0; transition-property: transform; transition-duration: 0.5s; transition-timing-function: ease-out; } .my_catalogue a:hover { color: white; box-shadow: none; padding: 0 10px; } .my_catalogue a:hover::before { transform: scaley(1); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } @keyframes opacity_0_to_1 { 0% { opacity: 0; } 100% { opacity: 0.9; } } .my_catalogue_div_opacity_0_to_1 { animation-name: opacity_0_to_1; animation-duration: 2s; animation-fill-mode: forwards; } .home_page { right: 0; margin: 0; position: absolute; } .show_time { position: fixed; bottom: 0; height: 40px; background: url(https://images.cnblogs.com/cnblogs_com/pythonywy/1456775/o_44.png); background-size: 100% 100%; color: black; line-height: 20px; text-align: center; width: 100%; } </style> <body> <div class="my_catalogue_div" style="display: none"> <span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/10911404.html" target="_self">算法题</a></span> <span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/10862019.html" target="_self">python</a></span> <span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/10862096.html" target="_self">前端</a></span> <span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/11568799.html" target="_self">vue</a></span> <span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/10862343.html" target="_self">爬虫</a></span> <span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/11269267.html" target="_self">数据库</a></span> <span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/11379228.html" target="_self">django</a></span> <span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/11568936.html" target="_self">drf框架</a></span> <span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/11621158.html" target="_self">flask</a></span> <span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/11621165.html" target="_self">微信小程序</a></span> <span class='my_catalogue home_page '><a href="https://www.cnblogs.com/pythonywy/" target="_self">首页</a></span> </div> <div class="show_time" style="display: none"> </div> </body> <script> var scrollfunc = function (e) { var my_catalogue_div = document.queryselector('.my_catalogue_div'); var show_time = document.queryselector('.show_time'); if (window.scrolly > 200) { e.deltay > 0 ? my_catalogue_div.classname = 'my_catalogue_div my_catalogue_div_opacity_0_to_1' : my_catalogue_div.classname = 'my_catalogue_div'; e.deltay > 0 ? my_catalogue_div.style.display = 'block' : my_catalogue_div.style.display = 'none'; e.deltay > 0 ? show_time.classname = 'show_time my_catalogue_div_opacity_0_to_1' : show_time.classname = 'show_time'; e.deltay > 0 ? show_time.style.display = 'block' : show_time.style.display = 'none' } }; /*注册事件*/ if (document.addeventlistener) { document.addeventlistener('dommousescroll', scrollfunc, false); }//w3c window.onmousewheel = document.onmousewheel = scrollfunc;//ie/opera/chrome/safari </script> <script> //时间 function get_time() { var obj = new date(); var obj_time = obj.totimestring().split(' ')[0]; var obj_data = obj.todatestring(); var show_time = document.queryselector('.show_time'); show_time.innerhtml = '<spen>' + obj_time + '</spen>' + '<br>' + '<spen>' + obj_data + '</spen>' } setinterval(get_time, 1000) </script>
三.效果展示
上一篇: 记录--linux下mysql数据库问题
下一篇: 默契搭档