ニュースランニングライト効果

1.純css実現:htmlコード:

        

            You spin me right round, baby. Like a record, baby.
            You spin me right round, baby. Like a record, baby.
        
    

cssコードは次のとおりです.

        .marquee{
            position:relative;
            width:420px;
            height:25px;
            overflow:hidden;
        }
        .marquee div{
            position:absolute;
            top:0;left:0;
            width:200%;
            height:30px;
            overflow:hidden;
            animation:marquee 5s linear infinite;
        }
        .marquee div span{
            float:left;
            width:50%;
        }
        @keyframes marquee{
            0% {left:0;}
            5% {left:0;}
            100% {left:-100%;}
        }

PS:投機に属し、具体的な状況は自分で選択する.2.jqueryプラグイン(jquery.marquee):

       ul,li {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul.marquee {
            display: block;
            line-height: 1;
            position: relative;
            overflow: hidden;
            width: 400px;
            height: 22px;
        }

        ul.marquee li {
            position: absolute;
            top: -999em;
            left: 0;
            display: block;
            white-space: nowrap;
            padding: 3px 5px;
            text-indent: 0.8em
        }

htmlの例:

    

        

            
You spin me right round, baby.
            
You spin me right round, baby. Like a record
        
    

jsの例:

    $('#marquee').marquee({yScroll:"bottom"})

PS:ランニングランプの構造はulとliを使用しなければならず、位置決めが必要である.marqueeにはdefault optionsがたくさんあります.必要に応じて注意を変更できます.

{
          yScroll: "top"                          // the position of the marquee initially scroll (can be either "top" or "bottom")
        , showSpeed: 850                          // the speed of to animate the initial dropdown of the messages
        , scrollSpeed: 12                         // the speed of the scrolling (keep number low)
        , pauseSpeed: 5000                        // the time to wait before showing the next message or scrolling current message
        , pauseOnHover: true                      // determine if we should pause on mouse hover
        , loop: -1                                // determine how many times to loop through the marquees (#'s < 0 = infinite)
        , fxEasingShow: "swing"                   // the animition easing to use when showing a new marquee
        , fxEasingScroll: "linear"                // the animition easing to use when showing a new marquee

        // define the class statements
        , cssShowing: "marquee-showing"

        // event handlers
        , init: null                              // callback that occurs when a marquee is initialized
        , beforeshow: null                        // callback that occurs before message starts scrolling on screen
        , show: null                              // callback that occurs when a new marquee message is displayed
        , aftershow: null                         // callback that occurs after the message has scrolled
    }