<!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. HTML中列表中元素居中问题

    想让列表<table>中某一行元素居中的话,单纯使用<align  = 'center'>是达不到效果的,需要先将该行进行合并,使用colspan属性. <html> ...

  2. 第十五章 例行性工作(crontab)--循环执行的例行性工作调度 crontab（定时任务）

    循环执行的例行性工作调度 crontab(定时任务) 15.1 例行性工作调度 不考虑硬件与服务器的链接状态,Linux帮助提醒很多任务. Linux例行性工作是如何进行调度的? Linux调度就是通 ...

  3. Linux的各个发行版本（二）

    CentOS CentOS是世界上使用的最好的Linux服务器发行版之一,占了全世界Linux服务器的30%. 它是Red Hat 的衍生产品,提供了稳定的服务器环境. 特点: 支持的X86-64架构 ...

  4. dp思维

    题目传输门 题意:有n个房间,m个诅咒,每个房间有一个数值,刚开始有一个初始值,每次进入一个房间可以选择消除诅咒或者不消除,消除诅咒只能顺序消除,消除诅咒就是拿初始值和房间的数值做运算,求最后最大的数 ...

  5. 【转】elasticsearch中字段类型默认显示{ "foo": { "type": "text", "fields": { "keyword": {"type": "keyword", "ignore_above": 256} }

    官方原文链接:https://www.elastic.co/cn/blog/strings-are-dead-long-live-strings 转载原文连接:https://segmentfault ...

  6. undefined reference to `TTF_Init'

    如果编译时遇上 undefined reference to `FunctionName' 或是这种类似错误,首先就得检查是不是函数名拼写错误,如果不是,那估计是编译时候有些链接库没加进去 比如这篇上 ...

  7. android中的属性资源

    属性资源可以很好的控制自定义View组件的外观行为. 属性资源放置在/res/values目录下,属性资源文件的根目录元素是<resources.../>,该元素包含如下两个子元素: at ...

  8. The J2EE Architecture

  9. 使用Postman模拟HTTP请求

    使用Postman模拟HTTP请求 Postman是一款强大的前端调试工具,不管是开发人员还是测试人员都会需要调试接口程序,如RestAPI,此时可以通过向服务器发送不同的HTTP请求来判断接口返回结 ...

  10. 通过hint干掉笛卡尔积

    Z_ZZZZZZZZ_BENE 大约有400万数据 修改前   SELECT xxxx FROM ( SELECT DISTINCT FIELD1_CONTENT FROM xxxxxxxx_LOG@ ...