新闻跑马灯效果

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 示例：

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
    }