<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta name="keywords" content="" />

    <meta name="description" content="" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title></title>

    <style>

        * { padding: 0; margin: 0; }

        div { height: 400px; border: 2px solid #000; width: 600px; margin: 0 auto; overflow: hidden; position: relative; }

        ul { position: absolute; top: 0; left: 0; }

        li { height: 100px; border: 1px solid red; width: 600px; list-style: none; }

    </style>

</head>

<body>

    <div>

        <ul>

            <li>111</li>

            <li>222</li>

            <li>333</li>

            <li>444</li>

            <li>555</li>

            <li>666</li>

        </ul>

    </div>

    <script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>

    <script>

        (function ($) {

            var targetTop = 100;

            var targetTimer = 2000;

            function scroll() {

                var currentTop = Math.abs($("ul").position().top);

                var duration = (targetTop - currentTop) * targetTimer / targetTop;

                var li = $("ul").find("li:first");

                $("ul").animate({ "top": -targetTop }, duration, "linear", function () {

                    console.log("x")

                    $("ul").append(li).css("top", 0);

                    scroll();

                });

            }

            scroll();

            $("ul").mouseover(function () {

                $(this).stop();

            }).mouseout(function () {

                scroll();

            });

        })(jQuery)

    </script>

</body>

</html>

　　

jQuery实现Marquee的更多相关文章

  1. HTML Jquery；marquee标签

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  2. 文字滚动效果，jquery和marquee标签

    链接:https://pan.baidu.com/s/1pMwHYH1 密码:r9ys marquee标签是微软创建的,后来大部分浏览器都适用后,微软在IE8把这个标签去掉了.为符合W3C规范,还是使 ...

  3. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  4. jQuery插件开发之boxScroll与marquee

    BoxScroll 常见图片轮播效果的简单实现.可以数字列表控制或者左右按键控制.逻辑很简单,下面的Marquee形成环,这个到了尽头得往回跑,看看注释就知道了. 图片轮播GitHub:https:/ ...

  5. 一个文字无缝滚动的jQuery插件

    直接上代码吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  6. jQuery kxbdMarquee 无缝滚动

    转:http://code.ciaoca.com/jquery/kxbdmarquee/ <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 ...

  7. jquery实现轮播插件

    这几天用jquery写了两个轮播的插件,功能很简单.第一次尝试写插件,有很多不足的地方,代码如下: 注:图片链接请替换掉,配置信息必须加上图片width和height. <!DOCTYPE ht ...

  8. 滚动效果marquee的用户体验不好，很少被用到，一般用jquery替代

    滚动效果marquee的用户体验不好,很少被用到,一般用jquery替代

  9. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

随机推荐

  1. multiple definition of XXX情况分析

    近日在写代码,各个.cpp源文件编译时没有问题,将*.o进行链接时,出现了许多multiple definition of XXX的链接错误.于是在网上搜索了一番,结合自己的代码包含逻辑,最终发现了问 ...

  2. python之常量和变量

    局部和全局变量: # name='lhf' # def change_name(): # # global name # name='帅了一比' # print('change_name',name) ...

  3. GoldenGate 12.3 MA架构介绍系列(3) - 各功能模块介绍

    在新版的ogg 12.3 microservice architect中,提供了4个不同的服务模块和命令行模块. Admin Server: 负责连接用户.trandata, checkpoint的添 ...

  4. The Little Prince-12/01

    The Little Prince-12/01 The people have no imagination. They repeat whatever one says to them… On my ...

  5. C调用java JNI_CreateJavaVM只能调用成功一次

    https://bbs.csdn.net/topics/392264971 再使用c语言调用java代码的时候,选择使用JNI,根据网上的提示已经能够正常跑了,int mask_name( char* ...

  6. python协程之动态添加任务

    https://blog.csdn.net/qq_29349715/article/details/79730786 python协程只能运行在事件循环中,但是一旦事件循环运行,又会阻塞当前任务.所以 ...

  7. django 函数装饰器 变为 类装饰器

    aaa  

  8. hibernate validator自定义校验注解以及基于服务（服务组）的校验

    hibernate validator是Bean Validation 1.1 (JSR 349) Reference Implementation,其广泛的应用在mvc的参数校验中,尤其是使用服务端 ...

  9. oracle_sqlplus命令行乱码问题解决

    在linux以及unix中,sqlplus的上下左右.回退无法使用,会出现乱码情况. 而rlwrap这个软件就是用来解决这个的. 首先下载rlwrap包:https://linux.linuxidc. ...

  10. mint-ui之datetime-picker使用

    一基本使用<template> <mt-datetime-picker ref="picker" type="time" v-model=&q ...