jquery实现文字向上滚动效果

最新推荐文章于 2025-08-06 14:36:16 发布

转载最新推荐文章于 2025-08-06 14:36:16 发布 · 625 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ouyangqi/p/6512169.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML、CSS及jQuery实现的图文循环滚动效果。通过克隆元素并不断滚动视口，达到无限循环显示的效果。适用于创建动态网页背景或广告轮播等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分

</body>

CSS部分

#demo {
overflow: hidden;
height: 80px;

}
#demo1 li {
line-height: 20px;
}
#demo2 li {
line-height: 20px;
}

jquery部分

$(function(){
var speed = 15;//速度
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2
function marquee(){
if(demo2.offsetHeight-demo.scrollTop<=0){ //当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
}else{
demo.scrollTop++;
}
}
var MyMark = setInterval(marquee,speed)
demo.onmouseover=function() {clearInterval(MyMark)}
demo.onmouseout=function() {MyMark=setInterval(marquee,speed)};
});

图片向左循环滚动

#demo {
overflow: hidden;
height: 300px;
width: 900px;

}

$(function(){
var speed = 1;//速度
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2
function marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0){ //当滚动至demo1与demo2交界时
demo.scrollLeft-=demo1.offsetWidth //demo跳到最顶端
}else{
demo.scrollLeft++;
}
}
var MyMark = setInterval(marquee,speed)
demo.onmouseover=function() {clearInterval(MyMark)}
demo.onmouseout=function() {MyMark=setInterval(marquee,speed)};
});