js实现文字无缝向上滚动
更新时间：2017年02月16日 11:46:39 作者：大大大大糖糖
本文主要分享了js实现文字无缝向上滚动的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
静态效果如下：（动态效果复制粘贴下面代码可见）
代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin:0;
}
ul,li{
list-style: none
}
.scroll {
height:90px;
width:100%;
max-width:640px;
background-color:#000;
overflow:hidden;
color: #fff;
}
.scroll ul {
width:100%;
position:absolute;
left:0;
top:0;
}
.scroll span {
font-size:20px;
height:30px;
/*color:#D83E21;
*/
}
.scroll li {
height:30px;
line-height:30px;
}
</style>
</head>
<body>
<div id="scroll" class="scroll clearfix">
<ul>
<li>444444444444444444444444</li>
<li>11111111111111111111111111</li>
<li>11111111111111111111111111</li>
<li>11111111111111111111111111</li>
<li>11111111111111111111111111</li>
<li>33333333333333333333333333</li>
<li>11111111111111111111111111</li>
<li>11111111111111111111111111</li>
<li>11111111111111111111111111</li>
<li>11111111111111111111111111</li>
<li>11111111111111111111111111</li>
<li>2222222222222</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
//滚动
var scrollIndex=0;
var Timer=null;
function scroll_f(){
clearInterval(Timer);
var ul=$("#scroll ul");
var li=ul.children("li");
var h=li.height();
var index=0;
ul.css("height",h*li.length*2);
ul.html(ul.html()+ul.html());
function run()
{
if(scrollIndex>=li.length){
ul.css({top:0});
scrollIndex=1;
ul.animate({top:-scrollIndex*h},200);
}
else{
scrollIndex++;
ul.animate({top:-scrollIndex*h},200);
}
}
Timer=setInterval(run,1500);
}
$(function(){
scroll_f();
})
</script>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了如何使用JavaScript实现随机点名效果,文中的示例代码简洁易懂,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2023-11-11
这篇文章主要介绍了JS+html5 canvas实现的简单绘制折线图效果,结合实例形式分析了js结合HTML5 canvas技术实现图形绘制的数值运算与数组遍历等操作技巧,需要的朋友可以参考下2017-03-03
这篇文章主要给大家介绍了关于JavaScript如何将base64图片转化为URL格式的相关资料,Base64是一种编码方式,而不是真正的加密方式,即使算Base64也仅用作一个简单的加密来保护某些数据,而真正的加密通常都比较繁琐,需要的朋友可以参考下2023-07-07
关于JS弹出层的显示与隐藏，在网上可以搜到很多的类似教程，本文实现了一下，喜欢的朋友不要错过2013-12-12
用js实现的抽象CSS圆角效果!!...2007-05-05
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
这篇文章主要介绍了微信小程序实现点击按钮修改view标签背景颜色功能,涉及微信小程序事件响应及数值运算实现动态设置view背景色样式的相关操作技巧,需要的朋友可以参考下2017-12-12
本文将使用canvas实现粒子时钟效果，具有一定的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家详细介绍了如何使用pdf-lib.js实现拼接两个pdf文件并添加水印,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下2024-11-11
按Ctrl+Enter发送，思路是监听textarea的onkeydown事件，当ctrl键被按下，并且，keycode为13（回车），时，调用发送表单的函数2014-09-09
JavaScript 中的相等操作符详解，包括 [] == []、[] == ![]、{} == !{}几个操作符,需要的朋友可以参考下2019-12-12
最新评论