JS+CSS代码简洁的无间断文字向上滚动切换效果

最新推荐文章于 2022-10-29 23:59:01 发布
最新推荐文章于 2022-10-29 23:59:01 发布
阅读量3.6k 收藏
点赞数
文章标签： css timer function javascript scroll class
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS+CSS代码简洁的无间断文字向上滚动切换效果丨芯晴网页特效丨CsrCode.Cn</title>
<style type="text/css" media="all">
.scroll{
height:20px;
overflow:hidden;
font-size:12px;
line-height:20px;
border:#A5A5A5 1px dotted;
width:120px;
margin:0px auto;
text-align:center;
}
</style>
<script language="javascript" type="text/javascript">
var s,sn=0,timer,slen,timer2;
function scrollInit(){ 
 s=getid("s1");
 s.scrollTop=0;
 slen=s.innerHTML.split("|");
 s.innerHTML="";
 for(var i=0;i<slen.length;i++){s.innerHTML+=(slen[i]+"<br />");}
 s.innerHTML+=slen[0];
 timer2=setInterval(scrollstart,3000);
 s.οnmοuseοver=function(){clearInterval(timer2);clearInterval(timer);s.style.backgroundColor="#ccc";}
 s.οnmοuseοut=function(){timer2=setInterval(scrollstart,3000);s.style.backgroundColor="#fff";}
}
function scrollstart(){
 if(s.scrollTop>=(slen.length*20)){s.scrollTop=0;}
 timer=setInterval(scrollexec,30); 
 }
function scrollexec(){
 if(sn<20){
  sn++;
  s.scrollTop++;
  }else{
   sn=0;
   clearInterval(timer);
   }  
 }
