网页上的一些广告文字，一直会滚动是怎么做到的，今天给大家演示下，非常简单，源码如下（本案例是在.net平台上，但HTML是通用的）：

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8"><!--这个很重要，要加上-->

<title>荧光屏文字 滚动效果</title>

<style type="text/css">

#scrollobj{

  white-space:nowrap;

  overflow:hidden;

  width:200px;

  margin:50px;

  float:left;

}

</style>

<script type="text/javascript">

function scroll(obj){

  var tmp=(obj.scrollLeft)++;

  if(obj.scrollLeft==tmp){

    obj.innerHTML += obj.innerHTML;

  }

  if(obj.scrollLeft>=obj.firstChild.offsetWidth){

    obj.scrollLeft=;

  }

}

setInterval("scroll(document.getElementById('scrollobj'))",);//用来控制时间，数字越大则滚动越慢，数字越小滚动越快。

</script>

</head>

<body>

<div id="scrollobj">欢迎光临~</div>

</body>

</html>

演示效果如下，没有录制视频，自己按源码尝试下即可：

javascript小记四则：用JS写一个滚动横条文字，可以根据需要进行修改；的更多相关文章

  1. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  2. 前端与编译原理——用JS写一个JS解释器

    说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...

  3. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  4. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  5. 如何使用 js 写一个正常人看不懂的无聊代码

    如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...

  6. 用H5和js写一个移动端自定义播放器

    前言 由于html5自带的播放器样式不怎么好看,大多数人都是自己写一个来满足业务需求.这一次的需求如下: 1.不要上一曲下一曲 2.有进度条和播放暂停按钮 3.有时间显示 demo实现功能 1.进度条 ...

  7. 使用JS写一个计算器

    先上效果图: 简单的加减乘除功能还是有的,所以我们就考虑怎么来实现这个功能. 根据预期效果,可以确定页面中的布局要用到table tr td. 所以先放上页面布局,table的边框宽度border,c ...

  8. JS写一个列表跑马灯效果--基于touchslide.js

    先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...

  9. 【Part1】用JS写一个Blog（node + vue + mongoDB）

    学习JS也有一段时间了,准备试着写一个博客项目,前后端分离开发,后端用node只提供数据接口,前端用vue-cli脚手架搭建,路由也由前端控制,数据异步交互用vue的一个插件vue-resourse来 ...

随机推荐

  1. C# 在异步线程操作类的变量

    如下代码: public partial class Form1 : Form { public Form1() { InitializeComponent(); } public string Me ...

  2. 若干排序算法的Python实现方法及原理

    今天突然想到了一个问题:让你立即把堆排.快排等等排序算法写出来会不会,并且不能犯逻辑错误? 我说:不会,至少需要思考一下,并且可能还需要时间调试. 之前总是觉得,不就是排序算法吗?有什么大不了的?网上 ...

  3. SpringBoot之旅第三篇-日志

    一.前言 日志对于一个系统的重要性不言而喻,日志能帮我们快速定位线上问题,市场上存在非常多的日志框架,比较常见的有 JUL,JCL,Log4j,Log4j2,Logback.SLF4j.jboss-l ...

  4. asp.net core系列 47 Identity 自定义用户数据

    一.概述 接着上篇的WebAppIdentityDemo项目,将自定义用户数据添加到Identity DB,自定义扩展的用户数据类应继承IdentityUser类, 文件名为Areas / Ident ...

  5. 腾讯视频国际版（Android）电量测试方法研究与总结

    本文由云+社区发表 作者:腾讯移动品质中心TMQ 1.研究背景: 在2017年Google I/O大会上,Google发布了Google Play管理中心的新功能:Android vitals.当ap ...

  6. Spring Boot 2.X 如何快速集成单元测试？

    本文将详细介绍下使用Spring Boot 2.X 集成单元测试,对API(Controller)测试的过程. 一.实现原理 使用MockMvc发起请求,然后执行API中相应的代码,在执行的过程中使m ...

  7. RMAN优缺点及RMAN备份及恢复步骤

    RMAN优缺点及RMAN备份及恢复步骤--以下部分来自网络转摘,仅供参考和OS命令备份方式相比,使用RMAN的优点1 备份执行期间不需要人工干预,因此减少了误操作的机会:2 可以有效的将备份和恢复结合 ...

  8. ipv6地址配置实验（GNS3/ENSP）

    实验拓扑: IPV6地址配置如图所示, 配置ipv6指令(以R2为例,R1类似): int e1/2 R2(config-if)#ipv6 address 2001:db08:acad:1::2/64 ...

  9. JVM之垃圾收集器

    前一篇讲了垃圾收集算法--JVM之GC算法.垃圾收集算法——标记-清除算法.复制算法.标记-整理算法.分代收集算法,如果把它看作是方法论,那么下面说的就应该是内存回收的具体实现. 先看一下JVM中有哪 ...

  10. 数据库 【redis】 命令大全

    以下纯属搬砖,我用Python抓取的redis命令列表页内容 如果想看命令的具体使用可查去官网查看,以下整理为个人查找方便而已 地理位置GEOADD 将指定的地理空间位置(纬度.经度.名称)添加到指定 ...