最精简的平滑的JS新闻单行上下滚动

最新推荐文章于 2023-01-12 22:05:09 发布
最新推荐文章于 2023-01-12 22:05:09 发布 · 145 阅读 · 0
文章标签：

#javascript #shell #xhtml #ViewUI

本文介绍了一个使用纯JS实现的简洁且平滑的新闻单行上下滚动特效。该特效通过简单的HTML结构配合少量CSS样式和轻量级的JavaScript代码实现内容的自动滚动显示，适用于网站顶部或侧边栏的最新消息展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>最精简的平滑的JS新闻单行上下滚动丨芯晴网页特效丨CsrCode.Cn</title>
<style>
a{display:block;line-height:18px;text-decoration:none;color:#555;font-family:Arial;font-size:12px;}
.shell{
background:url(http://www.csrcode.cn/html/txdm_2/images/arrowb.gif) no-repeat 4px 5px;
border:1px solid #aaa;
width:230px;
padding:3px 2px 2px 26px;
}
#div1{
height:18px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="shell">
<div id="div1">
<a href="javascript:">本站收集网络上比较不错的网页特效</a>
<a href="javascript:">欢迎光临 芯晴网页特效~！</a>
<a href="javascript:">本站所有特效均收集于互联网</a>
<a href="javascript:">请仔细找找，或许就能找到你想要的特效</a>
<a href="javascript:">welcome to XinQing Waystation</a>
</div>
<div>
</body>
<script>
var c,_=Function;
with(o=document.getElementById("div1")){ innerHTML+=innerHTML; onmouseover=_("c=1"); onmouseout=_("c=0");}
(F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:1500);".replace(/#/g,"o.scrollTop")))();
</script>
</html>
iteye_8122
关注
Vue3 - 超详细实现文字上下滚动功能效果，类似网站公告文字循环翻滚、中将人员名单公布上下无限滚动效果（支持鼠标移入时悬停停止滚动、接口动态数据渲染、自由DIY样式等）
资深程序员
10-31 5812
vue3文字上下翻滚，vue3实现文字上下滚动，vue3公告栏文字上下滚动效果代码，vue3如何做类似网站公告的文字上下翻滚动，vue3怎么写文字上下来回交替滚动功能，vue3如何实现文字上下滚动跑马灯效果，vue3实现文字滚动效果，一条滚动完毕下一条从下面往上滚动，vue3动态文字滚动公告代码，vue3公告栏上下滚动,vue实现公告栏文字上下滚动效果，vue3实现多个滚动公告,鼠标移入停止滚动，Vue3中实现文字向上滚动的动画效果_vue3文字向上循环滚动，Vue3写文本上下无限滚动以及文本左右无限滚动的
js 单行多行滚动信息新闻
03-23
js 单行多行滚动信息新闻
简易单行文字上下滚动js
aamen1109的博客
03-08 6655
就是这种最简单的，上线方向的额，单行公告类，文字无缝滚动 html结构--------------------------------------                              1北京市海淀法院10月告拍品日预北京市海淀法院10月告拍品日预告告                 2京东集团领导人我们，京东京东到家啊啊京东集团领导人我们，京东京东到家啊啊
JS--单条新闻向上滚动代码
iteye_9924的博客
04-23 399
[b]JS--单条新闻向上滚动代码[/b] ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 0px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10...
新闻列表单行滚动（多行显示）简洁向上滚动js效果
12-04 291
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>新闻列表单行滚动js效果和多行滚动js效果，超简洁</title><s...
JS上下无缝滚动效果JS上下无缝滚动效果
02-20
JS上下无缝滚动效果JS上下无缝滚动效果JS上下无缝滚动效果
jQuery单行文字上下不间断循环滚动效果，适合做新闻滚动推荐
05-24
标题和描述提到的"jQuery单行文字上下不间断循环滚动效果"就是一个这样的实例，它主要用于创建一串文字在单一行内循环滚动，通常用于网站的头部或侧边栏，以动态展示最新的新闻标题或公告。 要实现这个效果，首先...
用js来实现公告栏文字上下滚动效果，可添加新数据（简单）
m0_59754472的博客
01-12 2505
用js实现公告栏滚动效果，定时获取并添加新数据至旧滚动列表尾部，并继续滚动，滚动至遍历列表最后则暂时暂停滚动
jquery实现上下左右滑动的方法
10-24
jQuery库（在这里是`jquery-1.11.2.js`）提供了便捷的JavaScript操作DOM元素的方法，使得实现滑动效果变得简单。 1. **事件绑定**： 使用`$(document).ready()`确保在页面加载完成后执行JavaScript代码。`$("#btn...
jquery单行文字向上滚动效果示例
10-26
文章中的jQuery单行文字向上滚动效果示例，向我们展示了如何使用jQuery的定时器和动画功能来实现一个简单而实用的页面效果。通过设置合适的间隔时间和步长，以及合理的CSS布局，可以轻松制作出视觉上吸引人的滚动...
仿qq频道上下单行多条滚动js效果代码
06-22
仿qq频道上下单行多条滚动js效果代码，可用于新闻，友情链接上下间隙滚动，仿qq频道上下单行多条滚动js效果代码，可用于新闻，友情链接上下间隙滚动
JS新闻公告文字逐条向上翻滚代码
weixin_30514745的博客
11-07 392
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>新闻列表单行滚动js效果和多行滚动js效果，超简洁</title><style&...
用JS实现简单的新闻向上轮播效果
Yajyaj123的博客
09-17 916
用JS实现简单的新闻向上轮播效果
新闻无缝滚动 左右
acongshijia的专栏
10-24 2049
新闻无缝滚动 左右 * {padding:0px; margin:0px;} .box{width:300px;height:30px;line-height30px;position:relative;overflow:hidden;} .roll {width:1200px;position:absolute;left:0;t
【js特效】单行多条新闻滚动效果
PHP在线开发笔记
09-07 942
1.效果图如下： 【点击查看更多滚动代码】
js实现新闻滚动-单行滚动或者多行滚动
weixin_30510153的博客
04-24 642
注明：都是转载。 先说单行滚动： --------直接复制以下代码即可试验 转载http://www.3lian.com/edu/2011/06-30/4986.html----------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x...
html新闻单行滚动
u013657967的博客
05-17 627
新闻公告单行滚动
PTA 一 直捣黄龙
break;的博客
03-19 1331
利用字典使字符串和下标产生一一对应关系。单源最短路径拓展。
jQuery实现滚动新闻 jQuery滚动新闻 jQuery多行滚动新闻 jQuery上下滚动新闻
最新发布
02-08
### 使用 jQuery 实现单行和多行上下滚动新闻效果 #### 单行向上滚动新闻效果 为了实现单行向上的滚动新闻效果，可以利用 `setInterval` 函数定时调整元素的位置属性。当顶部位置超出容器高度时，则重置其位置以形成循环播放的效果。 ```javascript $(function(){ var $newsList = $('#singleNews ul'); setInterval(function(){ var firstItem = $newsList.find('li:first'); firstItem.animate({marginTop: '-20px'}, 500, function(){ // 动画执行时间设为500毫秒 $(this).css({'margin-top': '0'}).appendTo($newsList); }); }, 3000); }); ``` 此段代码实现了每三秒钟自动切换下一条消息的功能[^1]。 #### 多行向下滚动新闻效果 对于多行的滚动需求，可以通过设置一个较大的外层包裹框作为视窗，并让内部的内容按照一定速度匀速移动。一旦最上面的一条记录完全移出了屏幕范围之外，就将其重新放置到列表末端继续参与滚动过程。 ```html <div id="multiScroll"> <ul> <!-- 新闻项 --> <li>第一条新闻</li> <li>第二条新闻</li> ... </ul> </div> ``` ```css #multiScroll { height: 100px; /* 设置可视区域的高度 */ overflow: hidden; } #multiScroll ul li{ line-height: 2em; } ``` ```javascript var speed = 30; $('#multiScroll').hover( function() { clearInterval(this.timer); }, function() { this.timer = setInterval(function(obj){ scrollIt(obj); }.bind(null,$(this)),speed); } ); function scrollIt(obj){ var marTop = parseInt($('#multiScroll ul').css("marginTop")); if (marTop<-96){ // 当前显示的是第几条数据取决于实际项目中的具体数值 $('#multiScroll ul').css({'marginTop':'0'}); }else{ $('#multiScroll ul').css({'marginTop':marTop-1+'px'}); } }; // 初始化启动滚动功能 $('#multiScroll').trigger("mouseleave"); ``` 上述 JavaScript 代码片段定义了一个简单的鼠标悬停停止滚动机制，同时也设置了初始状态下就开始滚动的行为[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值