css + js实现简单无缝滚动字幕

千次阅读

2017-04-17 13:12:28

css + js实现无缝滚动字幕

利用js和css就可以很方便的实现一个无缝滚动字幕，使得列表在一个方框里不停滚动

css js实现无缝滚动字幕

实现思路

定义两个滚动块，内容一模一样，从下往上两个紧挨着滚动，当第一个滚动块滚动出容器时（即第二个滚动块顶到了容器的上边缘），此时我们将第一个滚动块设置位置到容器上边缘，由于两个滚动块一模一样，从效果上我们也看不出来容器的内容发生了替换。

html 代码

<div class="box" id="box">
    <ul class="col1" id="col1">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <ul class="col2" id="col2">
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
    </ul>
</div>

为了区分效果，我将两个块分别内容设为1和2.

css 代码

.box {
    position: relative;
    width: 100px;
    height: 90px;
    overflow: hidden;
    border: solid 1px;
}
.col1, .col2 {
    height: 200px;
    position: absolute;
}
.col2 { top:200px; } /* 让第二列顶着第一列的末尾*/

js 代码

var LEN = 200;      // 一个完整滚动条的长度
var x = 0;
var t;
window.onload = roll;
function roll() {
     var $col1 = document.getElementById("col1");
     var $col2 = document.getElementById("col2");

     var fun = function(){
         $col1.style.top = x + 'px';
         $col2.style.top = (x + LEN) + 'px';
         x--;
         if( (x + LEN) == 0 ){
             x = 0;
         }
     };
     t = setInterval(fun,1000);
}
// 可以再加上鼠标移入停止滚动的函数，这个可以参考我上一篇博客

懒得导入jquery库所以用纯js实现

源码下载

下载地址

上一篇博客地址

css和js实现最简单的轮播图效果

往期博客地址

css html

更多相关内容

js鼠标移入文字滚动的效果

2019-05-16 10:38:13

