<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.renav{
width:200px;
height:150px;
overflow:hidden;
}
.renav li{
height:21px;
border-bottom:solid 1px blue;
list-style-type:none;
}
</style>
<body>
<div class="renav">
<ul>
<li><a>罗氏</a></li>
<li><a>瑞声达</a></li>
<li><a>未添加1</a></li>
<li><a>未添加2</a></li>
<li><a>未添加3</a></li>
<li><a>未添加4</a></li>
<li><a>西门子</a></li>
<li><a>欧姆龙</a></li>
</ul>
</div>
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(function(){
var $this = $(".renav");
var scrollTimer;
$this.hover(function(){
clearInterval(scrollTimer);
},function(){
scrollTimer = setInterval(function(){
scrollNews( $this );
}, 2000 );
}).trigger("mouseout");
});
function scrollNews(obj){
var $self = obj.find("ul:first");
var lineHeight = $self.find("li:first").height();
$self.animate({ "margin-top" : -lineHeight +"px" },600 , function(){
$self.css({"margin-top":"0px"}).find("li:first").appendTo($self);
})
}
</script>
</body>
</html>

jquery无缝向上滚动实现代的更多相关文章

  1. jquery插件之文字无缝向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...

  2. 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...

  3. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  4. 原生js实现文字无缝向上滚动效果

    在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...

  5. vue文字间歇无缝向上滚动

    公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...

  6. jquery 文字向上滚动+CSS伪类before和after的应用

    汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...

  7. js实现文字列表无缝向上滚动

    body{font-size:12px} #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:rel ...

  8. 提示消息无缝向上滚动（vue）

    <div class="order-tips__message-item" :class="getClass(index)" v-for="(o ...

  9. jquery插件之文字间歇自动向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...

随机推荐

  1. MySql 主从复制及深入了解

    分享一个不错的mysql文章 https://segmentfault.com/a/1190000008942618

  2. qt5.9.1 VS2017 qalgorithms.h

    qt5.9.1只有VS2017 64位支持, 在32位工程下会出现关于qalgorithms.h的错误,参考以下内容修改该头文件解决: https://codereview.qt-project.or ...

  3. JS切换

    这个效果就跟换肤效果差不多 需要准备两套或两套以上的css <!DOCTYPE html> <html lang="en"> <head> &l ...

  4. pandas-索引

    一.按列取.按索引/行取.按特定行取 import numpy as np from pandas import DataFrame import pandas as pd df=DataFrame( ...

  5. vue 学习二 深入vue双向绑定原理

    vue双向绑定原理 请示总体来讲 就是为data的中的每个属性字段添加一个getter/seter属性 以此来追踪数据的变化,而执行这部操作,依赖的就是js的Object.defineProperty ...

  6. spark运行任务报错：Container [...] is running beyond physical memory limits. Current usage: 3.0 GB of 3 GB physical memory used; 5.0 GB of 6.3 GB virtual memory used. Killing container.

    spark版本:1.6.0 scala版本:2.10 报错日志: Application application_1562341921664_2123 failed 2 times due to AM ...

  7. dubbo入门之服务消费

    今天,我们来看看dubbo消费的执行过程 首先,我们都知道dubbo是一个基于netty实现的RPC框架,底层通信是使用netty来实现的.在学习dubbo的时候,或许我们都会有下面的这些疑惑: 1. ...

  8. leetcood学习笔记-501- 二叉搜索树中的众数

    题目描述: 方法一: class Solution: def findMode(self, root: TreeNode) -> List[int]: if not root: return [ ...

  9. 如何打造7*24h持续交付通道？阿里高级技术专家的5点思考

    我们对于研发效能的讨论,本质上是提高整个技术生态中的协同效率.如果仅从研发角度出发,技术团队要实现的终极目标是7*24小时的灵活发布窗口,以及更快的业务迭代能力. 7*24小时发布窗口的实现其实并不简 ...

  10. android高级篇收录

    Android运行时性能优化 1.android启动优化 支付宝客户端架构解析:Android 客户端启动速度优化之「垃圾回收」 支付宝 App 构建优化解析:通过安装包重排布优化 Android 端 ...