`

文字连续向上循环滚动

阅读更多

view 代码 例子:

<div id="de" style="overflow:hidden; width:128px; height:300px;">
        <div id="de1">
            <ul class="right-middle">
                <li>
                    <p>
                        <a href="" class="avatar" target="_blank">
                            <img src="/Images/product/pic1.jpg" alt="javascript的类型转换规则">
                        </a>
                        <span>原文地址Javascript类型转换的规则</span>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="" class="avatar" target="_blank">
                            <img src="/Images/product/pic1.jpg" alt="javascript的类型转换规则">
                        </a>
                        <span>原文地址Javascript类型转换的规则</span>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="" class="avatar" target="_blank">
                            <img src="/Images/product/pic1.jpg" alt="javascript的类型转换规则">
                        </a>
                        <span>原文地址Javascript类型转换的规则</span>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="" class="avatar" target="_blank">
                            <img src="/Images/product/pic1.jpg" alt="javascript的类型转换规则">
                        </a>
                        <span>原文地址Javascript类型转换的规则</span>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="" class="avatar" target="_blank">
                            <img src="/Images/product/pic1.jpg" alt="javascript的类型转换规则">
                        </a>
                        <span>原文地址Javascript类型转换的规则</span>
                    </p>
                </li>
            </ul>
        </div>
        <div id="de2"></div>
</div>

 javascript 实现滚动效果:

<script>
    var dome = document.getElementById("de");
    var dome1 = document.getElementById("de1");
    var dome2 = document.getElementById("de2");
    var speed = 50;//设置向上轮动的速度  
    dome2.innerHTML = dome1.innerHTML;//复制节点  
    function moveTop() {
        if (dome1.offsetHeight - dome.scrollTop <= 0) {
            dome.scrollTop = 0;
        } else {
            dome.scrollTop++;
        }
    }
    var myFunction = setInterval("moveTop()", speed);
    dome.onmouseover = function () {
        clearInterval(myFunction);
    };
    dome.onmouseout = function () {
        myFunction = setInterval(moveTop, speed);
    };
</script>

 

分享到:
评论

相关推荐

    jQuery实现列表自动滚动循环滚动展示新闻

    5. 循环滚动:当ul元素滚动到最左边时,需要将其位置调整到原始位置,并且继续执行滚动,这样才能实现真正的循环滚动效果。这可以通过判断ul元素的左边界是否已经超出了容器的左边界来实现。如果超出,则将ul元素的...

    jQuery文字逐行向上滚动代码.zip

    这通常与`.slideUp()`和`.slideDown()`配合,实现文字的连续滚动。 6. **回调函数(Callback Functions)**:在动画结束时,可以使用回调函数来执行后续操作,例如,当一行文字完全隐藏后,将下一行文字移动到容器...

    js实现文字内容无缝滚动动画效果

    "js实现文字内容无缝滚动动画效果"是一个常见的JavaScript技术应用,主要用于创建一种视觉上连续、无中断的文字滚动展示,常见于新闻网站或者公告栏。这种效果使得有限的空间内可以展示更多的信息,而不会显得拥挤。...

    Div块上下左右循环滚动

    【Div块上下左右循环滚动】是一种常见的网页动态效果,它可以使网页中的某个Div元素实现持续不断的循环滚动,增强用户体验和视觉吸引力。这种效果通常通过JavaScript和CSS技术来实现,尤其在现代网页设计中,...

    无缝向上滚动(图片文字效果)

    这种技术主要用于创建连续、平滑的滚动动画,让图像和文字以优雅的方式在页面上移动,从而增强用户体验并提升网站的视觉吸引力。 无缝滚动通常涉及到JavaScript或者CSS3的运用,有时会结合jQuery等库来简化实现过程...

    多列文字循环滚动带停顿--萧萱芸梦提供

    标题中的“多列文字循环滚动带停顿”指的是在网页设计中实现的一种特效,它允许文字信息以多列的形式在页面上循环滚动,并且在滚动过程中有停顿效果,这样可以吸引用户的注意力并方便阅读。这种效果常用于网站公告、...

    无缝向上滚动文字代码兼容各种浏览器

    无缝向上滚动文字代码,正如其名,旨在实现一种在页面上连续、平滑且无中断的文字滚动效果,而且这种效果应该能在各种浏览器上正常工作,包括但不限于Chrome、Firefox、Safari、Edge以及Internet Explorer等。...

    文字间歇向上滚动代码(兼容IE,FF)

    在实现这个功能时,我们需要编写一段JavaScript代码来控制文字的滚动行为,包括滚动速度、滚动方向、滚动间隔以及是否循环滚动等。 在提供的压缩包文件“textscroll”中,可能包含了实现这个效果的具体代码示例。...

    文字向上滚动

    这段代码将使`#scrolling-text`元素每隔一段时间向上移动其自身高度的距离,当到达顶部时,会立即重置到原始位置并再次滚动,从而形成循环滚动效果。 除了jQuery,CSS3也可以实现类似的效果,但需要更多的CSS属性和...

    jquery插件之文字间歇自动向上滚动效果代码

    滚动的实现通过`animate`函数让`ul`元素的`margin-top`属性每隔一定时间向上移动一定值,当达到设定的滚动高度后,将列表的第一个元素移动到最后,然后重置`margin-top`,从而产生无限循环的滚动效果。 4. 实际应用...

    jQuery实现的文字逐行向上间歇滚动效果示例

    5. 循环滚动的实现:如果需要让滚动动作循环进行,就需要在动画结束的回调函数中再次设置定时器,这样可以实现滚动的连续循环。 在具体代码实现方面,需要包含以下几个部分: - 引入jQuery库:通过`&lt;script&gt;`标签...

    实现连续滚动文字效果,无间断

    当滚动到顶部时,再通过调整`scrollTop`的值回到初始位置,实现循环滚动的效果。 ```javascript var speed = 40; // 速度 document.getElementById('m0').innerHTML = document.getElementById('mtext').innerHTML;...

    JS实用的带停顿的逐行文本循环滚动效果实例

    总结来说,这个实例通过JavaScript实现了一个带停顿的逐行文本循环滚动效果,利用了DOM操作、定时器和条件判断,提供了用户交互功能,如鼠标悬停暂停和离开后继续滚动。通过调整不同的参数,可以定制滚动速度、停顿...

    jquery实现文字由下到上循环滚动的实例代码

    本文将详细介绍如何使用jQuery来实现一个常见的Web效果——文字由下到上循环滚动。 要实现文字由下到上循环滚动效果,需要使用到jQuery的几个核心功能:选择器、动画和定时器。具体来说,需要用到以下知识点: 1. ...

    平滑文字滚动控件

    这个文字滚动控件比较不错,滚动比较平滑,没有闪烁现象,支持左右水平、上下垂直滚动。【向左滚动样式一】是循环连续滚动,【向左滚动样式二】则滚动到左端时停止一下继续滚动,【向上滚动样式一】也和前面差不多。

    无缝垂直向上滚动

    【无缝垂直向上滚动】是一种常见的网页动态效果,它主要用于展示一串连续的信息,如新闻标题、广告或菜单项,通过不间断地向上滚动,使用户能够查看到更多的内容而无需手动翻页。这种效果在网站设计中被广泛应用,...

    不间断 滚动图片 滚动文字

    - `不间断向上滚动文字.html`: 同理,这个文件则可能是用于展示不间断向上滚动文字的HTML代码示例,其中可能会使用到`&lt;marquee&gt;`标签或者通过JavaScript实现滚动效果。 在实际开发中,为了确保兼容性和性能,...

    文字滚动代码教程

    - 可选值包括:`scroll`(连续滚动)、`slide`(滑动一次后停止)、`alternate`(来回滚动),默认为`scroll`。 3. **loop** - 表示循环次数 - 值为正整数,表示滚动多少次后停止;若省略,则默认为无限循环。 ...

    制作网页中的滚动文字

    考虑下面的例子,我们将创建一个循环垂直向上滚动的两行文字: ```html ()" onmouseout="this.start()" scrollAmount="1" scrollDelay="100" direction="up" width="100.33%" height="83"&gt; &lt;td height="30"&gt;...

    JQuery文字滚动

    - 动画完成后,将列表中的第一个`&lt;li&gt;`元素移动到列表的末尾,形成循环滚动的效果。 - `$(document).ready()`确保页面加载完成后才执行后续代码。 - 使用`setInterval`设置每隔1秒调用一次`AutoScroll`函数,实现...

Global site tag (gtag.js) - Google Analytics