欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

博客园美化鼠标滚轮下滑出现小标题方便查找

程序员文章站 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>

三.效果展示

博客园美化鼠标滚轮下滑出现小标题方便查找

博客园美化鼠标滚轮下滑出现小标题方便查找