js鼠标移入文字滚动的效果通过指定当前元素父元素的鼠标进入移出事件实现。 let movetext = (el) => { if (!el) { return } let boxw = el.offsetWidth; let maxW = el.scrollWidth; let paremtDom = el....

js鼠标移入文字滚动的效果

通过指定当前元素父元素的鼠标进入移出事件实现。

let movetext = (el) => {
    if (!el) { return }
    let boxw = el.offsetWidth;
    let maxW = el.scrollWidth;
    let paremtDom = el.parentNode;
    if (!paremtDom) { return }
    let _cz = maxW - boxw;
    if (_cz > 0) {
        el.style.position = 'relative';
        el.style.zIndex = -1;
        let timer = '';
        let start = () => {
            if (timer) {
                clearInterval(timer)
            }
            let startnum = 0;
            timer = setInterval(() => {
                // console.log(startnum, maxW, Math.abs(startnum) - maxW > 0);
                el.style.left = startnum + 'px';
                if (Math.abs(startnum) - maxW > 0) {
                    el.style.left = boxw + 'px';
                    startnum = boxw;
                }
                startnum = startnum - 2;
            }, 83);
        }
        paremtDom.onmouseover = function(e) {
            start()
            el.style.width = maxW * 1 + 2 + 'px';
        }
        paremtDom.onmouseout = () => {
            clearInterval(timer)
            el.style.width = boxw + 'px';
            el.style.left = 0;
        }
    }
}

结合vue指令实现

Vue.directive("textscreen", {
   	inserted: (el, binding, vnode) => {
   		// 直接调用上面的方法
       	movetext(el)
   	},
   	update: (el, binding, vnode) => {
       movetext(el)
   	}
});

收起

展开全文

vue js 中的鼠标事件
2022-01-13 16:22:05

vue @click//单击 @mousedown//按下 ...js 一般事件事件浏览器支持描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2 | 3 |

vue

@click//单击
@mousedown//按下
@mouseup//抬起
@dblclick//双击
@mousemove//移动
@mouseleave//离开
@mouseout //移出
@mouseenter//进入
@mouseover//在

js
一般事件
事件浏览器支持描述
onClick HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
onDblClick HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 鼠标双击事件
onMouseDown HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 鼠标上的按钮被按下了
onMouseUp HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 鼠标按下后，松开时激发的事件
onMouseOver HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 当鼠标移动到某对象范围的上方时触发的事件
onMouseMove HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 鼠标移动时触发的事件
onMouseOut HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N3 | O3 当鼠标离开某对象范围时触发的事件
onKeyPress HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
onKeyDown HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onKeyUp HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
页面相关事件
事件浏览器支持描述
onAbort HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N3 | O 图片在下载时被用户中断
onBeforeUnload HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当前页面的内容将要被改变时触发的事件
onError HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N3 | O 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误
onLoad HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成
onMove HTML: 2 | 3 | 3.2 | 4
Browser: IE | N4 | O 浏览器的窗口被移动时触发的事件
onResize HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 当浏览器的窗口大小被改变时触发的事件
onScroll HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 浏览器的滚动条位置发生变化时触发的事件
onStop HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断
onUnload HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 当前页面将被改变时触发的事件
表单相关事件
事件浏览器支持描述
onBlur HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]
onChange HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]
onFocus HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 当某个元素获得焦点时触发的事件
onReset HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N3 | O3 当表单中RESET的属性被激发时触发的事件
onSubmit HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 一个表单被递交时触发的事件
滚动字幕事件
事件浏览器支持描述
onBounce HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 在Marquee内的内容移动至Marquee显示范围之外时触发的事件
onFinish HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当Marquee元素完成需要显示的内容后触发的事件
onStart HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当Marquee元素开始显示内容时触发的事件
编辑事件
事件浏览器支持描述
onBeforeCopy HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件
onBeforeCut HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件
onBeforeEditFocus HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当前元素将要进入编辑状态
onBeforePaste HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件
onBeforeUpdate HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当浏览者粘贴系统剪贴板中的内容时通知目标对象
onContextMenu HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的中加入onContentMenu="return false"就可禁止使用鼠标右键了]
onCopy HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当页面当前的被选择内容被复制后触发的事件
onCut HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当页面当前的被选择内容被剪切时触发的事件
onDrag HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当某个对象被拖动时触发的事件 [活动事件]
onDragDrop HTML: 2 | 3 | 3.2 | 4
Browser: IE | N4 | O 一个外部对象被鼠标拖进当前窗口或者帧
onDragEnd HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了
onDragEnter HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当对象被鼠标拖动的对象进入其容器范围内时触发的事件
onDragLeave HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当对象被鼠标拖动的对象离开其容器范围内时触发的事件
onDragOver HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当某被拖动的对象在另一对象容器范围内拖动时触发的事件 [活动事件]
onDragStart HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当某对象将被拖动时触发的事件
onDrop HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 在一个拖动过程中，释放鼠标键时触发的事件
onLoseCapture HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当元素失去鼠标移动所形成的选择焦点时触发的事件
onPaste HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当内容被粘贴时触发的事件
onSelect HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当文本内容被选择时的事件
onSelectStart HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当文本内容选择将开始发生时触发的事件
数据绑定
事件浏览器支持描述
onAfterUpdate HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当数据完成由数据源到对象的传送时触发的事件
onCellChange HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当数据来源发生变化时
onDataAvailable HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当数据接收完成时触发事件
onDatasetChanged HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 数据在数据源发生变化时触发的事件
onDatasetComplete HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当来子数据源的全部有效数据读取完毕时触发的事件
onErrorUpdate HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onRowEnter HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当前数据源的数据发生变化并且有新的有效数据时触发的事件
onRowExit HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当前数据源的数据将要发生变化时触发的事件
onRowsDelete HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当前数据记录将被删除时触发的事件
onRowsInserted HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当前数据源将要插入新数据记录时触发的事件
外部事件
事件浏览器支持描述
onAfterPrint HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当文档被打印后触发的事件
onBeforePrint HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当文档即将打印时触发的事件
onFilterChange HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当某个对象的滤镜效果发生变化时触发的事件
onHelp HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当浏览者按下F1或者浏览器的帮助选择时触发的事件
onPropertyChange HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 当对象的属性之一发生变化时触发的事件
onReadyStateChange HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 当对象的初始化属性值发生变化时触发

