跑马灯的代码很多了 ,这次用节点操作的方式实现一个 , 自动调整显示区域的单元(避免出现半个的情况)
基于自己的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) }) })