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. symfony2取得web目录绝对路径、相对路径、网址的函数是什么

    对于你的需求,Symfony2通过DIC提供了kernel服务,以及request(请求)的封装. 在controller里(在其他地方你可以自行注入kernel,这个服务是HttpKernel库里的 ...

  2. table中bordercolor属性设置后最新ie浏览器或firefox中不显示边线，借助table的css来实现边线

    table中的bordercolor属性设置后在最新的ie或者firefox中均不显示边线,table的边线又是常用功能.只能使用css来实现了,更通用,更方便一些. css: ​.ctable{ b ...

  3. 提供VR定制开发、AR定制开发（VR游戏定制、应用定制）

    设置输出路径 添加烘培输出的贴图类型 添加“LightingMap”类型 设置烘培贴图大小和目标贴图位置为“自发光” 设置烘培材质,选择“输出到源” 点击“渲染”即可 24.标准材质贴图的烘培光影处理 ...

  4. MyEclipse、Eclipse复制web项目

    假设现在已经有一个Java Web项目 ProjectA,现在想做另外一个项目ProjectB,它里面绝大部分功能和结构都可以复用ProjectA中的: 我们就可以通过复制项目的方法来做,具体步骤如下 ...

  5. AVL的删除写法的一个错误

    今天在写AVL删除的时候犯了一个傻逼错误,调了很久,教训惨痛,引以为鉴. 树中允许有重复节点,如果删除的节点有重复,则只删除1个. AVL删除采取的方法是首先判断待删除节点是否存在,如果存在,那么判断 ...

  6. 【solr】之solr界面查询返回距离并排序

    使用solr界面查询 {!geofilt}距离函数 star:[4 TO 5]星级排序 geodist() desc 距离排序 pt :31.221717,121.580891 sfield:loca ...

  7. dubbo服务自动化测试搭建

    java实现dubbo的消费者服务编写:ruby实现消费者服务的接口测试:通过消费者间接测试dubbo服务接口的逻辑 内容包括:dubbo服务本地调用环境搭建,dubbo服务启动,消费者部署,脚本编写 ...

  8. Install Maya 2015 x64 in CentOS 7

    Thanks for Must(QQ ID)'s big help for installing Maya in CentOS7. This is my steps for installing ma ...

  9. 处理ios webview 更新缓存本地css、js后webview缓存无法更新的问题

    项目中需要使用app本地css.js,并且可以根据服务下发自动更新本地css.js.测试发现只要更新后的css或者js和更新前路径一致,webview加载的还是更新前的css.js.怀疑是webvie ...

  10. JAVA 取得当前目录的路径/Servlet/class/文件路径/web路径/url地址

    在写java程序时不可避免要获取文件的路径...总结一下,遗漏的随时补上 1.可以在servlet的init方法里 String path = getServletContext().getRealP ...