<!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. 注释类型 XmlType

    @Retention(value=RUNTIME) @Target(value=TYPE) public @interface XmlType 将类或枚举类型映射到 XML 模式类型. 用法 @Xml ...

  2. 解压lzma格式的img文件报“Filename has an unknown suffix, skipping”怎么办

    1 确认img文件是什么压缩格式 file 文件名 2 报标题错误怎么办? mv initrd.img initrd.img.xz xz -d initrd.img.xz cpio -ivd < ...

  3. 在vue中使用高德地图开发，以及AMap的引入？

    百度引入BMap ,一个import 即可,可AMap 却报AMap is not difined ? 1.首先在 externals: { "BMap": "BMap& ...

  4. jeecg问题汇总

    (1)使用代码生成器后记得修改spring扫描配置路径entity,dao,control control在jeecg\src\main\resources\spring-mvc.xml中配置 ent ...

  5. wordpress Warning: Parameter 2 to qtranxf_postsFilter() expected to be a reference

    wordpress qtranslate-x Warning: Parameter 2 to qtranxf_postsFilter() expected to be a reference Para ...

  6. Openssl命令的使用

    用途: pkcs8格式的私钥转换工具.它处理在PKCS#8格式中的私钥文件.它可以用多样的PKCS#5 (v1.5 and v2.0)和 PKCS#12算法来处理没有解密的PKCS#8 Private ...

  7. delphi 不规则窗体与桌面宠物

    二.支持区域操作的编程接口在Windows的API函数中有一组用于区域操作的函数,可以用来生成区域.合并区域.获取区域数据.根据数据生成区域.把区域和窗体联系等,其中常用的几个函数有:生成矩形区域的C ...

  8. 在Panel上绘图的实现

    近期制作了FDS的一个建模工具,由于知识有限,做出的效果是2D的.昨天上课的时候看老师画一个长方体,突然想到,为什么不给普通的2D图形加画上几条直线,就能实现2D图形的3D视觉效果呢?于是回来马上做了 ...

  9. 修改ActiveProcessLinks链表隐藏进程

    在Windows内核中有一个活动进程链表AcvtivePeorecssList.它是一个双向链表,保存着系统中所有进程的EPROCESS结构.特别地,进程的EPROCESS结构包含一个具有指针成员FL ...

  10. JQuery validate验证规则

    //定义中文消息 var cnmsg = { required: “必选字段”, remote: “请修正该字段”, email: “请输入正确格式的电子邮件”, url: “请输入合法的网址”, d ...