Question

我有这个部门。

我想把它放在大门罩中，但它没有动。没有控制台错误，什么也没有。我已经添加了jQuery和CSS，但仍然无法正常工作。

$('#marquee').marquee({
  //speed in milliseconds of the marquee
  duration: 10000,
  //gap in pixels between the tickers
  gap: 50,
  //time in milliseconds before the marquee will start animating
  delayBeforeStart: 0,
  //'left' or 'right'
  direction: 'left',
  //true or false - should the marquee be duplicated to show an effect of continues flow
  duplicated: true
});

<style type="text/css">.marquee {
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ccc;
}

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.marquee@1.5.0/jquery.marquee.min.js"></script>

<div class="col-auto d-none d-lg-block" style="margin-left: -9.5%;">
  <span class="fa fa-map-marker color-warning fw-800 icon-position-fix"></span>
  <p class="ml-2 mb-0 fs--1 d-inline color-white fw-700" id="marquee">
    ashdasdbkasbdkasbdkasjbdkabsdkbaskdbabsdaskjbdkasbdkasbdkasbdkasbdkasjdbaskbd asndbaskdjbaskdbaskjbdkjbasdjbasjdbjaskjdbaskjdbasdbkabsdjasd ahsdjashdkjashdkhasdkjashdkjasdhaskjdhashdkjasdasdhasd ahsdkjasdhkasjdhasdhasdasdasdasdkasd
  </p>
</div>

我已在页面顶部添加了jquery和css引导程序引用。

Answer 1

您将marquee作为id，但是在css文件中，您已被视为类.marquee。而是删除id属性，并向类添加marquee，以便应用css。

$('.marquee').marquee({
    //speed in milliseconds of the marquee
    duration: 10000,
    //gap in pixels between the tickers
    gap: 50,
    //time in milliseconds before the marquee will start animating
    delayBeforeStart: 0,
    //'left' or 'right'
    direction: 'left',
    //true or false - should the marquee be duplicated to show an effect of continues flow
    duplicated: true
});

.marquee {
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.js"></script>  
<div class="col-auto d-none d-lg-block" style="margin-left: -9.5%;">
    <span class="fa fa-map-marker color-warning fw-800 icon-position-fix"></span>
    <!-- marquee as class -->
    <p class="ml-2 mb-0 fs--1 d-inline color-white fw-700 marquee"> 
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, veritatis.
    </p>
</div>

Answer 2

您是否在jquery之后放置了字幕。我试过了

还要注意，您选择了#marquee，但在CSS中设置了.marquee

$('#marquee').marquee({
            //speed in milliseconds of the marquee
            duration: 10000,
            //gap in pixels between the tickers
            gap: 50,
            //time in milliseconds before the marquee will start animating
            delayBeforeStart: 0,
            //'left' or 'right'
            direction: 'left',
            //true or false - should the marquee be duplicated to show an effect of continues flow
            duplicated: true
        });

#marquee {
        width: 300px;
        overflow: hidden;
        border: 1px solid #ccc;
        background: #ccc;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>


<div class="col-auto d-none d-lg-block" style="margin-left: -9.5%;">
                <span class="fa fa-map-marker color-warning fw-800 icon-position-fix"></span>
                <p class="ml-2 mb-0 fs--1 d-inline color-white fw-700" id="marquee">
                    ashdasdbkasbdkasbdkasjbdkabsdkbaskdbabsdaskjbdkasbdkasbdkasbdkasbdkasjdbaskbd
asndbaskdjbaskdbaskjbdkjbasdjbasjdbjaskjdbaskjdbasdbkabsdjasd
ahsdjashdkjashdkhasdkjashdkjasdhaskjdhashdkjasdasdhasd
ahsdkjasdhkasjdhasdhasdasdasdasdkasd
                </p>
            </div>

为什么即使我已包含引用，jQuery字幕也不起作用？

2 个答案: