字体循环滚动

最新推荐文章于 2021-05-26 11:19:39 发布
最新推荐文章于 2021-05-26 11:19:39 发布
阅读量704 收藏
点赞数 1
分类专栏： 技术 文章标签： function xhtml div javascript float html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fsimleh/article/details/5268979
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<div class="focus-news-down" nowrap="true">
       <div>
    <div align="left" style="float:left;width:40px;"><a href="/news" target="_blank">
    <!--<img  src="images10/new.gif" width="39" height="20"/>-->
    </a></div>  
<div id="marquees" style="float:left;width:290px;">   
 天净沙·秋思
马致远

枯藤老树昏鸦。

小桥流水人家。

古道西风瘦马。

夕阳西下，断肠人在天涯。
              </div>  
<div id="templayer"  style="position:absolute;left:0;top:2000;visibility:hidden"></div>  
   <script   language="JavaScript">  
  marqueesWidth=290;  
  with(marquees){  
  style.width=marqueesWidth;  
  style.overflowX="hidden";  
  style.overflowY="visible";  
  noWrap=true;  
  οnmοuseοver=new   Function("stopscroll=true");  
  οnmοuseοut=new   Function("stopscroll=false");  
  }  
  preLeft=0;   currentLeft=0;   stopscroll=false;  
   
  function   init(){  
  templayer.innerHTML="";  
  while(templayer.offsetWidth<marqueesWidth){  
  templayer.innerHTML+=marquees.innerHTML;  
  }  
  marquees.innerHTML+=templayer.innerHTML;  
  setInterval("scrollLeft()",10);  
  }init();  
   
  function   scrollLeft(){  
  if(stopscroll==true)   return;  
  preLeft=marquees.scrollLeft;  
  marquees.scrollLeft+=1;  
  if(preLeft==marquees.scrollLeft){  
      marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1;  
  }  
  }  
  </script>
  </div>  
</body>
</html>

