<!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. ECMAScript基本对象——Boolean对象

    1.创建 var myBoolean=new Boolean(); 2.方法 toString()把布尔值转换为字符串,并返回结果 valueOf()返回 Boolean 对象的原始值. 3.属性 1 ...

  2. LED Mood Light Factory-Smart Mood Light: Control System Principle

    Intelligent devices have become more and more widespread in our lives. Intelligent scene lights are ...

  3. @HystrixCommand 不能被导包

    添加pom文件 <dependency>  <groupId>com.netflix.hystrix</groupId>  <artifactId>hy ...

  4. Docker镜像加速-配置阿里云镜像仓库

    Docker默认远程仓库是https://hub.docker.com/ 比如我们下载一个大点的东西,龟速 由于是国外主机,类似Maven仓库,慢得一腿,经常延迟,破损: 所以我们一般都是配置国内镜像 ...

  5. B站学习记：贪心与博弈

    贪心 1. poj2287 N匹马的田忌赛马问题 稳稳地赢. 寻找最优的方案. 更优的收益. 有时候,局部最优导致全局最优. 马的能力值. 使得让我赢的局数最多. 对于对方的任何一匹马,如果我的马能打 ...

  6. Selenium自动化发送163邮箱

    自动化发送163邮件 方法一: import time import datetime from selenium import webdriver from selenium.webdriver.s ...

  7. No module named ‘sklearn.model_selection解决办法

    在python中运行导入以下模块 from sklearn.model_selection import train_test_split 出现错误:  No module named ‘sklear ...

  8. 洛谷P1042 乒乓球

    https://www.luogu.org/problem/P1042 #include<bits/stdc++.h> using namespace std; ]; int w,l; i ...

  9. Ubuntu切换默认sh为bash或者dash

    Ubuntu切换默认sh为bash或者dash   1 bash与dash 从Ubuntu 6.10开始,默认使用dash(theDebian Almquist Shell)而不是bash(the G ...

  10. shiro认证和授权

    一.shiro基础概念 Authentication:身份认证 / 登录,验证用户是不是拥有相应的身份: Authorization:授权,即权限验证,验证某个已认证的用户是否拥有某个权限:即判断用户 ...