`
daidalei321
  • 浏览: 110795 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css 实现上下左右方向滚动字幕

    博客分类:
  • web
阅读更多

<html>
<head>
</head>
<body>

<table> 
    <tr> 
        <td> 
            <table style="WIDTH: 252px" border="1" cellspacing=0 cellpadding=0> 
                <tbody> 
                    <tr> 
                        <td style="WIDTH: 429px; HEIGHT: 280px" colspan=3 rowspan=2> 
                           <marquee onMouseOver=this.stop() style="WIDTH: 426px; HEIGHT: 280px" onMouseOut=this.start() scrollamount=4 scrolldelay=500 direction=up>   
                            <center><span style="FONT-SIZE: 9pt"><br> 
                            我会滚动,把鼠标放上来我就停了。<br><br> 
                            加“direction=up”我就从下往上滚。<br><br> 
                            用”scrollamount=2“来调整我滚的速度,<br><br> 
                            数字越大,我滚的越快。<br><br> 
                            当”scrolldelay=700“的值变大时,我滚动的时延就变长。  
                            </span></center> 
                             </marquee> 
                        </td> 
                    </tr> 
                    <tr></tr> 
                </tbody> 
            </table> 
        </td> 
        <td> 
            <table style="WIDTH: 252px" border="1" cellspacing=0 cellpadding=0> 
                <tbody> 
                    <tr> 
                        <td style="WIDTH: 429px; HEIGHT: 280px" colspan=3 rowspan=2> 
                           <marquee onMouseOver=this.stop() style="WIDTH: 426px; HEIGHT: 280px" onMouseOut=this.start() scrollamount=2 scrolldelay=7 direction=down>   
                            <center><span style="FONT-SIZE: 9pt"><br> 
                            我会滚动,把鼠标放上来我就停了。<br><br> 
                            加“direction=down”我就从上往下滚。  
                            </span></center> 
                             </marquee> 
                        </td> 
                    </tr> 
                    <tr></tr> 
                </tbody> 
            </table> 
        </td> 
        </tr> 
        <tr> 
        <td> 
            <table style="WIDTH: 252px" border="1" cellspacing=0 cellpadding=0> 
                <tbody> 
                    <tr> 
                        <td style="WIDTH: 429px; HEIGHT: 280px" colspan=3 rowspan=2> 
                           <marquee onMouseOver=this.stop() style="WIDTH: 426px; HEIGHT: 280px" onMouseOut=this.start() scrollamount=2 scrolldelay=7 direction=right>   
                            <center><span style="FONT-SIZE: 9pt"><br> 
                            我会滚动,把鼠标放上来我就停了。<br><br> 
                            加“direction=right”我就从右往左滚。  
                            </span></center> 
                             </marquee> 
                        </td> 
                    </tr> 
                    <tr></tr> 
                </tbody> 
            </table> 
        </td> 
        <td> 
            <table style="WIDTH: 252px" border="1" cellspacing=0 cellpadding=0> 
                <tbody> 
                    <tr> 
                        <td style="WIDTH: 429px; HEIGHT: 280px" colspan=3 rowspan=2> 
                           <marquee onMouseOver=this.stop() style="WIDTH: 426px; HEIGHT: 280px" onMouseOut=this.start() scrollamount=2 scrolldelay=7 direction=left>   
                            <center><span style="FONT-SIZE: 9pt"><br> 
                            我会滚动,把鼠标放上来我就停了。<br><br> 
                            加“direction=left”我就从左向右滚。  
                            </span></center> 
                             </marquee> 
                        </td> 
                    </tr> 
                    <tr></tr> 
                </tbody> 
            </table> 
        </td> 
    </tr> 
</table> 

</body>
</html>

0
0
分享到:
评论

相关推荐

    滚动字幕制作手册

    滚动字幕制作手册是针对那些想要在网页或其他多媒体项目中创建动态、滚动...这份资源对于希望提升网页动态效果的开发者来说非常有价值,不仅可以帮助理解基本的滚动字幕实现,还能引导探索更复杂、自定义的滚动效果。

    jquery滚动字幕

    除了基本的上下滚动,还可以实现左右滚动、淡入淡出、跑马灯效果等。结合CSS3的过渡和动画,可以创建更复杂的动画效果。此外,还可以与jQuery插件结合,如`jQuery.scrollText`等,简化开发过程。 总之,jQuery滚动...

    js滚动字幕

    滚动字幕可以按照上下左右四个方向进行移动,为网页添加动感元素,提升用户体验。下面将详细解析如何通过JS实现这一功能,包括代码解读、关键概念解释以及可能的应用场景。 ### 关键概念解析 1. **DOM操作**:DOM...

    JQUERY多方向滚动

    这个插件专门用于创建滚动效果,它扩展了jQuery的功能,允许我们在元素上实现类似电视底部滚动字幕的效果。在`index.html`中,我们需要正确地链接到这些资源,并在JavaScript代码中初始化插件。 **实现步骤** 1. *...

    用JavaScript和ASP制作连续滚动的字幕

    ### 使用JavaScript和ASP实现连续滚动字幕的详细解析 #### 技术背景及应用场景 在网站建设和维护过程中,滚动字幕是一种常见的展示方式,尤其适用于新闻公告、活动通知等需要实时更新信息的场景。传统的...

    制作滚动字幕,很方便!

    ### 制作滚动字幕的方法与技巧 在网页设计中,滚动字幕是一种常见的视觉元素,它可以用来展示新闻、公告或是吸引用户注意力的信息。通过HTML `&lt;marquee&gt;` 标签,我们可以轻松地实现这一功能。本文将详细介绍如何...

    JavaScript滚动字幕事件.pdf

    JavaScript滚动字幕事件是网页开发中一种常见的动态效果,用于创建吸引用户注意力的滚动文本。本文档主要介绍了如何利用JavaScript和HTML的`&lt;marquee&gt;`标签来实现这一功能。`&lt;marquee&gt;`标签虽然功能相对简单,但它能...

    字幕滚动——MarQuee控件

    标题中的“字幕滚动——MarQuee控件”指的就是这个功能,它允许信息以滚动的方式在有限的空间内连续显示,常见于新闻标题、广告横幅或者电视屏幕底部的滚动字幕。 Marquee控件最早是HTML的一个非标准标签,主要在...

    IE 展示 上下滚动 实现Marquee机制

    标题 "IE 展示 上下滚动 实现Marquee机制" 暗示了我们要讨论的是在Internet Explorer浏览器中实现一种类似电视新闻滚动字幕的效果,通常这种效果被称为Marquee(滚动条)。Marquee元素在HTML中用于创建一个可以自动...

    jQuery文字上下滚动3个效果

    在“jQuery文字上下滚动3个效果”这个主题中,我们将探讨如何利用jQuery实现文字在页面上动态上下滚动的效果,这通常用于新闻标题、公告或者滚动字幕等场景。 1. **基本概念** - **jQuery选择器**:jQuery的核心是...

    dreaweaver 插入一个可以上下滚动区域

    在创建网页时,有时我们需要在一个固定的空间内展示超过该空间高度的内容,这时就需要使用到“可以上下滚动区域”这一功能。这个特性允许我们创建一个带有滚动条的容器,让用户能够浏览超出视窗范围的信息。 要插入...

    文字滚动效果

    `&lt;marquee&gt;`是一个过时但仍然可用的元素,可以直接实现简单的左右或上下滚动效果。在现代Web开发中,更多使用CSS和JavaScript来定制滚动行为。 5. **响应式设计** 当考虑到移动设备和不同屏幕尺寸时,文字滚动效果...

    不用JAVA的纯HTML超级字幕的设计方法.pdf

    通过修改和扩展FrontPage的字幕组件,可以创建出具备更多功能的超级字幕,包括实现多方向滚动、多行多段文字、图片和表格的嵌入,并且能够为字幕中的各个部分设置超链接。这种方法对于希望在不同浏览器和安全设置...

    Dreamweaver也能轻松制作Flash相册

    - **direction**:设置文字滚动的方向,如上下左右。 - **scrollamount**:设置文字滚动的速度。 - **scrolldelay**:设置文字滚动时的停顿时间(毫秒单位)。 通过以上详细的操作步骤和知识点介绍,可以清晰地...

    js技术特效

    5. 上下滚动字幕:这种效果常见于电影开场或新闻滚动条,JavaScript可以轻松实现文字或句子沿着屏幕垂直方向的滚动播放。通过定时器和字符串截取,可以控制文字的滚动速度和方向,甚至实现暂停、继续等控制功能。 ...

    jQuery实现动态弹幕效果

    弹幕效果通常是文字信息从屏幕的一侧以一定的速度移动到另一侧,类似于电视或电影中的滚动字幕。在网页上,我们可以利用CSS来定位和控制元素的移动,而jQuery则用来处理用户输入和动画效果。 步骤一:HTML结构 创建...

    各种跑马灯

    跑马灯,也被称为滚动字幕或走马灯效果,是一种常见的网页动态效果,用于展示信息或广告。在网页设计中,跑马灯通常用来在有限的空间内展示大量的文本或图片,通过滚动或循环的方式吸引用户的注意力。jQuery 是一个...

    详解微信小程序实现跑马灯效果(附完整代码)

    在本文中,我们将探讨如何在微信小程序中实现跑马灯效果,这是一种常见的动态视觉效果,通常用于展示滚动字幕或滚动广告。 跑马灯效果的实现主要依赖于CSS(层叠样式表)而不是JavaScript,这使得实现过程相对简单...

    marquee-images

    这里的`behavior`属性可以设置为`scroll`(默认,上下或左右滚动)、`slide`(只滚动一次)或`alternate`(来回滚动)。`direction`属性则定义了滚动的方向,可以是`left`、`right`、`up`或`down`。 2. **CSS样式*...

Global site tag (gtag.js) - Google Analytics