`

图片、文字左右上下滚动

    博客分类:
  • js
阅读更多

友情链接:http://www.popub.net/script/MSClass.html

 

网上查到的,感觉挺实用的,所以摘抄了写来,以防以后使用。

 

局限性:

 

容器内仅允许用图片<img>或者带链接的图片<a><img></a>的形式,并需要禁止其自动换行。同时不能使用li标签

 

使用手册:

1.记得在head头部添加js文件

<script type="text/javascript" src="MSClassl.js"></script>
<script type="text/javascript">
window.onload = function(){
var marquee1 = new Marquee("marqueedivcontrol")   
        marquee1.Direction = "left";  
        marquee1.Step = 1;
        marquee1.Width = 200;
        marquee1.Height = 50;
        marquee1.Timer = 5;
        marquee1.DelayTime = 0;
        marquee1.WaitTime = 0;
        marquee1.ScrollStep = 52;
        marquee1.Start();
}
</script>

 

2.参数说明

        ID        "marquee"    容器ID        (必选)
        Direction    (0)        滚动方向    (可选,默认为0向上滚动) 可设置的值包括:0,1,2,3,"top","bottom","left","right" (0向上 1向下 2向左 3向右)
        Step        (1)        滚动的步长    (可选,默认值为2,数值越大,滚动越快)
        Width        (760)        容器可视宽度    (可选,默认值为容器初始设置的宽度)
        Height        (52)        容器可视高度    (可选,默认值为容器初始设置的高度)
        Timer        (50)        定时器        (可选,默认值为30,数值越小,滚动的速度越快,1000=1秒,建议不小于20)
        DelayTime    (5000)        间歇停顿延迟时间(可选,默认为0不停顿,1000=1秒)
        WaitTime    (3000)        开始时的等待时间(可选,默认或0为不等待,1000=1秒)
        ScrollStep    (52)        间歇滚动间距    (可选,默认为翻屏宽/高度,该数值与延迟均为0则为鼠标悬停控制,-1禁止鼠标控制)

 

3.样式设置    

       在ID上记得设置它的宽度与高度,还要切断容器的宽度,如:overflow:hidden;

分享到:
评论

相关推荐

    幻灯片滚动 文字滚动 上下滚动 左右滚动兼容多浏览器

    幻灯片滚动 文字滚动 上下滚动 左右滚动兼容多浏览器 js jquery

    marquee图片无缝滚动(上下左右均可)

    "marquee图片无缝滚动(上下左右均可)" 这个标题涉及到一个JavaScript或HTML元素的使用,即`&lt;marquee&gt;`标签,它用于创建一个滚动的效果,通常用于文字或图像的自动滚动。这里的关键词是“无缝滚动”,意味着在滚动...

    jquery图片,文字上下左右整屏翻滚特效

    这个标题所指的特效是使用JavaScript库jQuery来创建的一种视觉效果,它使得图片和文字能够在网页的整个屏幕上以上下或左右的方向连续滚动,给用户带来生动且吸引人的视觉体验。 jQuery是一个轻量级、高性能的...

    Div块上下左右循环滚动

    【Div块上下左右循环滚动】是一种常见的网页动态效果,它可以使网页中的某个Div元素实现持续不断的循环滚动,增强用户体验和视觉吸引力。这种效果通常通过JavaScript和CSS技术来实现,尤其在现代网页设计中,...

    delphi 上下滚动效果(跑马灯)

    除了基本的上下滚动,还可以通过扩展实现左右滚动,甚至同时支持多行或矩阵式的跑马灯效果。同时,你可以通过调整TTimer的Interval属性来改变滚动速度,或者通过改变移动步长来调整滚动的平滑度。 在提供的压缩包...

    实现图片文字上下左右滑动

    综上所述,实现“图片文字上下左右滑动”的功能,需要对Android的UI组件有深入的理解,包括`ScrollView`和已废弃但依然可用的`Gallery`组件。在实际开发中,我们还需要关注性能优化、布局适应性和用户体验等方面,以...

    利用Marquee实现无缝循环滚动文字

    其中一种常见的动态效果就是利用`&lt;marquee&gt;`标签来实现文字或图片的自动滚动。不过,在提供的代码片段中,并没有直接使用HTML标准中的`&lt;marquee&gt;`标签,而是通过JavaScript结合CSS来模拟了类似的效果。接下来,我们...

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

    连续滚动是最基础的滚动效果,它可以让文字或图片持续不断地从一侧滚动到另一侧。这种效果通常用于新闻滚动、公告栏等场景。实现方法通常基于JavaScript,通过定时器设置间隔,改变元素的CSS属性如`left`或`top`来...

    精美html+css上下滚动,轮播(兼容ie8)

    【精美html+css上下滚动,轮播(兼容ie8)】是一个基于jQuery技术实现的网页动态效果,旨在提供一种在浏览器上实现上下或左右切换的图片或文本轮播功能。这个解决方案特别强调了对IE7及更高版本的兼容性,确保在老旧...

    jquery图片文字一起滚动切换.zip

    当用户浏览网页时,图片和相关的文字描述会以预定的方式进行切换,如左右滑动或者上下滚动。这种效果增加了视觉吸引力,同时也使得信息传递更为生动和直观。通过这种方式,用户可以在短时间内获取更多的内容,而无需...

    JS封装的滚动类,文字图片不间断滚动代码大全.rar

    横向、纵向滚动格式调整 (解决横向滚动换行的问题,无需特殊设置), 彻底解决由于IE问题导致上下滚动页面留白的问题,它可以禁止鼠标控制暂停或继续 (将第9个参数设置为-1或者动态赋值将ScrollSetp设置为-1), 判断...

    js文字图片滚动特效

    1. 上下滚动:图片滚动与文字滚动原理相同,主要通过改变`top`或`bottom`属性实现。可以结合CSS的`overflow`属性来创建滚动区域。 2. 左右滚动:调整图片的`left`或`right`属性,同样可以创建水平滚动效果。使用CSS...

    jquery图片和文字结合滚动切换效果

    为了使效果更加丰富,可以考虑添加其他动画效果,比如左右滑动、上下滑动,或者使用`.slideToggle()`等方法。同时,也可以根据实际需求调整滚动速度和动画时长。 此外,为了提高用户体验,可以考虑在鼠标悬停时暂停...

    ios-Swift 滚动文字和图片,一行两行或多行.zip

    在iOS开发中,Swift语言提供了丰富的UI控件和方法来实现各种动态效果,其中包括滚动文字和图片的功能。这个“ios-Swift 滚动文字和图片,一行两行或多行.zip”项目就是一个很好的示例,它展示了如何在iOS应用中创建...

    无缝连接可循环滚动布局

    在Android开发中,创建一个无缝连接可循环滚动的布局是一个常见的需求,比如在轮播图、商品列表等场景。这个自定义的`ViewGroup`,名为`ForeverLayout`,就是为了满足这种需求而设计的。它允许用户在内容达到边界时...

    基于jQuery的大幅文字+图片滚动变幻的动画布局示

    基于jQuery的大幅文字+图片滚动变幻的动画布局示。 自动播放 默认周期4秒; 点击左右按钮 手动左右滚动; 点击新闻列表 渐入渐出切换; 响应键盘 上下左右键. 效果很酷,适用于含图片以及介绍的新闻标题列表。

    网页图片滚动效果

    支持以下滚动,至于向左,还是向右,滚动,停留时间长短均可自行设置,样式等都可以自己修改,JS,css代码写的很灵活,需要哪种效果只用复制代码便可. 一次横向滚动一个 ...无缝上下文字滚动 支持左右无缝滚动

    各种图片滚动

    4. **方向控制**:除了基本的上下滚动,还可以实现左右滚动,甚至360度全方位的滚动效果。这些方向的改变可以增强视觉体验,适应不同类型的布局和设计需求。 5. **文字滚动**:与图片滚动相结合,文字滚动可用于...

    通用不间断滚动JS封装类,支持图片、文字等,兼容各大浏览器,方便修改参数

    ---通用不间断滚动JS封装类,...---网页里面文字或图片滚动方面的,上下滚动,左右滚动,间歇式的,连续性的均有。 ---我也是下载别人的东西才问你们要分的,我的分数如果足够多,会免费让你们下载的,先说声抱歉了!

Global site tag (gtag.js) - Google Analytics