js实现文字无缝向上滚动

2024-02-29 07:51:13

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

代码如下：

<!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>

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

js代码实现无缝滚动(文字和图片)

一款适用于方案和图片的JS无缝滚动代码,可控制向左或向右滚动,代码不算复杂,而且本无缝滚动代码兼容性也挺好,你几乎不需要修改什么代码,就能使用了.测试时候把那些带标号的方块都改成图片吧,这样就更有感觉了. 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无缝滚动</title> <s
angularjs实现文字上下无缝滚动特效代码

最近没有项目做,于是闲暇之余学习了下angularjs知识,然后写了一个文字上下无缝滚动的例子,主要写的是一个小小的指令. css代码: 主要控制样式 <style type="text/css"> *{margin: 0px;padding: 0px;} .slide {width: 200px;height:200px;border:1px solid #dcdcdc;margin: 0 auto;margin-top: 50px;overflow: hidden;}
基于javascript实现文字无缝滚动效果

本文实例为大家分享了javascript实现文字无缝滚动的全部代码,供大家参考,具体内容如下效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> &
javascript实现文字无缝滚动

效果如图: html:( 一个div 包裹两个ul ) <div style="position: absolute; left: 500px; top: 200px; background-color: white; height: 140px; width: 400px; border: solid; 1px; overflow: hidden;" id="box"> <ul id="ul1"> <li>&
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&qu
jQuery插件实现文字无缝向上滚动效果代码

本文实例讲述了jQuery插件实现文字无缝向上滚动效果代码.分享给大家供大家参考,具体如下: 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
基于JS实现新闻列表无缝向上滚动实例代码

当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>文字列表无缝向上滚动代码<
JS实现简单的文字无缝上下滚动功能示例

本文实例讲述了JS实现简单的文字无缝上下滚动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="" /> <title>文字列表无缝滚动代码</title> <style type="text/cs
10行原生JS实现文字无缝滚动(超简单)

废话不多说,直接上代码 <section class="pro_quota_tip"> <div class="tip_box"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external
jQuery实现单行文字间歇向上滚动源代码

使用jQuery实现单行文字间歇向上滚动效果网址:http://www.keleyi.com/keleyi/phtml/textscroll.htm 本效果加强版:http://www.keleyi.com/a/bjac/532bedbffca1affa.htm 主要增加了光标悬停效果以下是源代码: 复制代码代码如下: <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/j
js实现文字无缝轮播

本文实例为大家分享了js实现文字无缝轮播的具体代码,供大家参考,具体内容如下所用到的知识点: innerHTML 获取或设置某个对象的内容scrollTop 滚动条滚动的距离,此属性是系统内置定义好的offsetHeight 获取或设置对象的高度setInterval() 开启定时器clearInterval() 关闭定时器 html布局结构如下: 其中con2是用来储存复制con1内容的容器 <body> <div id="mooc"> <!-- 头部
JS实现文字向下滚动完整实例

本文实例讲述了JS实现文字向下滚动的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>京东.淘宝晒单</title> <style> @charset "
js实现单行文本向上滚动效果实例代码

复制代码代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, autoStart) { this.Delay = 10; this.LineHeight = 20; this.Amount = 1; this.Direction = "up"; this.Timeout = 1500; this.Scrol
Js 实现文字爬楼滚动效果结合文本框

文字爬楼 msg="我们网页特效" align="left"; speed=250; up=true; spas=" "; for (a=0;a "); for (i=1;i "); document.write(" "); } document.write(" "); function scrollIt() { j++; with (document.form) { if ((j+12

js实现文字无缝向上滚动

相关推荐

随机推荐