margin 和 節點操作實現無縫滾動 跑馬燈

2022-04-22 08:06:29 字數 1762 閱讀 5273

跑馬燈的**很多了 ,這次用節點操作的方式實現乙個 , 自動調整顯示區域的單元(避免出現半個的情況)

基於自己的fml載入器 ,要用的自行修改成require.js 或 sea.js

<

style

>

*#con

ul li

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

>

(require , exports)

function

marqueue(scence , showwidth, settings)

this.scence = scence = $(scence).css('position','relative')

this.settings =$.extend( ,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++)

if (this

.settings.auto ) ,

this

.settings.pause)}}

marqueue.prototype.scroll = function

(mvframe)

else

scence.animate( , mself.settings.speed ,function

()) mself.cells =mself.cells.concat(mvcell)

}else

if(mself.settings.auto) , mself.settings.pause)}})

}})())

var $ = this

.jquery

$('#right').click(function

()) $('#left').click(function

())})

節點和節點操作

節點 一般的,節點擁有nodetype 節點型別 nodename 節點名稱 和nodevalue 節點值 這三個基本屬性.頁面中所有元素都是節點 元素節點 nodetype 為1 屬性節點 nodetype 為2 文字節點 nodetype 為3 文字節點包括文字.空格.換行等 利用dom樹可以把...

DOM簡介和節點操作

nodetype值 節點型別 1元素節點,例如和 3文字節點 8注釋節點 9document 節點 10dtd 節點 方法功能 相容性document.getelementbyid 通過id得到元素 ie6document.getelementsbytagname 通過標籤名得到元素陣列 ie6do...

單向鍊錶實現 插入節點 刪除節點操作

function node element 該類的功能包括插入刪除節點 在列表中查詢給定的值。function llist 插入新節點 向鍊錶中插入乙個節點,需要修改它前面的節點 前驅 使其指向新加入的節點,而新加入的節點則指向原來前驅指向的節點 find方法 遍歷鍊錶,查詢給定資料。如果找到資料,...