jQuery影片背景影像為選單懸停狀態和選單活動狀態

我的選單項有這個標記。我想使用 SVG 或影片背景影像作為懸停和活動狀態。這是我的代碼筆：

代碼筆

我仍然無法讓拱門落在每個選單項的中間。我也試過根據我的需要修改這個鏈接，但仍然無法讓它落在中心。

理想情況下，我想使用 svg 檔案并為拱形路徑設定影片。但找不到任何例子。

如果有人可以幫助我的原始代碼并消除重復的背景，同時仍然保持線條，或者可以指出我可以從哪里開始的任何方向。

代碼如下：

jQuery(function($){

    $('ul.menu-nav li').each(function(i) {
        
        var wt= $(this).width();
        var offset = $(this).offset();
        var rt = ($('ul.menu-nav').width() - ($(this).offset().left   $(this).outerWidth()));

        console.log(wt);
        //console.log(offset.left);
        console.log(rt);

        $(this).attr('data-width', wt);
        $(this).attr('data-rel', rt);
    });

        $( 'ul.menu-nav li' ).on( {
            mouseenter : function(e){
                var attachment = $( this ).attr( 'data-rel' );
                //var dwt = $( this ).attr( 'data-width' );
                //var distance = ($(attachment)   10)   "px";
                //var parent = $( this ).attr( 'data-rel' );
                
                //$( 'div#'   attachment).addClass('active').siblings().removeClass('active');
                //$( this ).addClass('active');
                $( '.cp-line .cp-line-inner').css('background-position', -attachment);
                 e.stopPropagation();
            },
            
            mouseleave : function(e) {
                var attachment = $( this ).attr( 'id' );
                //var parent = $( this ).attr( 'data-rel' );
                
                
                //$( this ).removeClass('active');
                $( '.cp-line .cp-line-inner').css('background-position', 'center');
                //$( '.sub-menu').slideUp();
                 e.stopPropagation();
            }
       });

       /*$( 'ul.menu-nav li a' ).on( {
            mousedown : function(e){
                var url = $( this ).attr( 'href' );
                
                $( 'div'   url).addClass('active').siblings().removeClass('active');
                $( this ).parent().addClass('active').siblings().removeClass('active');
                //$( '.cp-line .cp-line-inner').css('background-position', -attachment);
                $('div'   url).fadeOut(function() {
                    // finished
                });
                e.stopPropagation();
            }
        });*/
});

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10001;
    transition: all 0.3s ease 0.3s;
}

.inner-header {
    display: flex;
    flex-wrap: wrap;
    padding: 30px 0;
    align-items: center;
}

.drawer-menu {
    width:50%;
}

.inner-menu {
    position:relative;
    padding:0 40px;
}

ul.menu-nav {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    justify-content:space-between;
}

ul.menu-nav li {

}

ul.menu-nav li a {

}

li#starting-point {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    opacity:0;
}

.site-branding {
    width: 50%;
    text-align: right;
    padding: 0 40px;
}

.site-branding a img {
    max-width: 320px;
}

ul.menu-nav {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    justify-content:space-between;
  margin:0;
  padding:0;
  list-style:none;
}

.cp-line {
    width: 100%;
    height: 50px;
    overflow:hidden;
    margin: 0 auto;
    position:relative;
}


.cp-line-inner {
    width:100%;
    height:100%;
    border-bottom:1px solid;
  background-image:url('https://sp-gd.com/commonplace/wp-content/themes/spxcommonplace/assets/line.svg');
  background-position:center;
  background-size:contain;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<header id="masthead" class="site-header">
        <div class="inner-header">

            <div class="drawer-menu">
                <div class="inner-menu">
                    <ul class="menu-nav">
                        <li><a href="#work" data-bg="<?php the_field('background_colour', 10); ?>">Work</a></li>
                        <li><a href="#interesting" data-bg="<?php the_field('background_colour', 12); ?>">Interesting</a></li>
                        <li><a href="#useful" data-bg="<?php the_field('background_colour', 14); ?>">Useful</a></li>
                        <li><a href="#about" data-bg="<?php the_field('background_colour', 16); ?>">About</a></li>
                        <li><a href="#contact" data-bg="<?php the_field('background_colour', 18); ?>">Contact</a></li>
                        <li id="starting-point" class="current_item">STARTING</li>
                    </ul>
                </div>
            </div>
            
            <!-- #site-navigation -->

            <div class="site-branding">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"></a>
            </div><!-- .site-branding -->

            <div class="cp-line">
                <div class="cp-line-inner">
                    
            </div>
        </div>

    </header><!-- #masthead -->

uj5u.com熱心網友回復：

在 CSS 中：

.cp-line-inner {
    background-repeat: repeat-x;
}

在 javascript 中，重新計算 rt 變數：

var rt = ($(window).width()/2 - $(this).offset().left - wt / 2);

這是我的代碼筆：https ://codepen.io/ng2hunglong/pen/abLvWpY

標籤：查询 css 动画片 svg

上一篇：為什么Svelte無法識別影像檔案夾？

下一篇：建議在畫布上繪制SVG路徑