<!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. Jersey入门——注解的使用

    本文主要解释Jersey中各种注解的使用 package com.coshaho.learn.jersey; import java.net.URI; import javax.ws.rs.Consu ...

  2. python 内置函数format

    Python2.6 开始,新增了一种格式化字符串的函数 str.format(),它增强了字符串格式化的功能. 基本语法是通过 {} 和 : 来代替以前的 % . format 函数可以接受不限个参数 ...

  3. System.getSecurityManager()

    https://www.cnblogs.com/yiwangzhibujian/p/6207212.html java安全管理器SecurityManager入门   一.文章的目的 这是一篇对Jav ...

  4. JustOj 1974: 简单的事情 （组合数）

    题目描述 数学天才fans曾经说过一句话:组合数的计算是一件非常简单的事情.组合数的计算真的是一件非常简单的事情吗?请你自己去尝试一下吧! 输入 输入中的一些整数对n,m(m≤n≤20) 输出 输出其 ...

  5. 清明　DAY２

    数论 数论是研究整数性质的东西 也就是 lim   π(x)=x/ ln x (x->无穷) 证明: ∵ p|ab ∴ ab有因子p 设 a=p1k1p2k2......prkr      b= ...

  6. linux学习---ps、kill

    一.ps       查看进程 ps 为我们提供了进程的一次性的查看,它所提供的查看结果并不动态连续的:如果想对进程时间监控,应该用 top 工具 linux上进程有5种状态: 1. 运行(正在运行或 ...

  7. weblogic11,linux字符页面安装

    1.  安装前 1  确定weblogic版本被认证 首先请确认您要安装的Weblogic版本所在的平台已通过了BEA的认证,完整的认证平台列表请参考http://e-docs.bea.com/wls ...

  8. 使用准现网的数据，使用本地的样式脚本，本地调试准现网页面（PC适用）

    原理: 本地逻辑,重新渲染 步骤: 1.安装插件:Tampermonkey 度盘:https://pan.baidu.com/s/1bpBVVT9 2.设置: 点击插件-->仪表盘 添加脚本 将 ...

  9. PHP中array_map与array_column之间的关系分析

    array_map()与array_column()用法如下: array_map();将回调函数作用到给定数组的单元上array_column();快速实现:将二维数组转为一维数组 array_co ...

  10. Golang闭包入门了解

    概念闭包就是一个函数与其相关的引用环境组成的一个整体.闭包本质其实是一个函数,但是这个函数会用到函数外的变量,它们共同组成的整体我们叫做闭包. 简单举例说明 package main import ( ...