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. Flutter 的基本控件

    文本控件 Text 支持两种类型的文本展示,一个是默认的展示单一样式文本 Text,另一个是支持多种混合样式的富文本 Text.rich. 单一样式文本 Text 单一样式文本 Text 的初始化,是 ...

  2. GoLang 获取两个时间相差多少小时

    package main import ( "fmt" "time" ) func main() { fmt.Println(getHourDiffer(&qu ...

  3. ActiveMQ学习总结------原生实战操作(下)03

    本篇将继续延续上一篇的内容,作为知识补充篇,为接下来我们学习spring整合ActiveMQ打好基础 本篇主要学习内容: 1.ActiveMQ 队列服务监听 2.ActiveMQ Topic模型 回顾 ...

  4. MySQL 视图(合并多表数据)引发的严重性能问题

    问题背景: 一.客户环境连续多次出现性能问题,系统登入异常,数据库CPU告警. 处理过程: 1>协助排查数据库性能问题时发现如下两个较频繁的SQL导致严重的性能问题(均使用了视图合并多表数据): ...

  5. uniapp 用户拒绝授权再次调起授权-语音识别、微信地址、附近地址

    小程序重构,采用 uniapp 框架.记录一下踩过的坑.关于用户拒绝再次调起授权,及如何识别语音识别.微信地址.附近地址的处理. 语音识别 组件 语音识别,小程序只有录音功能,若要识别录音文件,常规做 ...

  6. Xadmin查询

    目录 深浅coopy运用 ModelForm的补充 提取模型当中相关属性 getattr和get_field的区别 __ str__,get_field,getattr初识 str ,当用getatt ...

  7. 微信退款(APP和公众号一样)

    /** * 将xml转为array * @param string $xml xml字符串 * @return array 转换得到的数组 */ public function xml2array($ ...

  8. 实体对象属性和值转为键值对Dictionary

    实体对象转为Dictionary键值对 /// <summary> /// 实体转键值对 /// </summary> /// <typeparam name=" ...

  9. nextjs:如何将静态资源发布到 CDN

    nextjs 是基于 react 的服务端同构指出框架,在使用的过程中也多多少少遇到过几个问题,其中最大的问题就是静态资源的发布了. 1. 如何基于文件内容进行 hash 命名 Next.js use ...

  10. unittest中diascover批量执行用例

    # case_dir='./'#当前脚本的路径 # discover=unittest.defaultTestLoader.discover(case_dir,pattern='unittest_fr ...