这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下 ,代码实现如下。

html+css部分:

 <style>
#moocbox{
width: 600px;
height: 22px;
border: 1px solid #ccc;
margin:60px auto;
overflow: hidden;
}
.con{
padding-left: 24px;
}
.con li{
list-style: decimal;
}
.con li a{
font-size: 14px;
}
.con li a:hover{
color: red;
}
</style>
<div id="moocbox">
<ul id="con1" class="con">
<li><a href="#">第一张</a></li>
<li><a href="#">第二张</a></li>
<li><a href="#">第三张</a></li>
<li><a href="#">第四张</a></li>
<li><a href="#">第五张</a></li>
<li><a href="#">第六张</a></li>
<li><a href="#">第七张</a></li>
<li><a href="#">第八张</a></li>
<li><a href="#">第九张</a></li>
<li><a href="#">第十张</a></li>
<li><a href="#">第十一张</a></li>
</ul>
<ul id="con2" class="con"></ul>
</div>

设计坞https://www.wode007.com/sites/73738.html

js部分:

 <script>
//获取外框
var area = document.getElementById("moocbox");
//获取con1
var con1 = document.getElementById("con1");
//获取con2
var con2=document.getElementById("con2");
//con2克隆con1
con2.innerHTML=con1.innerHTML;
//设置滚动的初始值为0
area.scrollTop=;
//创建向上滚动的函数
function scrollUp(){
area.scrollTop++;
//判断
if(area.scrollTop >= con1.offsetHeight){
area.scrollTop = ;
}else{
area.scrollTop++;
}
}
//将滑动的速度保存为一个变量
var speed = ;
//使用定时器,速度为50
var myScroll = setInterval("scrollUp()",speed);
//鼠标移入清除定时器
area.onmouseover = function(){
clearInterval(myScroll);
}
//鼠标移出,添加定时器
area.onmouseout = function(){
myScroll = setInterval("scrollUp()",speed);
}
</script>

无间歇文字滚动_ 原生js实现新闻无间歇性上下滚动的更多相关文章

  1. 原生js开发,无依赖、轻量级的现代浏览器图片懒加载插件,适合在移动端开发使用

    优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...

  2. 列表内容自动向上滚动(原生JS)

    效果展示 (鼠标移入,滚动停止:鼠标移出,滚动继续) 实现原理 1. html结构:核心是ul > li,ul外层包裹着div.因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容 ...

  3. 原生js实现简单的全屏滚动

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

  4. 原生js移动端列表无缝间歇向上滚动

    在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...

  5. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  6. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  7. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  8. 原生JS实现banner图的滚动与跳转

    HTML部分: <div id="banner"> <!--4张滚动的图片--> <div id="inside"> < ...

  9. html实现滚动播报(原生JS实现)

    html实现滚动播报(原生JS实现) 废话不多说,先看一个简单的滚动效果(鼠标放上去的时候可以暂停滚动,谷歌版本 66.0.3359.139(正式版本)查看时会出现滚动混乱.单独提出来的时候不会,应该 ...

随机推荐

  1. Redis企业级数据备份与恢复方案

    一.持久化配置 RBD和AOF建议同时打开(Redis4.0之后支持) RDB做冷备,AOF做数据恢复(数据更可靠) RDB采取默认配置即可,AOF推荐采取everysec每秒策略 AOF和RDB还不 ...

  2. “造轮运动”之 ORM框架系列(三)~ 干货呈上

     这一趴里面,我就来正式介绍一下CoffeeSQL的干货.    首先要给CoffeeSQL来个定位:最开始就是由于本人想要了解ORM框架内部的原理,所以就四处搜寻有关的博客与学习资料,就是在那个夏天 ...

  3. Android中数据缓存的处理

    为了避免重复操作数据库带来的性能问题,可以将数据库中的数据一次性读入到内存中,这样使得对数据查询的操作变得更加高效,但是这样会带来数据同步的问题,所以需要在每次操作完内存中的数据,同步去操作数据库中的 ...

  4. 手写网页扫雷之css部分

    #ui{ text-align: center; } #saolei{ width: 500px; height: 500px; border: 1px solid #456345; margin: ...

  5. 链式前向星存树图和遍历它的两种方法【dfs、bfs】

    目录 一.链式前向星存图 二.两种遍历方法 一.链式前向星存图:(n个点,n-1条边) 链式前向星把上面的树图存下来,输入: 9 ///代表要存进去n个点 1 2 ///下面是n-1条边,每条边连接两 ...

  6. Cobbler自动化部署系统

    1.cobbler简介 ​ cobbler是一个LInux服务器安装的服务,可以通过网络启动(PXE)的方式来快速安装.重装物理服务器和虚拟机,同时还可以管理DHCP,DNS等 ​ cobbler可以 ...

  7. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(七)

    系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...

  8. C# 加密、解密PDF文档(基于Spire.Cloud.SDK for .NET)

    Spire.Cloud.SDK for .NET提供了接口PdfSecurityApi可用于加密.解密PDF文档.本文将通过C#代码演示具体加密及解密方法. 使用工具: Spire.Cloud.SDK ...

  9. CSS中 隐藏元素的常用方法

    在CSS中,使某个元素在页面中消失的方法有很多,今天为大家介绍几种我常用的方式 . 一.display:none;   让元素直接从页面消失,不占用尺寸,会改变页面布局. 代码演示: 页面演示:在页面 ...

  10. CFS三层网络环境靶场实战

    一.环境搭建: ①根据作者公开的靶机信息整理 共有三个targets,目标是拿下三台主机权限,且是三层的网络环境,内网网段有192.168.22.0/24和192.168.33.0/24,添加两张仅主 ...