`
yiminghe
  • 浏览: 1453099 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

MarqueeLite - 基于Ext-core的marquee

阅读更多

 

 

归属

[置顶] 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'
    	
    	});
 

 

  • 大小: 43.8 KB
分享到:
评论

相关推荐

    react-marquee-master

    React字幕大师 创建滚动字幕的简单组件。... 使用打字稿进行构建以... import Marquee from 'react-marquee-master' ; 2。 添加字幕元素 < Marquee xss=removed> 单机版 您可以将node_modules/react-marquee-master/dis

    Marquee替代 -- 无间滚动

    Marquee标签一直以来都被W3C排斥,而且,屁股后老带着段空白,这个是最让人恼火的... JS替代Marquee网上也有不少例子,可基本上都是单个实例,不支持多个,修改起来又麻烦,而且各个浏览器的兼容性也不是很好。所以...

    vue-dynamic-marquee:Vue的字幕组件-在包装器中反复转换内容。 完全响应渲染后的更改,并具有许多可自定义的选项

    Vue动态字幕 游乐场和演示 可以在上找到一个整洁的文档,演示和游乐场站点。... component ( 'dynamic-marquee' , window [ 'vue-dynamic-marquee' ] ) </ script > 用法 全球注册 //in main

    git-contribute-marquee-master.zip

    标题中的"git-contribute-marquee-master.zip"表明这是一个与Git贡献和基于Java的Spring Boot项目相关的压缩包。这个项目的名称“git-contribute”暗示它可能是一个鼓励社区贡献的开源项目,而“marquee”通常指的是...

    vue-marquee:这是vue专有的选取框组件,具有无限的上下轮播功能,可以端对端连接

    npm i @ vue_modules / vue - marquee - straight 基本的 导入和注册组件 import TheMarquee from "@vue_modules/vue-marquee-straight" ; import "@vue_modules/vue-marquee-straight/marqueeBar.css" ; export ...

    react-native-marquee-ab:react-native 水平竖直滚动跑马灯。支持多个text数据,支持点击事件回调,自定义宽度、样式

    react-native-marquee-ab Marquee,Support iOS and Android。使用了react-native中的Animated API,且只使用了react-native&js代码,实现Marquee(走马灯)组件。支持的功能v2.0.0-rc.1 新增:增加水平滚动时首尾相连...

    react-native-marquee:React本机字幕文本组件

    npm install --save react-native-marquee or yarn add react-native-marquee 用法 import React, { Component } from 'react'; import { StyleSheet, View } from 'react-native'; import MarqueeText from 'react-...

    react-double-marquee:一个React字幕组件,可以平滑地循环内容

    React双字幕 一个React字幕组件,可以平滑地循环内容。 Lo-fi演示: ... import Marquee from 'react-double-marquee' ; export default function FooComponent ( ) { return ( < Marquee> So

    images-marquee图片轮播

    "images-marquee图片轮播"是一种常见的网页设计技术,用于展示多张图片并自动进行循环播放,以吸引用户的注意力或展示一系列相关图像。这个压缩包包含了一种实现该功能的例子,可以直接在项目中应用。 首先,`index...

    Marquee-js

    在Marquee.js文件中,包含了Marquee-js库的主要代码,可能包括类定义、方法实现以及事件处理等。Ruby.js文件可能是一个辅助脚本或者示例代码,用于演示如何与Marquee-js库配合使用。readme.txt文件通常会包含库的...

    收集的Javascript特效\图片左右移动效果--marquee

    收集的Javascript特效\图片左右移动效果--marquee.html

    reactive-marquee-component

    "reactive-marquee-component"正是基于这种思想构建的,它的目标是创建一个高度可定制的跑马灯组件。 该组件的主要功能包括: 1. **文本和图像的滚动**:组件支持包含文本和图像的滚动内容,这可以通过props传递给...

    canvas-marquee:一个画布选取框组件

    基于画布的选取框组件 安装 npm i canvas-marquee -S 用法 import Marquee from 'canvas-marquee' ; var textList = [ '跑马灯' , '666' , '233333333' , 'javascript' , 'html' , 'css' , '前端框架' , 'Vue' , '...

    jquery-3d-marquee.zip

    jQuery 3D Marquee 是基于jQuery的一套插件,它通过模拟3D空间中的滚动效果,让文字或图片在网页上呈现出立体流动的感觉,从而提升用户体验。 实现3D Marquee 的核心在于CSS3的transform属性。这个属性允许我们对...

    react-native-hsnz-marquee:对字幕文本(模块)做出React的本机模块

    npm install react-native-hsnz-marquee --save 快速开始 import React , { Component } from 'react' ; import { Platform , Dimensions , StyleSheet , Text , View , ToastAndroid , Image } from 'react-native'...

    vanilla-marquee:jQuery.marquee的现代替代品

    香草字幕一个ES5香草JS实现安装npm i vanilla-marquee用法import maqruee from 'vanilla-marquee'new marquee( element, { options})这个插件和jQuery.marquee之间的区别尽管此插件可以代替jQuery插件,但还是有一些...

    marquee-infinite:∞JS库,用于创建无限包裹式滚动选取框状元素

    yarn add marquee-infinite或npm install marquee-infinite 复制并将其导入到您的项目中 用法 import MarqueeInfinite from 'marquee-infinite'; new MarqueeInfinite('.js-marquee-infinite', { maxItems: 800, ...

    HarmonyOS应用开发-marquee组件使用

    ### HarmonyOS应用开发-marquee组件使用 在HarmonyOS的应用开发过程中,为了实现文本滚动的效果,我们可以使用`marquee`组件。此组件可以方便地帮助开发者实现动态展示文本的需求,适用于广告滚动、通知滚动等场景...

    plugin-text-marquee:WordPress插件

    作为一款基于WordPress的插件,plugin-text-marquee的开发离不开PHP语言。PHP是服务器端脚本语言,用于处理动态网页内容。在plugin-text-marquee中,PHP主要负责以下任务: 1. **后端逻辑**:处理用户在WordPress...

    vue-marquee:vue的字幕字幕插件

    水平字幕 vue的字幕字幕插件 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev ... < div xss=removed><Marquee xss=removed></Marquee></div>

Global site tag (gtag.js) - Google Analytics