html:

<div class="liscorll">
  <ul>

    <li>内容</li>

  </ul>
</div>

js:

/* 通知-滚动条 */
var doscroll = function(){
var $parent = $('.liscorll ul');
var $first = $parent.find('li:first');
var height = $first.height();
$first.animate({
height: 0 //或者改成: marginTop: -height + 'px'
}, 500, function() {// 动画结束后,把它插到最后,形成无缝
$first.css('height', height).appendTo($parent);
// $first.css('marginTop', 0).appendTo($parent);
});
};
setInterval(function(){doscroll()}, 3000);

js实现列表从下往上循环滚动的更多相关文章

  1. jquery实现文字由下到上循环滚动的实例代码

    <div id="oDiv"> <ul id="oUl"> <li>第1个li元素</li> <li> ...

  2. JS列表的下拉菜单组件(仿美化控件select)

    JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...

  3. mui实现列表的下拉刷新上拉加载

    1.引入mui控件的js文件和css样式文件 <link rel="stylesheet" href="css/mui.min.css"> < ...

  4. 记录下vue keep-alive IOS下无法保存滚动scroll位置的问题

    最近 做的项目,遇到了一点小麻烦,就是我一个页面A页面是加载 列表数据 ,B页面是展示详细信息的.A进去B时,缓存A页面. 效果 做出来 后,缓存是缓存数据 了,但是当我A页面的列表数据 好多,要滚动 ...

  5. 关于移动端弹层下的body滚动

    关于移动端弹层下的body滚动 这个问题在移动端挺常见的,网上也有一些解决方法,现在笔者来总结一下:css的解决方案都有兼容问题,js是比较稳定的解决方法(虽然比较麻烦) ps: 本文的例子都是用vu ...

  6. js获取键盘按下的键值event.keyCode,event.charCode,event.which的兼容性

    js获取键盘按下的键值有event.keyCode,event.charCode和event.which 其中: 谷歌浏览器对event.keyCode,event.charCode和event.wh ...

  7. js实现图片向上播放(轮番滚动)

    js实现图片向上播放(轮番滚动) 实现方式,多种多样,这里我们来看javascript实现方式,重点是研究里面的源代码: 看看别人是如何写出“优雅的代码” <!DOCTYPE html PUBL ...

  8. JavaScript判断鼠标滑轮是向下还是向上滚动

    我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...

  9. WP8_GestureListener实现列表向下滑动加载新数据

    利用GestureListener的OnDragCompleted事件,实现列表向下滑动时,加载新的数据: (不建议使用 Touch.FrameReported+=Touch_FrameReporte ...

随机推荐

  1. PID算法的理解及场景模拟

    增量式PID算法的简化版之后的公式: △u(t)=Ae(t)-Be(t-1)+Ce(t-2) △u:PID控制器输出的下一时刻的调整量 e(t):PID控制器在当前时刻的状态变化量-给定值 e(t-1 ...

  2. 基于OAuth 2.0的第三方认证 -戈多编程

    引用(http://www.cnblogs.com/artech/p/oauth-01.html) OAuth 2.0的角色 获得资源拥有者授权的第三方应用请求受保护的资源采用的不是授权者的凭证,所有 ...

  3. CS184.1X 计算机图形学导论 罗德里格斯公式推导

    罗德里格斯公式推导 图1(复制自wiki) 按照教程里,以图1为例子,设k为旋转轴,v为原始向量. v以k为旋转轴旋转,旋转角度为θ,旋转后的向量为vrot. 首先我们对v进行分解,分解成一个平行于k ...

  4. Python3实用编程技巧进阶 ☝☝☝

    Python3实用编程技巧进阶  ☝☝☝ 1.1.如何在列表中根据条件筛选数据 # 1.1.如何在列表中根据条件筛选数据 data = [-1, 2, 3, -4, 5] #筛选出data列表中大于等 ...

  5. Vue3都使用Proxy了,你更应该了解Proxy

    vue3.0的pre-alpha版代码已经开源了,就像作者之前放出的消息一样,其数据响应这一部分已经由ES6的Proxy来代替Object.defineProperty实现,感兴趣的同学可以看其实现源 ...

  6. PHP array_change_key_case

    (PHP 4 >= 4.2.0, PHP 5, PHP 7) 1.函数的作用 : 改变数组所有键值的大小写: 2.参数: 1)array : 应用的数组: 2)case  : 指定转换为大写或者 ...

  7. 【RabbitMQ 实战指南】一 死信队列

    1.死信队列 DLX,全称为 Dead-Letter-Exchange,可以称之为死信交换器.当消息在一个队列中变成死信(dead message)之后,它能被发送到另一个交换器中,这个交换器就是DL ...

  8. 关于Linux中的 localhost 默认地址简单介绍

    大家都知道localhost指的是本机的IP地址:127.0.0.1 用于回路测试,那能不能修改localhost呢,答案肯定是可以的 打开终端--->输入: vim /etc/host  然后 ...

  9. hadoop2.x的安装

    可以自己从官网编译打包也可以直接下载官网的.gz包.自己编译打包的过程如下: .查看是否安装cmake.svn.openssl.ncurses,没有的直接安装上 yum list|grep cmake ...

  10. CentOS6.6-MySQL报Curses library not found

    cmake . -DCMAKE_INSTALL_PREFIX=/application/mysql-5.6.40 \> -DMYSQL_DATADIR=/application/mysql-5. ...