js实现文字上下滚动
<!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实现文字上下滚动的更多相关文章
- js实现文字上下滚动效果
大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...
- js 实现文字列表滚动效果
今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...
- js标题文字向上滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- js实现文字横向滚动
页面布局 <div id="scroll_div" class="fl"> <div id="scroll ...
- js实现文字字幕滚动
<div class="dggd_r" id="h" style="height:400px;overflow:hidden;display:i ...
- 利用js来实现文字的滚动（也就是我们常常见到的新闻版块中的公示公告）
首先先看一下大致效果图(因为是动态的,在页面无法显示出来) 具体的实现代码如下: 1.首先是css代码: <style type="text/css"> body,ul ...
- js文字向上滚动代码
js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px; background:#edfafd; padding-top:2px; ...
- js 实现文字滚动功能，可更改配置参数 带完整版解析代码。
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...
- js 实现单行文本滚动效果
js 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, ...
随机推荐
- html中引入调用另一个html文件
第一种: <body> <div id="page1"></div> <div id="page2"></ ...
- CentOS 7在执行yum操作时 报错
CentOS 7在执行yum操作时, 报错:Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=6&arch ...
- Java如何自定义注解
本文主要是记录所学,以供后续参考.注解是Java 1.5引入的,Java自定义注解是通过运行时靠反射获取注解,注解相当于是一种嵌入在程序中的元数据,可以使用注解解析工具或编译器对其进行解析,也可以指定 ...
- python开发第四篇：函数（1）
函数 阅读目录 一 函数知识体系 二 函数基础 三 函数对象.函数嵌套.名称空间与作用域.装饰器 四 迭代器.生成器.面向过程编程 五 三元表达式.列表推导式.生成器表达式.递归.匿名函数.内置函数 ...
- 51Nod 1344 走格子 （贪心）
有编号1-n的n个格子,机器人从1号格子顺序向后走,一直走到n号格子,并需要从n号格子走出去.机器人有一个初始能量,每个格子对应一个整数A[i],表示这个格子的能量值.如果A[i] > 0,机器 ...
- nginx 部署php项目 404
服务器重启了一下 然后访问程序报错404的情况 文件存在位置没有问题 niginx配置根目录没有问题 最后检查到端口的时候发现php-fpm的9000端口未打开 service php-fpm res ...
- python基础数据类型整理
一.数据类型 (一).小技巧 1.PyCharm:选中多行,按"Ctrl+/"可批量注释掉 (二).字符串 1.startswith(str,[,start][,end]) #判断 ...
- ASP.NET Identity系列教程-1目录
https://www.cnblogs.com/hao-1234-1234/p/8857437.html ASP.NET Identity系列教程 13 Getting Started with Id ...
- D0 设计模式
单一职责 一个类只负责一个功能领域中的相应职责.,就一个类而言,应该只有一个引起它变化的原因. 单一职责原则告诉我们: 一个类不能太"累"! 在软件系统中, 一个类( 大到模块, ...
- echart --toolbox
1.自定义的toolbox 消息回调 toolbox: { show: true, itemSize: 32, borderColor: '#0cb1b6', borderWidth: 1, bord ...