一般事件事件浏览器支持描述
onClick IE3|N2|O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
onDblClick IE4|N4|O 鼠标双击事件
onMouseDown IE4|N4|O 鼠标上的按钮被按下了
onMouseUp IE4|N4|O 鼠标按下后，松开时激发的事件
onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件
onMouseMove IE4|N4|O 鼠标移动时触发的事件
onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件
onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
页面相关事件事件浏览器支持描述
onAbort IE4|N3|O 图片在下载时被用户中断
onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件
onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误
onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成
onMove IE|N4|O 浏览器的窗口被移动时触发的事件
onResize IE4|N4|O 当浏览器的窗口大小被改变时触发的事件
onScroll IE4|N|O 浏览器的滚动条位置发生变化时触发的事件
onStop IE5|N|O 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断
onUnload IE3|N2|O3 当前页面将被改变时触发的事件
表单相关事件事件浏览器支持描述
onBlur IE3|N2|O3 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]
onChange IE3|N2|O3 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]
onFocus IE3|N2|O3 当某个元素获得焦点时触发的事件
onReset IE4|N3|O3 当表单中RESET的属性被激发时触发的事件
onSubmit IE3|N2|O3 一个表单被递交时触发的事件
滚动字幕事件事件浏览器支持描述
onBounce IE4|N|O 在Marquee内的内容移动至Marquee显示范围之外时触发的事件
onFinish IE4|N|O 当Marquee元素完成需要显示的内容后触发的事件
onStart IE4|N|O 当Marquee元素开始显示内容时触发的事件
编辑事件事件浏览器支持描述
onBeforeCopy IE5|N|O 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件
onBeforeCut IE5|N|O 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件
onBeforeEditFocus IE5|N|O 当前元素将要进入编辑状态
onBeforePaste IE5|N|O 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件
onBeforeUpdate IE5|N|O 当浏览者粘贴系统剪贴板中的内容时通知目标对象
onContextMenu IE5|N|O 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的中加入onContentMenu="return false"就可禁止使用鼠标右键了]
onCopy IE5|N|O 当页面当前的被选择内容被复制后触发的事件
onCut IE5|N|O 当页面当前的被选择内容被剪切时触发的事件
onDrag IE5|N|O 当某个对象被拖动时触发的事件 [活动事件]
onDragDrop IE|N4|O 一个外部对象被鼠标拖进当前窗口或者帧
onDragEnd IE5|N|O 当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了
onDragEnter IE5|N|O 当对象被鼠标拖动的对象进入其容器范围内时触发的事件
onDragLeave IE5|N|O 当对象被鼠标拖动的对象离开其容器范围内时触发的事件
onDragOver IE5|N|O 当某被拖动的对象在另一对象容器范围内拖动时触发的事件
onDragStart IE4|N|O 当某对象将被拖动时触发的事件
onDrop IE5|N|O 在一个拖动过程中，释放鼠标键时触发的事件
onLoseCapture IE5|N|O 当元素失去鼠标移动所形成的选择焦点时触发的事件
onPaste IE5|N|O 当内容被粘贴时触发的事件
onSelect IE4|N|O 当文本内容被选择时的事件
onSelectStart IE4|N|O 当文本内容选择将开始发生时触发的事件
数据绑定事件浏览器支持描述
onAfterUpdate IE4|N|O 当数据完成由数据源到对象的传送时触发的事件
onCellChange IE5|N|O 当数据来源发生变化时
onDataAvailable IE4|N|O 当数据接收完成时触发事件
onDatasetChanged IE4|N|O 数据在数据源发生变化时触发的事件
onDatasetComplete IE4|N|O 当来子数据源的全部有效数据读取完毕时触发的事件
onErrorUpdate IE4|N|O 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onRowEnter IE5|N|O 当前数据源的数据发生变化并且有新的有效数据时触发的事件
onRowExit IE5|N|O 当前数据源的数据将要发生变化时触发的事件
onRowsDelete IE5|N|O 当前数据记录将被删除时触发的事件
onRowsInserted IE5|N|O 当前数据源将要插入新数据记录时触发的事件
数据绑定事件浏览器支持描述
onAfterPrint IE5|N|O 当文档被打印后触发的事件
onBeforePrint IE5|N|O 当文档即将打印时触发的事件
onFilterChange IE4|N|O 当某个对象的滤镜效果发生变化时触发的事件
onHelp IE4|N|O 当浏览者按下F1或者浏览器的帮助选择时触发的事件
onPropertyChange IE5|N|O 当对象的属性之一发生变化时触发的事件
onReadyStateChange IE4|N|O 当对象的初始化属性值发生变化时触发的事件

详细地址

收起

展开全文

前端
marquee 滚动到文字上时停止滚动，自定义停止方法
千次阅读 2021-06-08 18:32:29

