网页上的一些广告文字，一直会滚动是怎么做到的，今天给大家演示下，非常简单，源码如下（本案例是在.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. SpringBoot(一)_快速实战搭建项目

    现在在学习springboot 相关的知识,感觉真的很好用,用idea 进行开发,根据慕课网和纯洁的微笑的课程.进行总结下. 使用idea创建springboot项目 (1)单击 File | New ...

  2. Python爬虫入门教程 64-100 反爬教科书级别的网站-汽车之家，字体反爬之二

    说说这个网站 汽车之家,反爬神一般的存在,字体反爬的鼻祖网站,这个网站的开发团队,一定擅长前端吧,2019年4月19日开始写这篇博客,不保证这个代码可以存活到月底,希望后来爬虫coder,继续和汽车之 ...

  3. 带着新人看java虚拟机07（多线程篇）

    这一篇说一下比较枯燥的东西,为什么说枯燥呢,因为我写这都感觉很无聊,无非就是几个阻塞线程的方法和唤醒线程的方法... 1.线程中断 首先我们说一说怎么使得一个正在运行中的线程进入阻塞状态,这也叫做线程 ...

  4. HTML 基本语法速查

    HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题</title> </head& ...

  5. gorm的日志模块源码解析

    gorm的日志模块源码解析 如何让gorm的日志按照我的格式进行输出 这个问题是<如何为gorm日志加traceId>之后,一个群里的朋友问我的.如何让gorm的sql日志不打印到控制台, ...

  6. 聊一聊快速排序（Js）

    快速排序 基本思路 双指针+递归分治(本质是一个创建二叉树搜索树的过程) 通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据 ...

  7. JS 各种宽高

    1.window的各种宽高   outerWidth.innerWidth.outerHeight.innerHeight outerHeight 获取浏览器窗口外部的高度(单位:像素).表示整个浏览 ...

  8. ifrem上传文件后显示

    ifrem上传文件后显示 1.上传文件按钮    <a class="btn btn-primary pull-right" id="data-upload&quo ...

  9. MySQL 四种隔离级别

    什么是事务 事务是应用程序中一系列严密的操作,所有操作必须成功完成,否则在每个操作中所作的所有更改都会被撤消.也就是事务具有原子性,一个事务中的一系列的操作要么全部成功,要么一个都不做. 事务的结束有 ...

  10. 把时间留给重要的事——Markdown 模板功能上线

    你是否遇到过因为同事在任务中过于放飞自我而感到头疼?或者经历过因为内容描写的不系统而导致关键信息被忽视? 现在,CODING Markdown 模板功能将帮助你解决这些困扰. 功能介绍 CODING ...