Question

marquee正在模态之外工作但不在模态

之内

即使我尝试过使用其他字幕标签，但有时候文字会相互追加，我应该怎么做才能让字幕在模态内工作？

         <!-- Modal -->
              <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">

                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">

                      <marquee bgcolor="#000080" onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=2" scrollamount="2" direction="up" loop="true" width="30%">
             <center>
            <font color="#ffffff" size="+1">SCROLLING TEXT</font><p>
            <font color="#ff0000" size="+1">UPWARD</font><p> 
            <font color="#ffffff" size="+1">IS ONE WAY</font><p>
            <font color="#ffffff" size="+1">TO MAKE YOUR</font><p>
            <font color="#ffffff" size="+1">SITE</font><p>`enter code here`
            <font color="#ff0000" size="+1">STAND OUT</font><p>
            <font color="#ffffff" size="+1">FROM THE REST!</font>
            </center>
            </marquee>

                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                  </div>

                </div>
              </div>

            </div>

marquee正在模态外工作但不在模态内.... 即使我尝试过其他字幕标签，但有时候文字会互相吸引......我应该怎么做才能在模板内工作呢？

Answer 1

我这样做只使用css。得到了W3Schools.com的帮助片段：

＆＃13;

.divMarquee {
            width: relative;
            display: inline-block;
            position: relative; 
            -webkit-animation: myfirst 5s infinite;/* Safari 4.0 - 8.0 */
            -webkit-animation-direction: alternate;/* Safari 4.0 - 8.0 */
            animation: myAni 5s infinite;
            animation-direction: initial;
        }

        /* Safari 4.0 - 8.0 */
        @-webkit-keyframes myAni {
            0% {left: -50%;top: 0px;}
            100% {left: 110%;top: 0px;}
        }
        /*If you want to change the direction just change the left values or make them right..*/
        @keyframes myAni {
            0% {left: -50%;top: 0px;}
            100% {left: 110%;top: 0px;}
        }
        
        .modal-body {
            overflow: hidden; /*This is for the overflow of moving text out of modal*/
        }

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body" style="width:100%">
                        <div class="divMarquee">
                            <p>Some text in the modal.</p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>

            </div>
        </div>

    </div>

＆＃13;

Answer 2

尝试使用marquee.js而不是传统的选框

http://aamirafridi.com/jquery/jquery-marquee-plugin#examples

或其他可用的开源

marquee在模态中不起作用

2 个答案: