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, ...
随机推荐
- threadpool 实例介绍第二篇
- 精简Command版SqlHelper
我在写CSharp程序对数据库进行操作时发现Connection对象起到了连接数据库的做用,实际执行SQL语句使用的是Command对象的方法,所以对SqlHelper进行了重写,具体如下: 一.创建 ...
- 最大流算法之Ford-Fulkerson算法与Edmonds–Karp算法
引子 曾经很多次看过最大流的模板,基础概念什么的也看了很多遍.也曾经用过强者同学的板子,然而却一直不会网络流.虽然曾经尝试过写,然而即使最简单的一种算法也没有写成功过,然后对着强者大神的代码一点一点的 ...
- java - GC垃圾收集器详解（二）
CMS收集器 CMS收集器(ConcurrentMarkSweep:并发标记清除)是一种以获取最短回收停顿时间为目标的收集器. 适合应用在互联网站或者B/S系统的服务器上,这类应用尤其重视服务器的响应 ...
- java性能分析 - CPU飙高分析工具
背景 有处理过生产问题的同学基本都能遇到系统忽然缓慢,CPU突然飙升,甚至整个应用请求不可用.当出现这种情况下,在不影响数据准确性的前提下,我们应该尽快导出jstack和内存信息,然后 ...
- C++-POJ1502-MPI Maelstrom-[最短路][spfa][栈优化]
我不理解为什么写dijkska就WA呢? atoi()是个好东西,给你个颜色,自己体会 疑惑!疑惑!疑惑! #include <queue> #include <cstdio> ...
- Max Sum Plus Plus HDU - 1024 基础dp 二维变一维的过程，有点难想
/* dp[i][j]=max(dp[i][j-1]+a[j],max(dp[i-1][k])+a[j]) (0<k<j) dp[i][j-1]+a[j]表示的是前j-1分成i组,第j个必 ...
- [USACO09JAN]Total Flow【网络流】
Farmer John always wants his cows to have enough water and thus has made a map of the N (1 <= N & ...
- git保存仓库的账号密码
1.执行保存账号命令 # 保存本地仓库的账号git config --local credential.helper store # 保存git全局账号git config --global cred ...
- JavaScript 闭包浅析
词法作用域 闭包 概念 作用 用法 待续 词法作用域 词法作用域是指一个变量在源码中声明的位置作为它的作用域.同时嵌套的函数可以访问到其外层作用域中声明的变量. 函数中的定义的局部变量只能由函数的内部 ...