js实现列表从下往上循环滚动
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实现列表从下往上循环滚动的更多相关文章
- jquery实现文字由下到上循环滚动的实例代码
<div id="oDiv"> <ul id="oUl"> <li>第1个li元素</li> <li> ...
- JS列表的下拉菜单组件(仿美化控件select)
JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...
- mui实现列表的下拉刷新上拉加载
1.引入mui控件的js文件和css样式文件 <link rel="stylesheet" href="css/mui.min.css"> < ...
- 记录下vue keep-alive IOS下无法保存滚动scroll位置的问题
最近 做的项目,遇到了一点小麻烦,就是我一个页面A页面是加载 列表数据 ,B页面是展示详细信息的.A进去B时,缓存A页面. 效果 做出来 后,缓存是缓存数据 了,但是当我A页面的列表数据 好多,要滚动 ...
- 关于移动端弹层下的body滚动
关于移动端弹层下的body滚动 这个问题在移动端挺常见的,网上也有一些解决方法,现在笔者来总结一下:css的解决方案都有兼容问题,js是比较稳定的解决方法(虽然比较麻烦) ps: 本文的例子都是用vu ...
- js获取键盘按下的键值event.keyCode,event.charCode,event.which的兼容性
js获取键盘按下的键值有event.keyCode,event.charCode和event.which 其中: 谷歌浏览器对event.keyCode,event.charCode和event.wh ...
- js实现图片向上播放(轮番滚动)
js实现图片向上播放(轮番滚动) 实现方式,多种多样,这里我们来看javascript实现方式,重点是研究里面的源代码: 看看别人是如何写出“优雅的代码” <!DOCTYPE html PUBL ...
- JavaScript判断鼠标滑轮是向下还是向上滚动
我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...
- WP8_GestureListener实现列表向下滑动加载新数据
利用GestureListener的OnDragCompleted事件,实现列表向下滑动时,加载新的数据: (不建议使用 Touch.FrameReported+=Touch_FrameReporte ...
随机推荐
- Python 爬虫(四):Selenium 框架
Selenium 是一个用于测试 Web 应用程序的框架,该框架测试直接在浏览器中运行,就像真实用户操作一样.它支持多种平台:Windows.Linux.Mac,支持多种语言:Python.Perl. ...
- request.getAttribute()和request.getParameter()
request.getParameter()取得是通过容器的实现来取得通过类似post,get等方式传入的数据,request.setAttribute()和getAttribute()只是在web容 ...
- selenium+testNG自动化测试框架搭建
自动化测试框架搭建 1 Java环境的搭建 1.1访问oracle的官网下载最新版本的jdk http://www.oracle.com/technetwork/java/javase/downloa ...
- 02-14 scikit-learn库之逻辑回归
目录 scikit-learn库之逻辑回归 一.LogisticRegression 1.1 使用场景 1.2 代码 1.3 参数详解 1.4 属性 1.5 方法 二.LogisticRegressi ...
- Stock Charts
Description You're in the middle of writing your newspaper's end-of-year economics summary, and you' ...
- bugku 成绩单
看起来像是SQL注入,先来试试. 输入1,2,3显示的是三个人成绩. 来试试是否存在注入. 输入1,正常.输入1' 错误.输入1’#正常,说明存在注入点. 首先来看下有几列从1开始试,1’ order ...
- HikariCP重要参数配置
概述 HikariCP是Spring Framework 5.0的默认数据库连接池,这得益于他的高性能.但是如果配置不当,数据库连接池也可能因影响到系统性能. 重要参数 maximum-pool-si ...
- 『嗨威说』算法设计与分析 - PTA 数字三角形 / 最大子段和 / 编辑距离问题(第三章上机实践报告)
本文索引目录: 一.PTA实验报告题1 : 数字三角形 1.1 实践题目 1.2 问题描述 1.3 算法描述 1.4 算法时间及空间复杂度分析 二.PTA实验报告题2 : 最大子段和 2.1 实践题目 ...
- Vue中插槽指令
08.29自我总结 Vue中插槽指令 意义 就是在组件里留着差值方便后续组件内容新增 而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量 示例 <div id ...
- Roadmap of FE
未完待补充......