`

滚动消息的代码

阅读更多

在制作滚动消息时总是遇到这样那样的问题,今天整理归纳一下,以备将来直接使用。

<DIV class="box">
       <marquee scrollamount='1' scrolldelay='10' direction='up' width='180' height='173' onmouseover="this.stop()" onmouseout="this.start()" loop="-1">
        <UL class=lastedList>
            <LI><a href=""> 痴心不改爱国情0</a></LI>
            <LI><a href="">痴心不改爱国情1</a></LI>
            <LI><a href="">痴心不改爱国情2</a></LI>
            <LI><a href="">痴心不改爱国情3</a></LI>
            <LI><a href="">痴心不改爱国情4</a></LI>
            <LI><a href=""> 痴心不改爱国情5</a></LI>
            <LI><a href="">痴心不改爱国情6</a></LI>
            <LI><a href="">痴心不改爱国情7</a></LI>
            <LI><a href="">痴心不改爱国情8</a></LI>
            <LI><a href="">痴心不改爱国情9</a></LI>
            <LI><a href=""> 痴心不改爱国情10</a></LI>
            <LI><a href="">痴心不改爱国情11</a></LI>
            <LI><a href="">痴心不改爱国情12</a></LI>
            <LI><a href="">痴心不改爱国情13</a></LI>
            <LI><a href="">痴心不改爱国情14</a></LI>
            <LI><a href=""> 痴心不改爱国情15</a></LI>
            <LI><a href="">痴心不改爱国情16</a></LI>
            <LI><a href="">痴心不改爱国情17</a></LI>
            <LI><a href="">痴心不改爱国情18</a></LI>
            <LI><a href="">痴心不改爱国情19</a></LI>
        </UL>
        </marquee>
    </DIV>

 

.box { border:1px solid #CAE99B; border-top:none; padding:15px 0; }
UL.lastedList{ width:150px; margin:0 auto; }/*一定不能定义height*/
.lastedListli { width:138px; height:20px; text-align:left; background:url(/images/arrow.gif) no-repeat 0 5px; padding-left:12px; }

  

有几点需要着重注意的是marquee的loop要设定无限次循环必须是-1;另外UL的高度一定不能写值,其高度要靠marquee里的height来控制。如果整个BOX一定需要高度,那就把BOX写定高度。

另个,这里的CSS只针对重要的DIV设定了属性,用到具体的地方还得因地制宜为DIV添加CSS的,这个懒偷不了。

分享到:
评论

相关推荐

    原生jquery,轮询滚动消息代码

    在“原生jQuery,轮询滚动消息代码”这个主题中,我们将深入探讨如何利用jQuery来实现一种常见的用户界面功能:轮询滚动消息。 首先,轮询滚动消息是一种动态显示更新信息的技术,常见于新闻网站或者实时聊天应用中...

    滚动最新消息代码滚动最新消息代码

    - 动画效果:设置定时器或监听滚动事件,以平滑地滚动消息条。 5. **懒人图库.txt**: 这个文件可能是对某个“懒加载”图库的说明,懒加载是一种优化技术,只在图像进入视口时才加载,减少首屏加载时间和网络带宽...

    简单原生js文字向上滚动消息框代码

    这个"简单原生js文字向上滚动消息框代码"提供了一种实现方式,它不依赖于任何JavaScript库如jQuery,而是完全基于原生JavaScript编写,这使得它在性能和加载速度上具有优势。 首先,`index.html`是网页的主文件,它...

    网页动态滚动公告栏代码

    本文将深入探讨网页动态滚动公告栏的实现原理和相关代码。 首先,滚动公告栏的实现主要依赖于HTML、CSS和JavaScript这三种核心技术。HTML负责构建网页的基本结构,CSS用于样式控制,使得滚动效果美观,而JavaScript...

    js滚动最新消息demo代码

    在这个"js滚动最新消息demo代码"中,我们可以预期包含以下关键知识点: 1. **DOM操作**:JavaScript通过Document Object Model(DOM)来操作HTML或XML文档。在滚动最新消息的示例中,可能需要选择特定的消息元素,...

    文字滚动消息广告代码.rar

    【文字滚动消息广告代码】是一种常见的网页动态效果,它通过JavaScript语言实现,使得文本信息在网页上以滚动的形式展示,以此吸引用户的注意力并传递广告信息。这种特效在网站的页眉、页脚或者侧边栏中经常被用作...

    js向上滚动消息框代码.zip

    【JS向上滚动消息框代码详解】 在Web开发中,用户界面的交互性和信息提示功能是提升用户体验的关键要素之一。JS向上滚动消息框代码提供了一种简单实用的解决方案,利用JavaScript的原生功能来实现信息的动态展示。...

    滚动QQ在线客服代码

    为了实现与QQ的连接,开发者需要获取到QQ的API接口,并按照其规范编写代码,确保消息的发送和接收能够顺利进行。 在压缩包文件“jsad-044”中,可能包含了实现这个功能的所有必要文件,如JavaScript脚本、CSS样式表...

    如何区分系统滚动条消息与控件滚动条消息

    3. EM_SCROLL:编辑框控件的滚动消息,允许在文本内容超出可视区域时滚动。 区分系统滚动条和控件滚动条的关键在于消息的来源和处理方式。系统滚动条的消息由系统窗口处理,而控件滚动条的消息由控件本身处理。...

    滚动最新消息代码.rar

    "滚动最新消息代码"是指利用JS实现的一种网页动态效果,通常用于展示新闻网站或者信息更新频繁的页面,将最新的消息以滚动的形式呈现给用户,既能节省空间,又能保持信息的实时性。 这种效果可以分为两类:横向滚动...

    30多种上下左右滚动代码兼容各种浏览器

    这种滚动方式适合展示多条短消息,避免信息过快而错过。 三、一起上滚与下滚 一起上滚和下滚是让多个元素同时按照相同方向滚动,常用于对比展示或创建视觉冲击力。这可以通过为每个滚动元素设置相同的滚动函数和...

    易语言源代码-发送消息滚动滚动条源码.e

    易语言源代码-发送消息滚动滚动条源码.e

    jQuery图文消息列表上下交替滚动代码

    在本文中,我们将深入探讨如何使用jQuery实现一个图文消息列表的上下交替滚动效果,并在鼠标悬停时改变背景颜色。这个功能广泛应用于新闻网站、公告栏或者社交媒体动态展示,能够吸引用户注意力,提升用户体验。 ...

    易语言发送消息滚动滚动条例程

    3. 使用“发送消息”命令,根据需求发送不同的滚动消息。 4. 在消息处理函数中,根据接收到的消息类型(如WM_VSCROLL或WM_HSCROLL)进行相应的处理,如更新窗口内容的位置。 压缩包内的“发送消息滚动滚动条例程”...

    VB6.0实现代码窗口滚动

    - 在窗体或控件的`WndProc`方法中处理滚动消息,如: ```vb Public Sub WndProc(ByRef msg As Message) '...其他消息处理... Select Case msg.Msg Case WM_VSCROLL '处理垂直滚动 Case WM_HSCROLL '处理...

    Html滚动字幕代码

    HTML滚动字幕是一种常见的网页动态效果,用于在页面上显示滚动的文字或消息,常用于公告、新闻更新或者网站标语等。这种效果通过HTML和CSS,甚至JavaScript实现,为网站增添互动性和吸引力。以下是对HTML滚动字幕...

    jQuery滚动新闻实现代码

    这个示例中,作者分享了一个基于jQuery的新闻滚动代码,并对其进行了优化。 首先,该实现涉及到以下核心文件: 1. HTML 文件:包含新闻列表的结构,使用`&lt;ul&gt;`和`&lt;li&gt;`标签组织内容。 2. jQuery.js:jQuery库,提供...

    VB简单滚动字幕代码

    在VB6(Visual Basic 6)环境中,滚动字幕是一种常见的功能,通常用于信息展示或者消息提示。这个项目中,开发者使用了定时器(Timer)控件和标签(Label)控件来实现这一效果。接下来,我们将深入探讨如何利用VB6...

    易语言源代码_发送消息滚动滚动条.zip

    在这个“易语言源代码_发送消息滚动滚动条.zip”压缩包中,包含了一个名为“发送消息滚动滚动条.e”的源代码文件,这显然是一个易语言编写的程序,用于控制GUI界面中的滚动条滚动。 在Windows编程中,控制滚动条的...

    漂亮的网站文字上翻滚动代码

    非常漂亮的文字滚动代码。一个长条方框里的横排文字,向上翻动,有时间间隔控制,非常实用,用于网站公告、消息、广告和新闻,我找了好久才找到,心雅文学网站用的。

Global site tag (gtag.js) - Google Analytics