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 相关文章推荐
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
react+antd 递归实现树状目录操作
Nov 02 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
Python面向对象编程之继承与多态详解
2018/01/16 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
python浪漫表白源码
2019/04/05 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
如何整合JQuery和Prototype
2014/01/31 面试题
《小小雨点》教学反思
2014/02/18 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
广播体操比赛主持词
2015/06/29 职场文书