网页上的一些广告文字，一直会滚动是怎么做到的，今天给大家演示下，非常简单，源码如下（本案例是在.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. myeclipse maven tomcat插件 创建web工程

    自从有了云笔记,很久不写博客了.今天写了使用Freemarker静态化JSP页面,索性就发出来.初学,勿喷. 这篇文字以前放在云笔记里,当然里面有很多借鉴网络上的东西,而自己也使用Maven很久了,索 ...

  2. 你不可不知的iOS与Android差异点！

    1.运行机制的区别 Android:沙盒运行机制,采用真后台运行,将所有的应用都保存在RAM中,按home键,程序被挂在了后台,实际未退出,因程序在后台运行,所以可以收到推送消息,导致内存越用越低,越 ...

  3. JVM学习记录-类加载的过程

    类的整个生命周期的7个阶段是:加载(Loading).验证(Verification).准备(Preparation).解析(Resolution).初始化(Initialization).使用(Us ...

  4. 深度学习之卷积神经网络（CNN）

    卷积神经网络(CNN)因为在图像识别任务中大放异彩,而广为人知,近几年卷积神经网络在文本处理中也有了比较好的应用.我用TextCnn来做文本分类的任务,相比TextRnn,训练速度要快非常多,准确性也 ...

  5. 带你搭一个SpringBoot+SpringData JPA的环境

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 不知道大家对SpringBoot和Spring Da ...

  6. DSAPI 提取中间文本（字符串）

    提取中间文本(源文本 As String, 前导文本 As String, 结束文本 As String, Optional 移除文本 As String = "", Option ...

  7. 结合JDK源码看设计模式——模板方法模式

    前言: 相信很多人都听过一个问题:把大象关进冰箱门,需要几步? 第一,把冰箱门打开:第二,把大象放进去:第三,把冰箱门关上.我们可以看见,这个问题的答案回答的很有步骤.接下来我们介绍一种设计模式--模 ...

  8. 第16次CCF CSP认证-第5题-317 号子任务(subtask317)-图论最短路径

    [题目背景]“你在平原上走着走着,突然迎面遇到一堵墙,这墙向上无限高,向下无限深,向左无限远,向右无限远,这墙是什么?”——<流浪地球>原著我们带着地球去流浪了,为了处理流浪过程中可能会发 ...

  9. 面试题解：输入一个数A，找到大于A的一个最小数B，且B中不存在连续相等的两个数字

    玄魂工作室秘书 [玄魂工作室]      昨天发的算法有一处情况没考虑到,比如加一后有进位,导致又出现重复数字的情况,修正后今天重新发一次.     比如输入99,那B应该是101 因为100有两个连 ...

  10. 爬虫框架之Scrapy（二）

    递归解析 糗事百科递归解析 在前面的例子里只是爬取了糗事百科热门的第一个页面,但是当我们需要爬取更多的页面时,需要对每个页面的url依次发起请求,然后通过解析的方法进行作者和标题的解析. 我们可以构建 ...