function getid(id){return document.getElementById(id);}
window.οnlοad=scrollInit;
</script>
</head>
<body>
<div id="s1" class="scroll">北 京|上 海|广 州|西 安|南 京|大 连|哈尔滨|武 汉</div>
</body>
</html>
xianyao_shi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js+css3文字上下滚动切换动画特效
06-11
一款简单的js+css3文字上下滚动切换动画特效，可设置多种不同颜色的文字。
利用CSS3实现的文字定时向上滚动
09-24
大家以前基本是用Javascript来实现文字定时向上滚动的效果，那么今天小编给大家分享下利用CSS3来实现这一效果，有需要的可以参考学习。
html+css+javascript实现列表循环滚动示例代码
12-13
说明：设置时间定时，在规定的时间内替换前一个节点的内容 1、关键代码：javascript： 复制代码代码如下: [removed] var dome=document.getElementById(“dome”); //获取节点 var dome1=document.getElementById(“dome1”); var dome2=document.getElementById(“dome2”); var speed=50;//设置向上轮动的速度 dome2[removed]=dome1[removed];//复制节点 关键语句 func
vue实现消息逐条轮播，向上滚动，前端css实现消息轮播
Spy003的博客
10-29 2398
vue实现消息逐条轮播，向上滚动，前端css实现消息轮播，我们用css和来实现，核心在于transition属性的使用，
制作公告栏滚动样式的效果css
泪的结晶的博客
11-14 7019
&lt;div class="details" id="details"&gt; &lt;marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" height="25"&gt;
单行文字向上无间断的滚动
antelope_2014的博客
04-20 88
单行文字向上滚动，这里我主要是用了无逢滚动的原理：通过改变top值，让文字让上移动，需要一个定时器 var oNav=document.getElementById('nav'); var oUl=oNav.getElementsByTagName('ul')[0]; var aLi=oUl.children; var timer=null; va...
jquery滚动效果-无间隙向上滚动
ywj5200的专栏
11-29 1023
第一：html页面 [html] view plain copy  print?                                   div class="global_module news">   h3>最新动态img src="images/down.png" />h3>   div class="scrollNews">
CSS3文字逐行向上滚动轮换动画特效
06-11
一款适用于网站通知公告栏的CSS3文字逐行向上滚动轮换动画特效，简单又有创意，而且实现只需要很少的CSS3代码。
Js+CSS实现的间断和不间断文本滚动代码
10-28
Js+CSS间断和不间断文本滚动代码，文字在一行高度范围内不间断滚动，还有一个是间断滚动，滚动一次后会稍停片刻再次滚动。
html 向上滚动 不间断,JS实现单行文字不间断向上滚动的方法
weixin_31281003的博客
06-03 409
.wrap{padding:10px;border:1px #ccc solid; width:500px;margin:20px auto;}.roll-wrap{height:130px;overflow:hidden;}JS文本向上滚动1JS文本向上滚动2JS文本向上滚动3JS文本向上滚动4JS文本向上滚动5JS文本向上滚动6JS文本向上滚动7function scrollTxt(){va...
文字不间断无缝隙滚动文字不间断无缝隙滚动
11-25
文字不间断无缝隙滚动。
超简单滚动文字切换
02-05
超简单滚动文字切换超简单滚动文字切换 微博
原生JS实现列表内容自动向上滚动效果
10-16
主要介绍了原生JS实现列表内容自动向上滚动效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
用jQuery的Animate方法实现公告轮播效果，文字停留几秒后向上滚动
07-31
用jQuery的Animate方法实现公告轮播效果，文字停留几秒后向上滚动，类似招行app的那个公告效果，可自定义停留时间，样式自己写css调节，放在mui框架可以看到一个可爱的小喇叭。/笑脸/
js+css3曲线循环菜单滚动切换特效
06-05
【标题】"js+css3曲线循环菜单滚动切换特效"是一种网页设计技术，结合JavaScript（js）和CSS3的强大功能，创造出引人注目的交互式用户体验。这种特效主要用于网站的导航菜单，使得用户在浏览时能以独特的曲线形状和...
js+css实现tab菜单切换效果的方法
10-24
主要介绍了js+css实现tab菜单切换效果的方法,以实例形式完整讲述了css与js的实现代码,具有一定参考借鉴价值,需要的朋友可以参考下
js实现间歇滚动内容
SimbaDan的专栏
02-26 2621
js实现滚动内容从yahoo上提取的,效果见 http://music.cn.yahoo.com/search?pid=ysearch&p=ustonet&mimetype=all&source=ysmi_hsch_r 即在搜索不到内容（抱歉，无法找到与“ustonet”相符的音乐搜索结果。）时，右边提示的“别人在搜什么”。觉得这个比较适合手头正在做的新闻系统，所以借用代码了。move.js
js文字自动向上无缝滚动，鼠标放入停止滚动，移出继续滚动
qq_39232387的博客
07-14 1537
效果如图 直接复制代码即可 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .scrollCon { width: 500px; height: 150px; overflow: hidden; } ul,li { m
文字向上滚动代码，带段落停顿
weixin_30784501的博客
08-01 272
带段落停顿效果的文字向上滚动代码，一个比较早的代码了，但觉得现在仍很常用，它可以定义文字成批次（段落）向上滚动，滚动后停顿，然后继续滚动，很不错啦，希望大家也喜欢。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t...
css实现无间隔文字向上滚动效果
最新发布
04-21
可以通过CSS动画和@keyframes实现无间隔文字向上滚动效果。具体实现可以参考以下代码： HTML代码 ``` <div class="scroll-wrap"> <ul class="scroll-list"> <li class="scroll-item">Item One</li> <li class="scroll-item">Item Two</li> <li class="scroll-item">Item Three</li> <li class="scroll-item">Item Four</li> <li class="scroll-item">Item Five</li> </ul> </div> ``` CSS代码 ``` .scroll-wrap { height: 100px; overflow: hidden; } .scroll-list { margin: 0; padding: 0; list-style: none; animation: scroll 10s linear infinite; } .scroll-item { height: 20px; line-height: 20px; } @keyframes scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } ``` 以上代码实现的效果是文字列表向上滚动，当滚到最后一个元素时，立即回到第一个元素重新滚动，实现无间隔滚动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值