<!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. Django框架（五）—— 虚拟环境搭建

    目录 Django虚拟环境搭建 Django虚拟环境搭建 一.为什么要用虚拟环境 公司以前开发的项目是在Django1.5的基础上开发的,先要需要基于Django2.0开发一套项目.这样不能卸载原有版 ...

  2. $router和$route的区别，路由跳转方式name 、 path 和传参方式params 、query的区别

    一.$router和$route的区别 $router : 是路由操作对象,只写对象$route : 路由信息对象,只读对象 例子://$router操作 路由跳转 this.$router.push ...

  3. 借用数组对象的prototype给数组扩充降维方法

    原理:只要是一个对象,他都有一个prototype原型对象,保存共有的属性和方法. <!DOCTYPE html> <html lang="en"> < ...

  4. 压缩与解压缩 gzip bzip2 tar 命令

    gzip压缩与解压缩 命令  gzip -v   解压缩 gzip-d 操作如下. 压缩 .可以看到源文件有5171大小,压缩后,变成了1998大小. 解压缩 .解压缩之后可以看到,原来的man_db ...

  5. vue组件基础之父子传值

    可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...

  6. filter的使用场景

    1.filter的使用场景:假如有一个对象数组A,获取数组中的指定类型的对象放到B数组中 我们在ES5先进行for循环遍历数组,再进行if 判断,如果数组中某个对象的类型符合要求,push 到一个新数 ...

  7. 快速失败and安全失败

    快速失败: 举个栗子: public static void main(String[] args) { ArrayList<String> list=new ArrayList<& ...

  8. 关于canvas绘制图像模糊问题

    前段时间在做项目的裁剪并上传图像功能的时候,发现裁剪后展示的图像比较模糊,之后去百度上搜索了一下,看到有一个解决方案是设置canvas的宽高为css宽高的3倍,使用后感觉效果很好,当时就没管原理接着做 ...

  9. HIVE的安装步骤及遇到的问题及解决方法

    一.root 用户 解压安装包 二 chown -R hadoop:hadoop apache-hive-1.2.2-bin/          chmod -R 755  apache-hive-1 ...

  10. shell 脚本定制与重定向

    脚本定制 . 或者 source: 读取文本文件并执行(在当前shell解释并执行) source ./ld 总用量 8 -rw-------. 1 root root 1223 10月 2 21:1 ...