<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js实现问题滚动</title>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>

<style>

    *{

        padding:0;

        margin: 0;

    }

    ul,li{

        list-style: none;

    }

    .box{

        width: 300px;

        height: 20px;

        overflow: hidden;

        background-color: black;

        position: relative;

    }

    .box .list{

        width: 300px;

        height: auto;

        position: absolute;

    }

    .box .list  li{

        width: 300px;

        height: 20px;

        line-height: 20px;

        color: red;

        font-size: 16px;

        text-overflow: ellipsis;

        white-space: nowrap;

        overflow: hidden;

    }

    .box2{

        width: 600px;

        height:20px;

        text-overflow: ellipsis;

        white-space: nowrap;

        overflow: hidden;

    }

</style>

<body>

    <div class="box">

        <ul class="list" data="0">

            <li>这期老板很实在呀，另外应该锅底或者别的什么费用，我还点了一些收费的东西，所以老板不会亏的(⌒▽⌒)</li>

            <li>《AKB少女90天的挑战》第七期正式上线！魏新回上海参加拍摄工作，瑞希迎来了难得的休假日，她们分别度过了怎样的一天呢？</li>

            <li>感冒没好利索，再加上“服务员”临时有事，直播顺延至明天，万请见谅</li>

        </ul>

    </div>

    <div class="box2">

        <div class="font">《AKB少女90天的挑战》第七期正式上线！魏新回上海参加拍摄工作，瑞希迎来了难得的休假日，她们分别度过了怎样的一天呢？</div>

    </div>

    <script>

        $(function(){

            setInterval("font_auto();",3000);

        });

        function font_auto(){

            var num = $(".box .list").attr("data");

            num ++ ;

            if(num > $(".box .list li").length-1){

                num = 0;

            }

            $(".box .list").attr("data",num);

            $('.box .list').animate({'top':-20*num});

        }

    </script>

</body>

</html>

js实现文字上下滚动的更多相关文章

  1. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  2. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

  3. js标题文字向上滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  4. js实现文字横向滚动

    页面布局      <div id="scroll_div" class="fl">         <div id="scroll ...

  5. js实现文字字幕滚动

    <div class="dggd_r" id="h" style="height:400px;overflow:hidden;display:i ...

  6. 利用js来实现文字的滚动（也就是我们常常见到的新闻版块中的公示公告）

    首先先看一下大致效果图(因为是动态的,在页面无法显示出来) 具体的实现代码如下: 1.首先是css代码: <style type="text/css"> body,ul ...

  7. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  8. js 实现文字滚动功能，可更改配置参数 带完整版解析代码。

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...

  9. js 实现单行文本滚动效果

    js 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, ...

随机推荐

  1. HBase Hive

    Hbase数据管理 Hbase就是Hadoop database Hbase是列式数据库 因此Hbase特别适合寻找按照时间排序寻找Top n的场景 Hive数据管理 基于 Hadoop 文件系统的数 ...

  2. JS将一个数组切分为多个数组

    function group(array, subGroupLength) { let index = 0; let newArray = []; while(index < array.len ...

  3. Ubuntu 18.04安装配置Apache Ant

    Ubuntu 18.04安装配置Apache Ant 文章目录 Ubuntu 18.04安装配置Apache Ant 下载 执行以下命令 `/etc/profile`中配置环境变量 载入配置 测试 执 ...

  4. ECMAScript基本语法——⑤运算符 void

    void阻止返回值的运算符,没有返回值

  5. 题解【洛谷P1896】[SCOI2005]互不侵犯

    题面 棋盘类状压 DP 经典题. 我们考虑设 \(dp_{i,j,s}\) 表示前 \(i\) 行已经摆了 \(j\) 个国王,且第 \(i\) 行国王摆放的状态为 \(s\) 的合法方案数. 转移的 ...

  6. 【手抖康复训练1 】Codeforces Global Round 6

    [手抖康复训练1 ]Codeforces Global Round 6 总结:不想复习随意打的一场,比赛开始就是熟悉的N分钟进不去时间,2333,太久没写题的后果就是:A 题手抖过不了样例 B题秒出思 ...

  7. 2020牛客寒假算法基础集训营1 J. 缪斯的影响力 （矩阵快速幂/费马小定理降幂）

    https://ac.nowcoder.com/acm/problem/200658 f(n) = f(n-1) * f(n-2) * ab ,f的第一项是x,第二项是y. 试着推出第三项是x·y·a ...

  8. php单例模式封装数据库操作类增删改查

    <?php//三私一公 单例class Db{ //数据库连接对象 private static $instance; private static $table_name; private $ ...

  9. Jmeter-基础实战

    一.测试需求:测试20个用户访问web网站在负载达到30QPS时的平均响应时间 QPS:Query Per Second 每秒查询率.是一台查询服务器每秒能够处理的查询次数.在因特网上,作为域名系统服 ...

  10. 微信小程序块导航

    1.wxml页面 <!--index.wxml--> <swiper current="{{currentTab}}" class="swiper-bo ...