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, ...
随机推荐
- AduSkin - UI
追求极致,永臻完美 A Beautiful WPF Control UI 一款简单漂亮的WPF UI,融合部分开源框架的组件,为个人定制的UI,可供学者参考. Nuget 搜索"AduSki ...
- java面试记录二：spring加载流程、springmvc请求流程、spring事务失效、synchronized和volatile、JMM和JVM模型、二分查找的实现、垃圾收集器、控制台顺序打印ABC的三种线程实现
注:部分答案引用网络文章 简答题 1.Spring项目启动后的加载流程 (1)使用spring框架的web项目,在tomcat下,是根据web.xml来启动的.web.xml中负责配置启动spring ...
- Common Subsequence POJ - 1458 最长公共子序列 线性DP
#include <iostream> #include <algorithm> #include <string> #include <cstring> ...
- Trie树相关博客
1. c++代码实现,包含删除操作:https://www.cnblogs.com/luxiaoxun/archive/2012/09/03/2668611.html 2. 一种典型实现及简单分析:h ...
- 2020 Plan
1. English IELTS 7.0 IELTS word 3271, 10 words diff 2 Grammar framework IELTS writing Friends foll ...
- thinkphp5出现mkdir() Permission denied报错解决办法
如果没有runtime目录,则需要手动创建一个,并且给runtime添加权限: mkdir runtime chmod -R 777 runtime 报错如下:
- [CF1216C] White Sheet - 离散化,模拟
虽然分类讨论应该是比较推崇的解法,但是我就是喜欢暴力 #include <bits/stdc++.h> using namespace std; #define int long long ...
- jsp中连接数据库及实现增删改查
导入jdbc工具包 <%@page import="asp.engine.util.PageHelper"%><%@ page import="asp. ...
- 论Mac与windows的STS下的路径问题
mac下的 <!-- javaBean生成在哪里 --> <javaModelGenerator targetPackage="com.atcrowdfunding.bea ...
- AcWing 278. 数字组合 求方案数目
//M看成背包容量,把每个数看成一个物品,Ai看成是体积 //目标:求总体积恰好为M的方案数目 #include <iostream> using namespace std; ; int ...