<!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. DFS-C - N皇后问题

    C - N皇后问题 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上.你的任务是,对于给定的N,求出有多少种合法的放 ...

  2. ELK学习实验015：日志的自定义index配置

    前面使用json格式收集了nginx的日志,但是再index的显示是filebeat-*,现在使用自定义的index进行配置 但是再使用filebeat的7.4版本以后,有一个巨坑,就是按照网络的很多 ...

  3. R语言函数化编程笔记1

    R语言函数化编程笔记1 notes:有一个不错的网站叫做stack overflow,有问题可以从上面找或者搜索答案,会有大佬相助. 在github上面可以找到很多R的扩展包,如果自己额修改被接受,那 ...

  4. java打印出某一指定路径下的文件夹内的所有子文件夹和文件，并区分开来

    public class printoutFile { public static void main(String[] args) { printFile(new File("D:\\te ...

  5. Codeforces Round #617 (Div. 3) 题解

    又是隔了一年才来补题的我 A.B水题就不用说了 C - Yet Another Walking Robot C题我居然卡了一会,最后决定用map水,结果出来看了看题解,居然真的是map...没想到会出 ...

  6. Nginx 配置Websocket

    Nginx反向代理配置websocket nginx.org 官网推荐如下的配置,也可以直接看官网:http://nginx.org/en/docs/http/websocket.html http ...

  7. shell登录 脚本 expect

    作用 工作中,我们运行命令.脚本或程序时,这些命令.脚本或程序都需要从终端输入某些继续运行的指令,而这些输入都需要人为的手工进行. 利用expect,则可以根据程序的提示,模拟标准输入提供给程序,从而 ...

  8. js 获取项目名称

    //获取项目名称function getWebName(){ var pathName = window.location.pathname.substring(1); var webName = p ...

  9. 数据从mmsql导入mysql

    SQL SERVER数据导入MYSQL 工具: navicat for mysql 百度搜一个安装就可以,前提是你已经安装了mysql 1,创建目标数据库 点击创建好的目标数据库website点的表一 ...

  10. python之pandas简介

    一. Pandas简介 1.Python Data Analysis Library 或 pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的.Pandas 纳入了大量库和 ...