MarqueeLite - 基于Ext-core的marquee

最新推荐文章于 2024-09-02 08:17:43 发布

最新推荐文章于 2024-09-02 08:17:43 发布 · 129 阅读

文章标签：

#EXT #CSS #浏览器

lite-ext 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种轻量级的Ext组件——Lite-Ext，它提供了两种模式来实现网页上的跑马灯效果：一种是通过CSS实现，另一种是通过scroll实现无缝滚动。该组件支持指定滚动速度和间隔时间。

归属

[置顶] Lite-Ext 适合WebPage的轻量级Ext

实现要点：

两种模式实现：

css实现仿浏览器原生Marquee ,

scroll 实现无缝模式的 Marquee

/**
	v1.0(20090428) 对水平滚动的两种模式各实现一个方向，尚不能指定方向。
**/

使用代码：

  new Ext.ux.MarqueeLite({
    	//滚动的元素
    	id:'marqueeTestCss',    	
    	step:20,//px
    	interval:100,//ms
    	//css 模式不可以无缝滚动，但是完全符合内置Marquee,id直接设定要滚动的元素
    	//比较简单,父容器相对定位，子元素绝对定位,设置css left
    	method:'css'
    	
    	});
    	
    	
    	new Ext.ux.MarqueeLite({
    	//滚动的元素的父容器
    	id:'marqueeTestScroll',
    	step:20,//px
    	interval:100,//ms
    	//scroll 模式可以无缝滚动，但是要求设置id为滚动的元素的父元素id,且
    	//滚动的元素须为行内元素，控件逻辑要将他扩展为同行双倍
    	//且初始滚动元素宽度必须宽于容器宽度,否则就算扩展双倍
    	//容器滚完一半后就不能再滚了，无法无缝
    	//比较麻烦
    	method:'scroll'
    	
    	});