js小动画

最新推荐文章于 2023-02-05 10:13:37 发布

Byfar_

最新推荐文章于 2023-02-05 10:13:37 发布

阅读量120

点赞数

分类专栏： js 文章标签：动画

本文链接：https://blog.csdn.net/weixin_42107267/article/details/120272887

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
    .product-service-title {
        text-align: center;
        height: 146px;
        padding: 21px 0 19px;
        cursor: pointer;
    }

    .title-img {
        margin: 0 auto;
        width: 64px;
        height: 64px;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100%;
        background-position-y: 0;
    }

    .title-desc {
        margin-top: 4px;
        text-align: center;
        font-size: 14px;
        color: #181818;
        line-height: 24px;
        font-weight: 400;
        margin-bottom: 0;
        transition: color .3s ease;
    }

   .title-content-underLine {
        transform: scaleX(0);
        transform-origin: 50% 50%;
        transition: transform .3s ease;
        width: 100%;
        margin: 11px auto 0;
        border-bottom: 3px solid #ff6a00;
    }

    .product-service-title:hover .title-desc{
        color:#ff6a00;
    }
    </style>
</head>

<body>

    <div id="app">
        <div class="product-service-title" ind="0" num_margin="0">
            <div class="title-img"
                style="background-image: url(&quot;https://img.alicdn.com/tfs/TB1cHirmP39YK4jSZPcXXXrUFXa-128-2688.png&quot;); background-position-y: 0px;">
                <!-- style="background-image: url(&quot;https://img.alicdn.com/tfs/TB111c4mz39YK4jSZPcXXXrUFXa-128-2688.png&quot;); background-position-y: 0px;"> -->
            </div>
            <h3 class="title-desc">网络与CDN</h3>
            <div class="title-content-underLine"></div>
        </div>
    </div>



    <script type="text/javascript">
        var aaa=bbb="";
        $('.title-img').mouseover(function () {
            clearInterval(bbb)
            var count=$(".title-img").css("background-position-y")
            var i=Number(count.substring(0,count.length-2));
            aaa=setInterval(() => {
                if(i>-1280){
                    i=i-64;
                    $(".title-img").css("background-position-y",i+"px");
                }else{
                    clearInterval(aaa)
                }
            }, 30);
        }).mouseout(function () {
            clearInterval(aaa)
            var count=$(".title-img").css("background-position-y")
            var i=Number(count.substring(0,count.length-2));
            bbb=setInterval(() => {
                if(i<0){
                    i=i+64;
                    $(".title-img").css("background-position-y",i+"px");
                }else{
                    clearInterval(bbb)
                }
            }, 30);
        })
    </script>
</body>

</html>

Byfar_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js小动画

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>测试</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <style> .product-service-titl
复制链接

扫一扫