html文字整体向上滚动代码,js实现文字无缝向上滚动

静态效果如下：(动态效果复制粘贴下面代码可见)

代码如下：

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;

}

444444444444444444444444
11111111111111111111111111
11111111111111111111111111
11111111111111111111111111
11111111111111111111111111
33333333333333333333333333
11111111111111111111111111
11111111111111111111111111
11111111111111111111111111
11111111111111111111111111
11111111111111111111111111
2222222222222

//滚动

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();

})

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

html文字整体向上滚动代码,js实现文字无缝向上滚动相关推荐

html table表格无缝向上滚动效果,js实现表格无缝滚动效果
table表格无缝向上滚动 height: 500px; overflow: hidden; position: relative; width: 1000px; margin: 100px auto ...
php实现文字向左跑马灯,js实现文字跑马灯效果
js实现文字超过显示宽度每间隔1s自动向左滚动显示 *{ margin:0; padding:0;} body{font:12px/1 '微软雅黑';} .wrapper{font-size: 0.8 ...
html加js实现滚动图片,js实现图片无缝滚动
js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2 ...
css里给文字加下划线代码,css添加文字下划线样式的方法
css添加文字下划线样式的方法发布时间:2020-08-31 13:54:27 来源:亿速云阅读:65 作者:小新这篇文章将为大家详细讲解有关css添加文字下划线样式的方法,小编觉得挺实用的,因 ...
html图片自动向左滚动代码,图片无缝滚动代码(向左/向下/向上)
想必大家都注意到的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放de ...
html实现文字隐藏展开特效代码,js实现点击展开隐藏效果（实例代码）
js实现点击展开隐藏效果(实例代码) 发布时间:2020-09-20 10:47:49 来源:脚本之家阅读:69 作者:laozhang 本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果(代码 ...
php窗口滚动代码_PHP自动在页面上滚动展示图片的方法
这篇文章主要介绍了PHP实现自动对图片进行滚动显示的方法,涉及php操作图片特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了PHP实现自动对图片进行滚动显示的方法.具体如下: 指 ...
python识别图片上的文字_python如何一行代码实现图片文字识别
编写代码如下: from PIL import Imageimport pytesseract text = pytesseract.image_to_string(Image.open('C:\\U ...
html中图片自动循环滚动代码,实现长图片自动循环滚动效果
实现思路滚动效果用实现.有个方法,可以滚动到指定位置(有滚动效果,不是直接到指定位置),不了解的看这里种定位滚动方式演示.每一个Item是一张长图,这样首尾相接滚动起来(滚到无限远)就是无限循环的效 ...

html文字整体向上滚动代码,js实现文字无缝向上滚动

html文字整体向上滚动代码,js实现文字无缝向上滚动相关推荐

最新文章

热门文章