欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

系统通知左右滚动消息特效代码实现

程序员文章站 2022-07-07 23:44:51
系统通知左右滚动消息特效代码实现 文本特效篇--左右滚动的文本<...</div> <div class="content"> <p><a href="https://www.2cto.com/os/" target="_blank" class="keylink" rel="nofollow">系统</a>通知左右滚动消息特效代码实现</p> <pre class="brush: css;"> <HTML> <HEAD> <TITLE>文本特效篇--左右滚动的文本</TITLE> <meta charset="utf-8"> </HEAD> <BODY bgcolor="#fef4d2"> <br> <br> <center> <hr width=300> <br> <br> <!-- 案例代码1开始 --> <script language=JavaScript> <!-- [Step1]: 在此能够更改滚动文本的宽度 --> var MarqueeWidth = 300 <!-- [Step2]: 这里可以改变滚动文本的高度 --> var MarqueeHeight = 10 <!-- [Step3]: 在此能够修改文本滚动的速度,数值大,滚动快 --> var speed = 7 <!-- [Step4]: 这里可以更改滚动文本的颜色 --> <!-- [Step5]: 在此能够修改滚动文本的内容 --> var MarqueeMessage = '<font face="Arial" color=#FF0066><strong><big>JavaScript是一门相当简单易学的网络化编程语言,通过把她和HTML语言相互结合起来,能够实现实时的动态网页特效,这给网页浏览者在浏览网页的同时也提供了某些乐趣。</big></strong></font>' document.write('<marquee scrollAmount=' + speed + ' style="width:' + MarqueeWidth + '">' + MarqueeMessage + '</marquee>') function RegLayers() { if (document.layers) { setTimeout("window.onresize=RegLayers", 450) intializemarquee() } } function intializemarquee() { document.MarqueeText001.document.MarqueeText002.document.write('<nobr>' + MarqueeMessage + '</nobr>') document.MarqueeText001.document.MarqueeText002.document.close() thelength = document.MarqueeText001.document.MarqueeText002.document.width ScrollText() } function ScrollText() { if (document.MarqueeText001.document.MarqueeText002.left >= thelength * (-1)) { document.MarqueeText001.document.MarqueeText002.left -= speed setTimeout("ScrollText()", 100) } else { document.MarqueeText001.document.MarqueeText002.left = MarqueeWidth ScrollText() } } window.onload = RegLayers </script> <!-- 案例代码1结束 --> <!-- 案例代码2开始 --> <ilayer width=&{MarqueeWidth}; height=&{MarqueeHeight}; name="MarqueeText001"> <layer name="MarqueeText002"></layer> </ilayer> <!-- 案例代码2结束 --> </BODY> </HTML></pre> <p>实现效果</p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="系统通知左右滚动消息特效代码实现" src="/default/index/img?u=aHR0cDovL2ltYWdlczIuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxODA0MTMvYl8wXzIwMTgwNDEzMTMzNTIzNzc4Ny5qcGc=" title="系统通知左右滚动消息特效代码实现"></p> </div> <div class="info-pre-next"> <p> 上一篇: <a href="/article/1680846.html"> HTML中的strong元素介绍 </a> </p> <p> 下一篇: <a href="/article/1680848.html"> 关于login登录时写了POST还是GET的问题解决 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/1796717.html" target="_blank" title="微信小程序实现滚动消息通知"> <h2> 微信小程序实现滚动消息通知 </h2> </a> </li> <li> <a href="/article/1680847.html" target="_blank" title="系统通知左右滚动消息特效代码实现"> <h2> 系统通知左右滚动消息特效代码实现 </h2> </a> </li> <li> <a href="/article/1196118.html" target="_blank" title="Redis消息通知系统的实现"> <h2> Redis消息通知系统的实现 </h2> </a> </li> <li> <a href="/article/835239.html" target="_blank" title="微信小程序实现滚动消息通知"> <h2> 微信小程序实现滚动消息通知 </h2> </a> </li> <li> <a href="/article/516693.html" target="_blank" title="Redis消息通知系统的实现"> <h2> Redis消息通知系统的实现 </h2> </a> </li> <li> <a href="/article/487133.html" target="_blank" title="微信小程序实现滚动消息通知的示例"> <h2> 微信小程序实现滚动消息通知的示例 </h2> </a> </li> <li> <a href="/article/418097.html" target="_blank" title="在微信小程序中如何实现滚动消息通知"> <h2> 在微信小程序中如何实现滚动消息通知 </h2> </a> </li> <li> <a href="/article/397239.html" target="_blank" title="在微信小程序中如何实现滚动消息通知"> <h2> 在微信小程序中如何实现滚动消息通知 </h2> </a> </li> <li> <a href="/article/370531.html" target="_blank" title="微信小程序实现滚动消息通知的示例"> <h2> 微信小程序实现滚动消息通知的示例 </h2> </a> </li> <li> <a href="/article/292270.html" target="_blank" title="微信小程序中滚动消息通知的实现"> <h2> 微信小程序中滚动消息通知的实现 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益,请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号:<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>