我要实现的效果如下图：当鼠标移到续费提醒文字上时，文字滚动停止，并出现后面的关闭按钮；当鼠标移出文字时，文字继续滚动，后面的关闭按钮不显示。在网上查到的marquee停止滚动的的代码是这样的：SEOut="this....

我要实现的效果如下图：当鼠标移到续费提醒文字上时，文字滚动停止，并出现后面的关闭按钮；当鼠标移出文字时，文字继续滚动，后面的关闭按钮不显示。

在网上查到的marquee停止滚动的的代码是这样的：

SEOut="this.start()" onMouSEOver="this.stop()">onMouSEOut="this.start()" ：用来设置鼠标移出该区域时继续滚动 onMouSEOver="this.stop()"：用来设置鼠标移入该区域时停止滚动

但是这样有几个问题：1、鼠标移入marquee标签时就停止了，我要实现的是移入文字部分； 2、移入marquee 如何实现控制关闭按钮的显示隐藏

解决问题的方式：将鼠标移入和移出相关的方法加在包裹文字和关闭按钮的div上，自定义事件去处理关闭按钮的显示和隐藏

我的HTML部分的代码如下：

Box" @mouSEOver="marqueeMove()" @mouseleave="marqueeOut()">

Box" v-if="showCarCloseBtn" @click="closeMarquee">

js部分代码：

marqueeMove:function(){

var marquee = document.getElementById('marquee');

marquee.stop();

this.showCarCloseBtn = true; //显示关闭按钮

},marqueeOut:function(){

var marquee = document.getElementById('marquee');

marquee.start();

this.showCarCloseBtn = false; //隐藏关闭按钮

},closeMarquee:function(){

this.showCarouselData = false;

}

鼠标移出事件我刚开始用的mouSEOut，但是有遇到问题，就是当我鼠标移出上面绿框的文字部分，关闭按钮就消失，后面将mouSEOut改成了mouseleave

它们的主要区别：

mouSEOut在鼠标指针离开绑定元素的任何子元素时也会触发；

mouseleave在鼠标指针离开绑定元素的任何子元素时不会触发；

其中还有一点element-ui的图标改大小是直接设置font-size就好了

上面的错误犯过两次了，记一下，不能再犯第三次

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！

收起

展开全文
字幕横向滚动jq、原生js两种方法
2019-11-18 17:31:04

jq-原理：元素position定位，然后控制left的值，让left从最右边开始慢慢减少到最左边直到超过自身宽度后，left（重新赋值）又从最左边开始。缺点：不用jq的animate的话闪屏比较严重，必须引入jq，如果是移动端用...

收起
JS鼠标事件大全推荐收藏
2021-03-15 13:37:19

JS鼠标事件大全推荐收藏，整理的比较细，推荐大家看下。一般事件事件浏览器支持描述 onClick HTML: 2 | 3 | 3.2 |4 Browser:IE3|N2|O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标...

收起
滚动字幕
2018-11-05 00:06:39

滚动字幕 ...

收起

css html python java
js如何实现文字向上滚动效果？
2021-07-15 21:54:54

可以使用定时器来实现，定时任务是将显示区域的scrollTop属性+1。直接上代码： ...实现文字向上滚动效果</title> </head> <body> <div id="showArea" style="width: 150px;height: 50

收起
利用jquery编写文字水平的滚动字幕（跑马灯）
千次阅读 2019-06-16 19:16:56

这个程序相对于传统跑马灯程序增加了文字滚动速度调节、显示一段时间后消失、鼠标移入停止、鼠标移出继续滚动等功能，同时修改了刷新界面时会先闪现一下字幕内容的bug。本程序基于jquery-3.4.0.min.js插件版本，废话...

收起
CSS/JS实现无缝滚动字幕
2017-08-16 15:38:00

定义两个滚动块，内容一模一样，从下往上两个紧挨着滚动，当第一个滚动块滚动出容器时（即第二个滚动块顶到了容器的上边缘），此时我们将第一个滚动块设置位置到容器上边缘，由于两个滚动块一模一样，从效果上我们也...

收起
html中marquee标签实现无缝滚动跑马灯效果方法
2021-06-10 11:14:17

标签，它是成对出现的标签，首标签和尾标签之间的内容就是滚动内容。...今天在做微信端的大转盘抽奖时，想把所有用户的抽奖记录做成无缝滚动的效果，无奈我的js功底太差，一时想不出实现的方法，便百度各种相似效果...

