js不间断滚动的简单实现


Posted in Javascript onJune 03, 2016

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不间断滚动的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
JS 有名函数表达式全面解析
Mar 19 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
Ionic如何创建APP项目
Jun 03 #Javascript
Ionic快速安装教程
Jun 03 #Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 #Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 #Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 #Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 #Javascript
深入理解JavaScript内置函数
Jun 03 #Javascript
You might like
php 缓存函数代码
2008/08/27 PHP
PHP实现下载功能的代码
2012/09/29 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
python Pexpect模块的使用
2020/12/25 Python
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
医学生自我鉴定范文
2013/11/08 职场文书
母亲节感恩寄语
2014/02/21 职场文书
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
使用Python获取字典键对应值的方法
2022/04/26 Python
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技