demo1:

<!DOCTYPE html>

<html>

<head>

  <title>div内容间隔1秒动态滚动</title>

</head>

<body>

  <div id="demo">
    <span id="sp">
      <p>恭喜133****1231用户获得100元手机话费</p>
      <p>恭喜134****1232用户获得100元手机话费</p>
      <p>恭喜135****1233用户获得200元手机话费</p>
      <p>恭喜136****1234用户获得100元手机话费</p>
      <p>恭喜137****1235用户获得200元手机话费</p>
      <p>恭喜138****1236用户获得100元手机话费</p>
    </span>
  </div>

  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

  <script type="text/javascript">

    $(document).ready(function() {

      setInterval('autoScroll("#demo")', 1000);
    });

    function autoScroll(obj) {
      $(obj).find("#sp:first").animate({
        marginTop: "-30px"
      }, 500, function() {
        $(this).css({marginTop:"0px"}).find("p:first").appendTo(this);
      });
    }

  </script>

</body>

</html>

demo2:

<!DOCTYPE html>
<html>
<head>
  <style>
    *{padding:0;margin:0;list-style:none;}
  </style>
</head>
<body>
  <a href="#">第一条新闻</a>
  <a href="#">第二条新闻</a>
  <a href="#">第三条动态</a>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  <script>
    $(function() {
      $('a:first').siblings().hide();
      setInterval(function() {
        $('a:visible').slideUp('slow', function() {
          $(this).next('a')[0] === undefined ? $('a:first').fadeIn("slow") : $(this).next('a').fadeIn("slow");
        });
      }, 1000*2)
    });
  </script>
</body>
</html>

demo3:

<!DOCTYPE html>
<html>
<head>

</head>

<body>
  <div id="drawLetters" style="overflow:hidden;height:200px;">
    <div id="dl">
      <p>恭喜133****1062用户获得10元手机话费</p>
      <p>恭喜153****0792用户获得50元助学代金券</p>
      <p>恭喜153****3890用户获得330元上课大礼包</p>
      <p>恭喜189****0883用户获得330元上课大礼包</p>
      <p>恭喜133****6823用户获得1500元现金</p>
      <p>恭喜153****5050用户获得330元上课大礼包</p>
    </div>
  </div>
  <script language="javascript" type="text/javascript">
    var drawLetters = document.getElementById("drawLetters");
    var dl = document.getElementById("dl");
    var speed = 20; //滚动速度值,值越大速度越慢
    function Marquee() {
      drawLetters.scrollTop++;
      var newNode = document.createElement("div");
      newNode.innerHTML = dl.innerHTML;
      drawLetters.insertBefore(newNode,null);
    }
    var MyMar = setInterval(Marquee, speed); //设置定时器
  </script>
</body>
</html>

jQuery div内容间隔1秒动态向上滚动HTML、JS代码的更多相关文章

  1. jquery 禁止herf跳转,并执行相应的js代码

    <a class="oh_btn bg_3" href="javascript:void(0);" onclick="myfun(this)&q ...

  2. 网站内容禁止复制和粘贴、另存为的js代码(转)

    1.使右键和复制失效 方法1: 在网页中加入以下代码: 代码如下: <script language="Javascript"> document.oncontextm ...

  3. 网站内容禁止复制和粘贴、另存为的js代码

    1.使右键和复制失效 方法1: 在网页中加入以下代码: 复制代码代码如下: <script language="Javascript"> document.oncont ...

  4. 动态计算rem的js代码

    以最小1024尺寸为例: function rem() { var htmlEle = document.documentElement; var winWidth = htmlEle.clientW ...

  5. jquery鼠标移动div内容上下左右滚动

    jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...

  6. jQuery 清除div内容

    $.ajax({            url: "SearchSN.aspx",            data: "SN=" + $("#txtS ...

  7. jQuery 编辑div内容

    div显示如下 <div id="showResult"></div> div中添加的html,进行拼接 $("#showResult" ...

  8. JQuery如何监听DIV内容变化

    这几天在做一个微博的接入,需要判断微博是否被关注,要检查微博标签的DIV是否有“已关注”的字符,但这个DIV的内容是微博JSSDK动态生 成.$("#id").html()是获取不 ...

  9. jquery动态为个span,input,div,等标签赋值的方法总结,js动态隐藏div

    1.jquery为span和div标签赋值. <span id="span1"></span> <div id="div1"> ...

随机推荐

  1. oracle11g重置system密码,外二

    来自:http://lukeview.blog.51cto.com/508652/912124 win+r,输入sqlplus /nolog,回车SQL> conn /as sysdba已连接: ...

  2. 【linux】linux shell 日期格式化

      获得当天的日期 date +%Y-%m-%d 输出: 2011-07-28 将当前日期赋值给DATE变量DATE=$(date +%Y%m%d) 有时候我们需要使用今天之前或者往后的日期,这时可以 ...

  3. C++中一个常用的句型(两个for(;;)语句连用的重要性)

    在一些简单的C++编程中,经常会用到两个for(;;)语句连用的情况,这是一个常用句型,因此感觉也非常重要.下面举两个例子说明一下: 例1.用两个for(;;)语句来进行数组元素大小的排序 #incl ...

  4. [综]前景检测GMM

    tornadomeet 前景检测算法_4(opencv自带GMM) http://www.cnblogs.com/tornadomeet/archive/2012/06/02/2531705.html ...

  5. Intellij IDEA +MAVEN+Jetty实现Mybatis的HelloWorld

    1 maven配置:pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht ...

  6. Mybatis原理分析之二:框架整体设计

    1.引言 本文主要讲解Mybatis的整体程序设计,理清楚框架的主要脉络.后面文章我们再详细讲解各个组件. 2.整体设计 2.1 总体流程 (1)加载配置并初始化       触发条件:加载配置文件 ...

  7. ashx文件不能使用DAL和Model的解决办法

    好久没有写web程序了,今天在写web程序时,发现一个问题,在ashx文件中,已经using了DAL和Model命名空间,而且引用中也引用了程序集,可是还报错:未能找到类型或命名空间"Mod ...

  8. bug--常见的bug总结:

    新手总结的开发中所遇到错误及解决办法,如有不对,欢迎指正,如有更好的解决办法,也请不吝赐教. 一.dialog.show()引起的android.view.WindowManager$BadToken ...

  9. VS里统计整个解决方案代码行数的方法

    VS里统计整个解决方案代码行数,在查找里输入正则表达式:b*[^:b#/]+.*$.如下图所示: 结果如下图所示:

  10. Openfire 编译插件

    新增的插件打包方法: 3.打包插件 a.第一次打包需配置ant工具.在环境变量中, 添加 path=C:\Program Files\Java\jdk1.5.0_09\;D:\Program File ...