fsimleh
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
文字循环滚动 LED屏效果
08-25
自己做的文字循环滚动，类似LED条屏效果，显示内容读取“通知.txt"里面的文字。
文本在屏幕上滚动，跑马灯，无缝滚动
c_qianxia5040的博客
07-28 907
左右无缝滚动效果 <marquee scrolldelay="10" direction="scroll">welcome</marquee> 一、常用属性 1.direction：滚动方向(包括4个值：up、down、left、right) 2.behavior：滚动方式(包括3个值：scroll、slide、alternate) scroll：循环滚动，默认效果； slide：只滚动一次就停止； alternate：来回交替进行滚动。 3.scrollamount：滚.
纯css实现文字循环滚动效果
热门推荐
后生丶的博客
05-23 5万+
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
字体滚动实现效果的几种方式
可乐伢
05-26 4134
一、第一种方式marquee标签： （1）几个重要属性 1.direction：滚动方向(包括4个值：up、down、left、right) 说明：up：从下向上滚动；down：从上向下滚动；left：从右向左滚动；right：从左向右滚动。 语法： <marquee direction="滚动方向">...</marquee> 2.behavior：滚动方式(包括3个值：scroll、slide、alternate)
jQuery新闻列表文字循环滚动代码
07-31
"jQuery新闻列表文字循环滚动代码" 是一种实现这种效果的技术方案，它能帮助开发者创建一个新闻列表，其中的文字会以循环滚动的方式展现，给用户带来动态的阅读体验。 jQuery 是一个流行的JavaScript库，它简化了...
文字循环滚动插件
07-01
【文字循环滚动插件】是一种常见的网页动态效果，主要用于展示一串文字或句子，通过不断地滚动更新，使得有限的空间可以展示更多的信息。这种效果在新闻网站、广告展示、公告栏等场景中广泛应用，能吸引用户的注意力...
jquery单行文字循环滚动特效代码
03-20
标题 "jquery单行文字循环滚动特效代码" 涉及的是使用jQuery库来实现一种文本动画效果，使得单行文字能够在页面上持续滚动展示。这种效果常见于新闻标题或者滚动公告等场景，能够吸引用户的注意力并高效利用有限的...
纯css轮播滚动.rar_css 文字循环滚动
09-20
5. `@keyframes`: CSS动画的关键帧规则，可以定义一个动画的过程，如从0%到100%的元素位移，创建出循环滚动的视觉效果。 在【部件1.html】中，可能包含了更具体的轮播组件，比如分页导航、左右箭头等，这些元素可以...
javascript实现状态栏文字首尾相接循环滚动的方法
10-23
主要介绍了javascript实现状态栏文字首尾相接循环滚动的方法,实例分析了javascript定时函数及页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
将文字内容以弹幕墙的形式展示在页面上需要无限循环滚动播放
08-10
将文字内容以弹幕墙的形式展示在页面上，需要无限循环滚动播放
滚动字幕实现
03-18
这是基于MFC的滚动字幕程序，实现了从上到下，从右往左滚动
滚屏（字幕循环滚动）软件VC源码
11-10
之前为一家医院做一款家属公告软件，需要字幕的循环滚动功能。我借鉴了多个源码，这是我发现的最好的滚屏源码。
Linux项目设计_媒体播放器(基于gec6818).rar
08-08
//Linux媒体播放器 //作者：化作尘 //时间：2020年8月8日15:52:45 //qq邮箱：2809786963@qq.com //csdn链接：https://blog.csdn.net/mbs520/article/details/107880118 //哔哩哔哩项目视频:（可点击主页查看）https://b23.tv/bxfxvd 项目功能展示： 一、开机显示登入界面，可密码管理员登入，也可以免密码普通用户登入 二、登入后显示桌面，显示5个应用 ，分别是图片、视频、音乐、设置、文件管理 三、音乐相册功能，播放图片同时播放背景音乐，可以左右滑动切换图片等操作 四、视频播放功能，可以播放avi,mp4等格式视频 五、音乐播放器，可以播放mp3格式的音频 六、设置壁纸，可以根据喜好设置自己喜欢的壁纸 七、文件管理，可以对文件进行预览和删除 一、项目课题： 基于ARM平台的广告机系统设计 （最好可以自己取
C#如何使一行文字循环滚动显示
子丰的博客
11-16 1万+
1. 控件：1个timer控件，1个label控件。 2. 设置timer控件的属性：(假设控件名为timer1)        1)设置timer1.Interval=500，该属性用于控制文字循环滚动的速度（实际上是timer控件的tick事件的执行频率），可根据个人需要设置。属性值越小，循环滚动越快。属性值的单位是毫秒(ms)。        2)设置timer1.Enab
文字循环出现效果
sunlizhen的专栏
09-04 522
var str = "有了红玫瑰，久而久之，红玫瑰就是一抹蚊子血，白玫瑰就是窗前明月光；有了白玫瑰，久而久之，白玫瑰就是黏在衣服上的一粒饭，红玫瑰就是胸口的一抹朱砂痣"     var len = str.length;     var inp = document.getElementById("inp");     int()     function int(){        
安卓开发小效果--走马灯
defukwanmcth26174的博客
08-21 207
使在layout 中实现文字滚动效果 也就是走马灯的效果只需要在响应控件里面加上这几行代码就可以 android:singleLine="true" android:ellipsize="marquee" android:marqueeRepeatLimit="marquee_forever"...
文字无限循环滚动
看风听雨
10-30 4686
在项目实现过程中,需要实现文字垂直循环滚动,第一时间想到使用css实现,不过先介绍一下js实现. 注:以下代码是基于vue的 1.js实现 原理: 实际上就是一个计时器定时执行 top ++ ,当执行到底部时,top 值置0,回到顶部继续执行滚动,但这个会有一个明显的缺点,用户会明显的的感觉到,滚动到底部时,有一个跳跃到顶部的过程 实现: const...
c# wpf 文字循环滚动
最新发布
06-02
要实现WPF文字循环滚动，可以使用ScrollViewer和Storyboard来实现。以下是一个简单的示例： 1. 在XAML文件中，将ScrollViewer放置在需要滚动的文本块或文本框的外部。 ```xml <Grid> <ScrollViewer x:Name="scrollViewer" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden"> <TextBlock x:Name="textBlock" Text="这是一段需要滚动的文字。" /> </ScrollViewer> </Grid> ``` 2. 在后台代码中，创建一个Storyboard并使用DoubleAnimation来控制ScrollViewer的垂直偏移量。 ```csharp private void StartScrollAnimation() { double actualWidth = textBlock.ActualWidth; double scrollWidth = actualWidth - scrollViewer.ActualWidth; if (scrollWidth > 0) { DoubleAnimation animation = new DoubleAnimation(); animation.From = 0; animation.To = -scrollWidth; animation.RepeatBehavior = RepeatBehavior.Forever; animation.Duration = new Duration(TimeSpan.FromSeconds(10)); scrollViewer.BeginAnimation(ScrollViewer.HorizontalOffsetProperty, animation); } } ``` 3. 在窗口或页面的Loaded事件中启动滚动动画。 ```csharp private void Window_Loaded(object sender, RoutedEventArgs e) { StartScrollAnimation(); } ``` 这样就可以实现WPF文字循环滚动了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值