收起
【js鼠标事件/onclick/鼠标点击/光标移开】
2011-11-04 09:06:19

一般事件事件浏览器支持描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件，多用在某个对象控制的范围内的... ... Browser: IE4 | N4 | O 鼠标双击事件 onMouseDown HTML: 2 | 3 | ...

收起

html onclick
HTMl中marquee标签实现无缝滚动跑马灯效果示例
2021-06-10 11:16:07

本篇文章小编给大家分享...标签，它是成对出现的标签，首标签和尾标签之间的内容就是滚动内容。标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay...

收起
js实现文字无限滚动轮播
2021-06-15 14:47:14

添加鼠标移入移出事件 bigBox.onmouseover = function(){ clearInterval(timer); } bigBox.onmouseout = function(){ timer = setInterval(function () { if(bigBox.scrollTop >= primary.scrollHeight){...

收起

前端
HTML标签marquee实现滚动效果
2021-06-11 08:13:46

html标签 - 可以实现多种滚动效果，无需js控制。使用marquee标记不仅可以移动文字，也可以移动图片，表格等.只需要在内部输入要滚动的内容即可。一、标签属性1.滚动方向direction(包括4个值：up、 down、 left和 ...

收起
文字一行横向滚动效果
2022-02-08 10:05:02

最近在做大屏的一个项目，主要是以列表的形式展示一些数据，由于有的数据过长无法全部展示，要求横向滚起来，本来打算用js做，后来发现有个非常好用的标签一样代码搞定对的的简单粗暴符合我小帅的审美，废话不多说...

收起

前端 html css
Vue+跑马灯样式实现文字横向滚动
2021-11-22 16:29:48

Vue+跑马灯样式实现文字左右滚动需求: 在Vue项目的顶部,来实现文字左右滚动步骤: 可以自己封装一个组件,也可以自己写,也可以复制以下代码封装完成以后要在所需的组建中引入,注册,并使用代码: 封装一个专门用来...

收起

vue
JS鼠标事件大全
2016-01-20 22:22:30

一般事件事件浏览器支持描述 ... onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N4|O 鼠标上的...onMouseUp IE4|N4|O 鼠标按下后，松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方

收起
react实现无限循环滚动信息
2021-10-19 14:52:47

后端传递过来的数据滚动显示，鼠标移入后停止滚动，鼠标移出后继续滚动，参考公司门户的公告信息栏实现思路思路一在componentDidMount中定义一个定时器，每过1000ms触发一次事件，将数组中第一条数据push到数组...

收起
javascript鼠标事件学习
2013-06-06 09:12:02

入]javascript鼠标事件汇总事件触发时机一般事件 onclick 鼠标单击时触发此事件 ondblclick 鼠标双击时触发此事件 onmousedown 按下鼠标时触发此事件 onmouseup 鼠标按下后松开鼠标时触发...

收起

对象
字体滚动实现效果的几种方式
千次阅读 热门讨论 2021-05-26 10:22:39

1.direction：滚动方向(包括4个值：up、down、left、right) 说明：up：从下向上滚动；down：从上向下滚动；left：从右向左滚动；right：从左向右滚动。语法： <marquee direction="滚动方向">...</...

收起

vue
程序天下:JavaScript实例自学手册
2018-07-08 12:59:55

4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 图片跟随鼠标 4.14 围绕鼠标的文本 4.15 鼠标旁边的提示信息 ...

收起
html网页内容自动滚动实现跑马灯效果
千次阅读 2019-12-25 12:01:15

超出div高度，文本自动滚动（像跑马灯一样从下往上滚动）一个div里面有文字 1、如果文字没超出div高度：文字不用滚动 2、如果文字太多超出了div高度，那些文字就自动滚动 ps:滚动的效果就像我这个设置一样 <...

收起
marquee一行代码实现滚动跑马灯效果无需js
2019-02-21 16:06:20

网站设计案例展示一般用幻灯片切换会比较高大上，但这需要用到js，第三方博客等网站不支持外嵌js，或者有些网友不知道怎么用，有一种方法可以解决，用标签，可以实现多种滚动效果，无需js控制。marquee标签不仅可以...

收起

marquee
文本在屏幕上滚动，跑马灯，无缝滚动
2021-07-28 09:26:50

左右无缝滚动效果 <marquee scrolldelay="10" direction="scroll">welcome</marquee> 一、常用属性 1.direction：滚动方向(包括4个值：up、down、left、right) 2.behavior：滚动方式(包括3个值：scroll...

收起
js鼠标事件大全
2010-01-19 10:32:00

onClick IE3|N2|O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N4|O 鼠标上的按钮被按下了 onMouseUp...N2|O3 当鼠标移动到某对象范围的上方时触发的事件

收起

文档脚本
教你五分钟实现前端页面滚动信息的制作
千次阅读 2018-09-19 22:15:13

但是由于这个标签吧,很久都没使用了,现在我们也只是粗略介绍一下里面的一些个属性,主要部分还是得靠JavaScript来实现. <marquee></marquee> 首先介绍这个标签的第一个属性: 1....

收起

前端开发动画效果
转：HTML中让图片滚动的标签的使用方法
千次阅读 2021-06-09 04:32:15

实例：需要滚动的文字需要滚动的文字也可以程序代码也可以是图片说明：1、中间的内容可以为 ...用来设置鼠标移入该区域时停止滚动属性：align设定标签内容的对齐方式absbottom：绝对底部对齐(与g、p等字母的最下端对...

收起
js mouseover 改 mouseleave 、鼠标事件
2013-06-28 16:04:54

示例引用： http://www.jsfoot.com/jquery/demo/2011-09-06/170.html ...text/javascript"...scripts/jquery-1.2.6.min.js"></script> <script type=...

收起

css + js实现无缝滚动字幕

实现思路

html 代码

css 代码

js 代码

源码下载

上一篇博客地址

js鼠标移入文字滚动的效果

js鼠标移入文字滚动的效果

vue js 中的鼠标事件

marquee 滚动到文字上时停止滚动，自定义停止方法

字幕横向滚动jq、原生js两种方法

JS鼠标事件大全推荐收藏

滚动字幕

js如何实现文字向上滚动效果？

利用jquery编写文字水平的滚动字幕（跑马灯）

CSS/JS实现无缝滚动字幕

html中marquee标签实现无缝滚动跑马灯效果方法

【js鼠标事件/onclick/鼠标点击/光标移开】

HTMl中marquee标签实现无缝滚动跑马灯效果示例

js实现文字无限滚动轮播

HTML标签marquee实现滚动效果

文字一行横向滚动效果

Vue+跑马灯样式实现文字横向滚动

JS鼠标事件大全

react实现无限循环滚动信息

javascript鼠标事件学习

字体滚动实现效果的几种方式

程序天下:JavaScript实例自学手册

html网页内容自动滚动实现跑马灯效果

marquee一行代码实现滚动跑马灯效果无需js

文本在屏幕上滚动，跑马灯，无缝滚动

js鼠标事件大全

教你五分钟实现前端页面滚动信息的制作

转：HTML中让图片滚动的标签的使用方法

js mouseover 改 mouseleave 、鼠标事件

js鼠标移入时才开始滚动字幕

css + js实现无缝滚动字幕

实现思路

html 代码

css 代码

js 代码

源码下载

上一篇博客地址

js鼠标移入文字滚动的效果

js鼠标移入文字滚动的效果

vue js 中的鼠标事件

marquee 滚动到文字上时停止滚动，自定义停止方法

字幕横向滚动jq、原生js两种方法

JS鼠标事件大全 推荐收藏

滚动字幕

js如何实现文字向上滚动效果？

利用jquery编写文字水平的滚动字幕（跑马灯）

CSS/JS实现无缝滚动字幕

html中marquee标签实现无缝滚动跑马灯效果方法

【js鼠标事件/onclick/鼠标点击/光标移开】

HTMl中marquee标签实现无缝滚动跑马灯效果示例

js实现文字无限滚动轮播

HTML标签marquee实现滚动效果

文字一行横向滚动效果

Vue+跑马灯样式实现文字横向滚动

JS鼠标事件大全

react实现无限循环滚动信息

javascript鼠标事件学习

字体滚动实现效果的几种方式

程序天下:JavaScript实例自学手册

html网页内容自动滚动实现跑马灯效果

marquee一行代码实现滚动跑马灯效果无需js

文本在屏幕上滚动，跑马灯，无缝滚动

js鼠标事件大全

教你五分钟实现前端页面滚动信息的制作

转：HTML中让图片滚动的标签的使用方法

js mouseover 改 mouseleave 、鼠标事件

js鼠标移入时才开始滚动字幕

JS鼠标事件大全推荐收藏