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, ...
随机推荐
- C#索引器学习笔记
本笔记摘抄自:https://www.cnblogs.com/ArmyShen/archive/2012/08/27/2659405.html,记录一下学习过程以备后续查用. 索引器允许类或者结构的实 ...
- LeetCodeTwo Sum IV 树的遍历+Hash大法好
题意 给定一颗二叉搜索树,返回是否存在两个节点的值之和为给定值K. 思路 同Two Sum.使用Hash表解决.只是要写个树的遍历而已,选取DFS. 源码 class Solution { publi ...
- ctf-ping命令执行绕过
题目连接:http://ctf.klmyssn.com/challenges#Ping 命令执行绕过,试了试过滤了一些:一些命令 但是反引号可以执行命令 通过拼接,可以拼接出来:ls 命令 127.0 ...
- 数据预处理 | python 第三方库 imblearn 处理样本分布不均衡问题
说明:目前 只记录了 过采样 和 欠采样 的代码部分 1 样本分布不均衡描述: 主要出现在与分类相关的建模问题上,不均衡指的是不同类别的样本量差异非常大. 样本量差距过大会影响到建模结果 2 出现的场 ...
- LaTeX技巧007：每一章开始的header引用名言应该怎么做？
[问题描述] 看到很多论文的每一章开始的右上角都有一段名人名言, 我试验了很多次一直都搞不清楚是怎么搞?是用fancyhead么?谁可以说说呢? 多谢了 [解决方案] 使用epigraph宏包来制作即 ...
- linux 安装 Django14
一.实际安装过程(只操作这一步就可以安装) ## 下载并安装 rpm -ivh http://cbs.centos.org/kojifiles/packages/Django14/1.4.20/1.e ...
- 最长公共子串(LCS) lg SP1811
后缀自动机的一大用处就是求最长公共子串了 这道题的话题意就是给你两个字符串,求最长公共子串 做法的话是先使用一个字符串建立SAM,然后让另一个串在上面进行匹配 匹配的策略是优先匹配当前节点的下一个字符 ...
- webpack之 plugin（插件）
plugin plugin是插件的意思,通常用来对某个现有的架构就行拓展 webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等 loader和plugin区别 lo ...
- 高通量计算框架HTCondor(六)——拾遗
目录 1. 正文 1.1. 一些问题 1.2. 使用建议 2. 相关 1. 正文 1.1. 一些问题 如果真正要将HTCondor高通量计算产品化还需要很多工作要做,HTCondor并没有GUI界面, ...
- numpy Array[:,]的取值方法