js不间断滚动的简单实现

CSS:

ul, li {
      margin: 0;
      padding: 0;
    } 

    #scrollDiv {
      width: 300px;
      height: 25px;
      line-height: 25px;
      border-bottom: #4c8cd1 1px solid;
      overflow: hidden;
    } 

      #scrollDiv li {
        height: 25px;
        padding-left: 10px;
      }

JS:

<script>
   function AutoScroll(obj) {
     $(obj).find("ul:first").animate({
       marginTop: "-25px"
     }, 800, function () {
       $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
     });
   } 

   $(document).ready(function () {
     setInterval('AutoScroll("#scrollDiv")', 3000)
     setInterval('AutoScroll("#scrollDiv")', 3000)
   });
 </script> 

HTML:

<div id="scrollDiv">
        <ul>
          <li>这是公告标题的第一行</li>
          <li>这是公告标题的第二行</li>
          <li>这是公告标题的第三行</li>
          <li>这是公告标题的第四行</li>
          <li>这是公告标题的第五行</li>
          <li>这是公告标题的第六行</li>
          <li>这是公告标题的第七行</li>
          <li>这是公告标题的第八行</li>
        </ul> 

      </div> 

以上这篇js不间断滚动的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2016-05-31

JS不间断向上滚动效果代码

复制代码 代码如下: <div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><div id=demo1><img src="http://www.lanrentuku.com/down/js/images/12460764740.jpg"><img src="http://www.lanrentuku.com/d

非常不错的不间断循环滚动类 兼容多浏览器

调用的方法: 首先你得把脚本链接到你的页面,或者直接调用下面这个链接也行.当然,最好还是下载到你自己的机器上. 复制代码 代码如下: <script type="text/javascript" src="http://www.aeroom.org/include/scripts/scrollingAD.js"></script> 下面是第一种使用方法,看起来似乎比较麻烦一点,但是只需要两行代码: 复制代码 代码如下: var sampleD

不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了

/*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.6*\ 制作时间:2006-08-29 (Ver 0.5)  发布时间:2006-08-31 (Ver 0.8)  更新时间:2007-01-31 (Ver 1.6)  更新说明: + 加入功能 * 修正.完善      1.6.070131          + 禁止鼠标控制暂停或继续 (将第9个参数设置为-1或者动态赋值将ScrollSetp设置为-1)          + 判断是否

不间断循环滚动效果的实例代码(必看篇)

蛮优秀的一段效果代码,可以上下左右滚动,收藏了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

JS实现图片的不间断连续滚动的简单实例

js替代marquee实现图片无缝滚动 可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动. 先了解一下下面这几个属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop: 设置或获取位于对象最顶端和窗口中可见内容

js 将图片连接转换成base64格式的简单实例

我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求.坏处呢,就是浏览器不会缓存这种图像.现在我们提供一个js: function convertImgToBase64(url, callback, outputFormat){ var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Ano

原生JS实现图片轮播与淡入效果的简单实例

最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在前端的路上越走越远`(∩_∩)′ 从原理来讲,网上的教程有很多,简单来说. 淡入淡出,其实这里只用到了淡入的效果.每一张淡入的图片,我们将它的display设置为block,其他为none,所以实际存在并且在文档流占位置的只有一张图片.在设置图片的display方式之前,将图片的透明度逐渐增大,就会

JS实现单行文字不间断向上滚动的方法

本文实例讲述了JS实现单行文字不间断向上滚动的方法.分享给大家供大家参考.具体分析如下: 前几天帮一个朋友写了一个单行文字不间断向上滚动的JS效果,现在分享给需要的weber.先看HTML和CSS代码: CSS: 复制代码 代码如下: .wrap{padding:10px;border:1px #ccc solid; width:500px;margin:20px auto;} .roll-wrap{height:130px;overflow:hidden;} HTML: 复制代码 代码如下:

js判断数组key是否存在(不用循环)的简单实例

实例如下: var aaa = { "0":"a", "1":"b", "2":"c", "aa":"d", "4":"e" }; alert(aaa .hasOwnProperty(4));//true 以上这篇js判断数组key是否存在(不用循环)的简单实例就是小编分享给大家的全部内容了,希望能给大家一个

用HTML/JS/PHP方式实现页面延时跳转的简单实例

WEB开发中经常会遇到页面跳转或延时跳转的需求,掌握各种页面跳转方式非常必要. 以下是我总结有用HTML/JS/PHP三类方式实现跳转的方法,例子皆为三秒后跳转到index.php页面. 1,HTML方法: 在HEAD中添加<meta>标签 <meta http-equiv="refresh" content="3;url='index.php'" > 2,JS控制跳转方法 A.Location直接加链接方式 <script type=

js动态添加的DIV中的onclick事件简单实例

最简单的是这样: <input type="button" onclick="alert(this.value)" value="我是 button" /> 动态添加onclick事件: <input type="button" value="我是 button" id="bu"> <script type="text/javascript&quo

js 弹出对话框(遮罩)透明,可拖动的简单实例

js 弹出对话框(遮罩)透明,可拖动的简单实例 <html> <head> <script> function sAlert(txt) { //var eSrc=(document.all)?window.event.srcElement:arguments[1]; var shield = document.createElement("DIV"); shield.id = "shield"; shield.style.posi

Js调用Java方法并互相传参的简单实例

Js通过PhoneGap调用Java方法并互相传参的. 一.JAVA代码 写一个类,该类继承自Plugin并重写execute方法. import org.json.JSONArray; import android.app.Activity; import android.app.AlertDialog; import android.content.ActivityNotFoundException; import android.content.DialogInterface; impor