margin 和节点操作实现无缝滚动(跑马灯)-优快云博客

跑马灯的代码很多了，这次用节点操作的方式实现一个，自动调整显示区域的单元（避免出现半个的情况）

基于自己的fml加载器，要用的自行修改成require.js 或 sea.js

<style>
*{margin:0;padding:0;}
#con{
    margin:10px;
    border:1px solid #f69;
    width:260px;
    height:120px;
}
ul {list-style:none;
    white-space:nowrap;
    font-size: 0;

}
li {display:inline-block;
    font-size: 30px;
    letter-spacing: normal;
    border:1px solid red;
    width:100px;
    height:100px;}
</style>


<div id="con">
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</div>
<span id=left>left</span>
<span id=right>right</span>

fml.define('app/marqueue' ,['jquery'] , function(require , exports){
    var $ = require('jquery')
    exports.init = function(scence , showWidth, settings){
        return new marqueue(scence , showWidth, settings)
        }
    function marqueue(scence , showWidth, settings) {
        this.offsetCache = {}
        this.scence = scence = $(scence).css('position','relative')
        this.settings = $.extend({
                    'pause' : 1000
                    ,'speed' : 2000
                    ,'auto' : 1
                    } ,settings)

        var cells =  scence.children()
        var scenceWidth = scence.width()
            ,cellWidth = cells.width()
        //just cell margin
        var perNum = this.perNum =  parseInt (scenceWidth / cellWidth)
            ,justMargin = Math.round( (scenceWidth - perNum * cellWidth) / perNum)
        cells.css('margin-right' , justMargin )

        this.cells = []
        for (var i = 0 , j = cells.length; i < j ;i++){
            this.cells.push(cells.eq(i))
            }
        if (this.settings.auto ){
            var mSelf = this
            window.setTimeout(function(){
                mSelf.scroll(mSelf.settings.auto)
  } , this.settings.pause)
        }
    }

    marqueue.prototype.scroll = function(mvFrame){
        var mSelf = this
            ,perNum = this.perNum
            ,cells = this.cells
            ,scence = this.scence

        var moved
            ,mvcell
        var offIndex = perNum * Math.abs(mvFrame)
        if (this.offsetCache[offIndex])
            moved = this.offsetCache[offIndex]
        else
            this.offsetCache[offIndex] = moved = cells[offIndex].position().left

        if (mvFrame >= 0 ){
            mvcell = cells.splice(0,perNum * mvFrame)
        }else{
            mvcell = cells.splice(perNum * mvFrame )
            scence.css('margin-left' , -moved)
            moved = 0
            scence.prepend(mvcell)
            }
        scence.animate({'margin-left' : -moved} , mSelf.settings.speed ,function(){
            if (mvFrame >=0){
                scence.append(mvcell)
 scence.css({'margin-left' : 0})
                mSelf.cells = mSelf.cells.concat(mvcell)
            }else{
                mSelf.cells = mvcell.concat(mSelf.cells)
                }
            if (mSelf.settings.auto){
                window.setTimeout(function(){
                    mSelf.scroll(mvFrame)
                    } , mSelf.settings.pause)
                }
            })
        }

})
fml.use(['app/marqueue' , 'jquery'],function(){
    var m   = this['marqueue'].init('#list' , 260 , {'pause':1000 ,'auto' : 0})
    var $ = this.jquery
    $('#right').click(function(){
        m.scroll(1)
        })
    $('#left').click(function(){
        m.scroll(-1)
        })

})