<!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. Windows 性能监视器的基本指标（CPU,内存,硬盘参数）

    转载:http://kms.lenovots.com/kb/article.php?id=7045 Windows 性能监视器的基本指标(CPU,内存,硬盘参数) 作为一个系统工程师来说,要看懂监控的 ...

  2. VSCode常用插件之open in browser使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 open in browser安装完这个插件就可以在编辑器菜单右键html,在默认浏览器打开了,高级使用暂未了解,请自行其它文章学习

  3. MongoDB，使用C#实现2d地理位置检索

    这两天在研究mongoDB,从零开始接触它,为什么要研究它呢,因为它支持2d地图索引,而且速度非常快,可以用它来做类似微信的(摇一摇功能),不过网上很难搜到.net操作的,而且就算搜索到了也不能用,也 ...

  4. Mono提供脚本机制（C#绑定C++）

    1.下载安装最新版mono,https://www.mono-project.com/ 2.添加头文件路径C:\Program Files\Mono\include\mono-2.0,添加库路径C:\ ...

  5. 用C#调用外部DLL

    1.有时候需要用C#调用外部的dll,例如c++写的dll,首先需要保证dll的编译环境与本项目的环境是相同的,例如都是x86位或者x64位 2.调用声明和dll内的声明一致: function Te ...

  6. selenium爬去数据+存储

    1 爬去数据代码 #coding=utf-8 from selenium import webdriver from selenium.webdriver.common.by import By fr ...

  7. eclipse无法启动报错、打开Eclipse报错、Eclipse无法打开

    有时候在新的电脑中安装Eclipse的时候总会报一些错误,要么就是环境变量没配好.要么就是JDK没装.要么就是JDK位数与Eclipse位数不同(版本),反正会报一些奇奇怪怪恶心的问题,我第一次装的时 ...

  8. Java流，文件和I/O

    java.io包中包含几乎所有可能永远需要在Java中执行输入和输出(I/ O)类.所有这些数据流代表一个输入源和输出目标. java.io包中的流支持多种数据,如基本类型,对象,本地化的字符等 流可 ...

  9. Oracle Data Guard搭建 1.虚拟机安装linux

    1.安装虚拟机 VMware 14 2.下载Linux镜像文件,创建虚拟机

  10. linux异常 - unzip: 未找到命令

    问题描述 unzip: Command Not Found 或 zip: Command Not Found 或unzip: 未找到命令 解决方法 如果是Ubuntu的的系统可以用下面的命令安装:su ...