网页上的一些广告文字，一直会滚动是怎么做到的，今天给大家演示下，非常简单，源码如下（本案例是在.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. javascript模块化编程 从入门到实战

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  2. .NET Core IdentityServer4实战 第一章-入门与API添加客户端凭据

    内容:本文带大家使用IdentityServer4进行对API授权保护的基本策略 作者:zara(张子浩) 欢迎分享,但需在文章鲜明处留下原文地址. 本文将要讲述如何使用IdentityServer4 ...

  3. [小技巧]ASP.NET Core中如何预压缩静态文件

    原文地址:Pre-compressed static files with ASP.NET Core 作者:Gunnar Peipman 译者:Lamond Lu 译文:https://www.cnb ...

  4. 使用 ASP.NET Core MVC 创建 Web API（五）

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...

  5. [翻译 EF Core in Action 1.7] MyFirstEfCoreApp访问的数据库

    Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...

  6. 【转载】通俗易懂，什么是.NET?什么是.NET Framework？什么是.NET Core?

    本文转载自:http://www.cnblogs.com/1996V/p/9037603.html [尊重作者原创,转载说明出处!感谢作者“小曾看世界”分享! ] 什么是.NET?什么是.NET Fr ...

  7. PHP 中move_uploaded_file 上传中文文件名失败

    项目需要上传文件名保持不变,发现上传中文失败:错误如下: move_uploaded_file(public/upload/files//-/\开密二次开发.rar): failed to open ...

  8. 从一个git仓库拷贝到另一个git仓库

    利用git从一个仓库拷贝一个项目到另一个仓库,并且log也能够一起过去. 1.从原地址克隆一份裸版本库,比如原本托管于 GitHub. git clone --bare http://github.. ...

  9. Luogu P5290 [十二省联考2019]春节十二响

    这题是最近看到的今年省选题中最良心的一道了吧 看题+想题+写题都可以在0.5h内解决,送分含义明显啊 首先理解了题意后我们很快就能发现两个点如果要被分在一段那么必须在它们的祖先处合并 首先我们考虑下二 ...

  10. 云时代的.NET

    编程语言从最初的0101机器码到汇编语言再到面向对象的编程,不断的发展,整个发展趋势呈现高内聚.低耦合.可重用.可理解的特点.最早编程是用机器码,人的大脑不像电脑,无法处理0101:后来汇编语言还是太 ...