一个JS公告滚动效果

最新推荐文章于 2024-06-24 15:18:02 发布
最新推荐文章于 2024-06-24 15:18:02 发布
阅读量981 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jklgfgdsr/article/details/87901898
版权
本文介绍了如何使用JavaScript创建一个公告滚动效果，其中涉及到Font Awesome图标库的使用，确保在实现前正确加载该字体库。
摘要由CSDN通过智能技术生成

其中里面的"fa fa-bullhorn"类用到了Font Awesome字库，如需使用需要先加载<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>

<style>
/* top */
.top{width:100%;height:40px;margin-top:20px;border-top:1px dashed #f0f0f0;border-bottom:1px dashed #f0f0f0;font:16px/40px arial,'microsoft yahei'}
.top a{color:#333}
.top>.top-bullhorn{width:50px;height:40px;float:left;font-size:20px;line-height:40px;text-align:center;color:#f86442}
.top-box{width:calc(100% - 100px);height:40px;float:left;overflow:hidden}
.top-box>ul{width:100%;height:40px}
.top-box>ul>li{width:100%;height:40px;overflow:hidden}
.top-more{width:50px;height:40px;float:left;text-align:right}
</style>
</head>
<body>
<!-- top -->
<div class="top">
	<div
最低0.47元/天 解锁文章
jklgfgdsr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
公告滚动效果 js网站特效
11-23
公告滚动效果 js网站特效
js新闻滚动公告
fly825574456的博客
10-12 3216
*{         list-style: none;         margin: 0;         padding: 0;     }     li{         height: 25px;         line-height: 25px;     }     #three{         margin: 30px auto;         overf
前端利用JS实现自定义表格滚动效果
最新发布
zh626678的博客
06-24 562
利用js实现自定义表格滚动，在前端中数据可视化大屏中会有滚动表格的需求，不使用插件自己封装重复使用！！！！
滚动公告
qq_43688916的博客
12-25 145
1、只改变内容不会滚动 <div class="body_b" :class="{marquee_top:animate}"> <div class="body_con" v-for="item in list" :key="item.id"> <img :src="item.src" style="float:left"> <p&gt...
js 实现html滚动效果
mengzhengjie的专栏
12-30 543
obj = obj.children[1];                     var leftMsgInterval = window.setInterval(function () {                         obj.appendChild(obj.children[0]);                     }, 1000);
js文字滚动效果
小咸鱼剥椰皮的博客
07-22 527
js文字滚动效果 效果 html <div class="index-ling clearfix"> <div class="ling-left float-left text-center"> <img src="assets/img/index/index-ling.png">公告 </div> <div id="scroll_div" class="float-left"> <d
原生js实现公告滚动效果
10-17
主要为大家详细介绍了原生js实现公告滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现公告栏上下滚动效果
10-15
主要为大家详细介绍了JavaScript实现公告栏上下滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现内容滚动效果
yihanzhi的博客
06-26 7637
首先说下实现内容滚动效果的思路：在一块区域内实现内容滚动效果，要求内容轮播，那么如何实现轮播呢？我们将原内容复制一份放置其后面，当原内容滚动完成（即父层scrollTop等于原内容区高度时），我们将父层scrollTop设置为0，此时又从原内容开始滚动。如果浏览者想看内容时，但内容一直再滚动怎么办呢？我们可以通过设置onmouseover事件来控制，当用户把鼠标悬停至内容区时，停止滚动；当鼠标移开时
滚动公告 vue.js
qq_40055200的博客
10-11 223
也可以用vue动画去做 vue.js 代码如下： <html> <head> <meta charset="UTF-8"> <title>最新战报</title> <style> </style> </head> <body> <div class="v...
原生JS滚动通知
PINK_CODE的博客
08-16 485
代码】原生JS滚动通知。
公告上下滚动
10-27
文字上下左右间歇性滚动，适用于网站公告板块。demo为移动端
纯JS打造循环间隔滚动公告栏
02-27
通过二维数组循环显示公告，如果为最后一条循环回第一条 循环效果为进入中间区为快速进入，停顿数秒（预设2.5秒）后快速离开中间区，同时下一条公告快速进入！ 鼠标经过并且停留在公告区时，公告不进行切换，待鼠标离开后再次进行切换！ 点击公告区可查看当前点击公告内容 如果内容DIV当前未被打开，创建一个DIV，滑动路径分为两步，第一步滑动的宽度、高度、左距、顶距分别为上一次关闭的内容区的的宽度、高度、左距、左距，如果未打开过采用默认，第二步滑动同下一条一致 如果内容DIV当前已打开，则调整大小及位置为将要打开的大小及位置，滑动并替换内容区主题和内容 内容DIV可做成可移动，参考本人上次所写的移动DIV代码，此处不提供
jQuery实现的上下滚动公告栏
11-21
用jQuery实现的上下滚动公告栏。主要用jQuery中的animate()方法和setInterval()实现的，代码简单使用。
JS滚动代码 上下滚动 左右滚动 自动循环
10-26
JS滚动代码 效果极佳 JS滚动代码 上下滚动 左右滚动 自动循环
html上下循环滚动的公告栏效果
04-24
js实现的滚动公示栏效果，用于公告栏等的现实
jquery-滚动通知
qq_39958629的博客
05-14 381
效果： html: <div class="box"> <ul class="ul1"> <li>12月进入龙华时刻，万科压轴大盘将开盘，5.88万/㎡起钜惠登场！</li> <li>11月进入龙华时刻，万科压轴大盘将开盘！</li> <li...
微信小程序 - 新闻动态 / 公告上下滚动列表（上下循环滚动，无限上下自动滚动列表）
王佳斌
05-26 5735
前言 本文实现了 无限上下自动滚动列表 组件，常见于新闻动态列表、公告等场景，可直接调用。 您可以自定义滚动间隔与显示多少个列表， 另外点击每项会触发事件，可用于跳转到详情页。 代码干净整洁，注释详细，具体如下图所示： 示例代码 推荐使用平台提供的一键复制功能，避免发生漏选难以排查。 随便找个页面，按照以下代码进行依次复制。 <!-- display-multiple-items: 显示的滑块数量(显示几个列表)，注意对应CSS也要更改，保持总高度与每项高度成"正比"，详见CSS文件。 -
滚动公告(用数据绑定显示的方法)
weixin_30362233的博客
08-11 186
<script> <!-- functionnews_scroll(divid,height,arrStack) { this.ie=navigator.userAgent.indexOf('MSIE')>=0; this.div=document.all[divid]; ...
Jquery实现多行文本滚动效果教程
该文档提供了关于如何使用Jquery实现各种文字滚动效果的详细指南，特别是创建一个可以同时在页面上显示多个滚动区域的跑马灯插件。这个插件允许用户自定义滚动的行数、速度和时间间隔。 Jquery是一个广泛使用的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值