jquery实现文字向上滚动效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery实现文字向上滚动效果相关的知识，希望对你有一定的参考价值。
html部分
<body>
<div id="demo" >
<ul id="demo1">
<li>1111111111111111</li>
<li>2222222222222222</li>
<li>3333333333333333</li>
<li>4444444444444444</li>
<li>5555555555555555</li>
<li>6666666666666666</li>
<li>7777777777777777</li>
<li>8888888888888888</li>
<li>9999999999999999</li>
<div id="demo2"></div>
</div>
</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)};
});
图片向左循环滚动
<body>
<div id="demo">
<table>
<tr>
<td id="demo1">
<table>
<tr>
<td><img src="image/aa.png"></td>
<td><img src="image/bb.png"></td>
<td><img src="image/cc.png"></td>
<td><img src="image/dd.png"></td>
<td><img src="image/ee.png"></td>
<td><img src="image/ff.png"></td>
</tr>
</table>
</td>
<td id="demo2"></td>
</tr>
</table>
</div>
#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)};
});
以上是关于jquery实现文字向上滚动效果的主要内容，如果未能解决你的问题，请参考以下文章