`

连续滚动的图片效果

阅读更多

思路是,把超出视觉范围的图片追加到最后一张图片的未尾或是在Stage的某个位置.只要能跟最后一张图片的位置后面就可以了.

for (i=1; i<7; i++) {
        this.createEmptyMovieClip("mc"+i, i);//创建一个空白影片(其实是是有I个,这样每个MC的运动才不会影响到其它MC的运动.)
        this["mc"+i]._x = 10;
        this["mc"+i]._y = (i-1)*100+20;//设置其X,Y的位置
        this["mc"+i].attachMovie("m"+i, "mc"+i, 7*i);//加载内部MC
        this["mc"+i].onEnterFrame = function() {//加个enterframe事件                
                                     this._y = this._y-2;//让每个加载有MC的影片都运动起来
                if (this._y<-128) {//判断影片的位置是否到达了指定的位置,如果到达了,就执行以下的语句.
                        this._y = Stage.height+80;//设置过了界限的MC的Y位置为stage高度
                }
        };
}

其实各位可以在这个基础上再加以扩展.这才是学习的好方法.现在我也再扩展一下这段代码的应用性些.首先上面的那段代码只能用于图片一样高的才行.如果图片的高度不一样的话.那图片的的滚动就会出现问题了.而我下面的那些代码呢也有一定的局限性,要把图片大的跟大的一起排列在一起.小的跟小的排在一起.(明?)

var sheight:Number;//前面一类图片的大小,其实这里就是记录前十个小图片的总长度
var flag:Boolean;
var jianxi:Number;
var speed:Number;
var picNum:Number;
var totalHeight:Number;
//图片的总长度;可在总长度总要保持不变
flag = false;
//这个变量是用于标识是不是己经把全部图片加载完
jianxi = 20;
//每张图片的间隔的高度
speed = 10;
//图片滚动速度
picNum = 20;
//图片总数
for (i=1; i<21; i++) {
        this.createEmptyMovieClip("mc"+i, i);
        this["mc"+i].attachMovie("pic"+i, "picmc"+i, i);
        this["mc"+i]._x = 0;
        this["mc"+i].num = i;
        if (i<11) {//前十张图片与后十张的图片的高度不一样的.
                this["mc"+i]._y = (i-1)*(this["mc"+i]["picmc"+i]._height+jianxi);
                                            //设置图片的Y位置
                sheight = (i-1)*(this["mc"+i]["picmc"+i]._height+jianxi);
                                           //其实这里就是记录着第十张图片的Y位置
        } else {
                this["mc"+i]._y = sheight+(i-11)*(this["mc"+i]["picmc"+i]._height+jianxi);
                                          //设置图片的Y位置
        }
        if (i == picNum) {
                                           //当加载最后一张图片时
                flag = true;
                                          //把这个标识符设置为TRUE,就意味着,超过视觉范围的图片可以接在后面了
                totalHeight = this["mc"+i]._y+this["mc"+i]["picmc"+i]._height;
                                          //这是全部图片和间隙的长度总和.每张超过视觉范围的图片都会被加在这个后面.            
        }
               //每个被加载进来的pic中都有图片,图片上面放着一个透明按钮
        this["mc"+i]["picmc"+i].btn.useHandCursor = false;
        this["mc"+i]["picmc"+i].btn.onRollOver = function() {
                speed = 0;
                                          //当鼠标经过时,让速度为0
        };
        this["mc"+i]["picmc"+i].btn.onRollOut = function() {
                speed = 10;//当鼠标经过时,让速度为10
        };
        this["mc"+i]["picmc"+i].btn.onRelease = function() {
                                           //这是当鼠标点击图片上的按钮时触发的事件
                                          //loadBigPic,是我在主场景中定义的一个加载大图片的一个函数.这里就不贴出来了.
                this._parent._parent._parent._parent.loadBigPic(this._parent._parent.num);
        };
        this["mc"+i].onEnterFrame = function() {
                this._y = this._y-speed;//让图片滚动起来
                if (this._y<(-this["picmc"+this.num]._height)) {
                                             //当图片的运动到场景外了.就让这张图片接在全部图片长度的最后面.        
                                                //(不知道大家能不能明白我的这句话.我也表达不清楚了.)        
                                                          this._y = totalHeight-this._height+jianxi;
                        
                }
        };
}
----------------------------------------------------------------------
第二阶段的代码就是这样了.明天会加上加载大图片.再加上loading.如果哪位都可以在此扩展的啊.应用性强一点.就像楼上说的.用XML来记录图片的外部信息.都是可以的.希望大家多想想.然后写出来.把思路写上来.分享一下.*_*

文章来自: 闪客居(www.flashas.net) 详文参考:http://www.flashas.net/asbc/20070104/1628.html

分享到:
评论

相关推荐

    图片无限连续滚动的js代码

    "图片无限连续滚动的js代码"就是一种实现这种效果的技术,它基于JavaScript语言,类似于HTML中的`&lt;marquee&gt;`标签,但提供了更为灵活和可控的滚动体验。下面我们将详细探讨这个主题。 1. **JavaScript基础**: ...

    JavaScript图片连续滚动效果

    这种效果常用于页面顶部的滚动图片展示,图片会从下方逐渐滑入视图。实现这种效果的关键在于设置定时器和改变图片的位置。首先,可以将图片堆叠在一起,然后通过JavaScript定时调整最上方图片的位置,使其向上移动,...

    页脚图片连续滚动

    在网页设计中,"页脚图片连续滚动"是一种常见的视觉效果,它通常用于展示一系列相关的图片,如公司产品、服务示例或者动态信息等。这种滚动效果能够吸引用户的注意力,提高用户在页面上的停留时间,同时也能够有效地...

    JavaScript实现图片连续滚动的案例

    本案例将详细介绍如何使用JavaScript实现图片连续滚动,特别地,我们将关注“MarqueeScrollLeft”这个实现方法,它代表了向左滚动的效果。 首先,我们需要理解基本的HTML结构,用于放置要滚动的图片。通常,我们会...

    HTML图片滚动效果

    这种效果通过JavaScript库或者自定义脚本实现,能够使图片在网页上按照设定的方向和速度连续滚动,增强用户体验,吸引用户注意力。在本案例中,"Class Of Marquee Scroll"可能是一个专门用于实现这一效果的...

    图片连续滚动

    在网页设计中,图片连续滚动是一种常见的动态效果,主要用于展示多张图片,增强用户体验和视觉吸引力。这种效果通常由JavaScript实现,因为JavaScript可以提供实时、交互式的动态功能,而HTML和CSS则更多地用于静态...

    Js图片连续左右滚动.rar

    为了实现连续滚动,我们需要考虑图片的边界情况,当最后一张图片显示后,应该让第一张图片再次出现,这就需要用到数组索引的循环逻辑。 另外,为了增加用户体验,我们还可以添加控制按钮,用户可以通过点击“左”和...

    利用JavaScript制作无缝的连续滚动广告效果.pdf

    "利用JavaScript制作无缝的连续滚动广告效果" 本文介绍了如何使用JavaScript制作无缝的连续滚动广告效果,实现多行文字从下向上垂直连续不断地滚动,并且当鼠标移到滚动文字上就停止滚动,否则继续滚动。 知识点:...

    图片连续滚动无前后空白脚本

    标题与描述中的“图片连续滚动无前后空白脚本”指的是一个网页设计中常见的技术实现,即利用HTML、CSS和JavaScript创建一个无限循环滚动的图片展示效果,并且在滚动过程中不会出现空白区域,确保视觉上的连贯性和...

    javascript经典特效---图片连续滚动效果.rar

    在网页设计中,JavaScript经常被用来创建各种视觉特效,其中之一就是图片连续滚动效果。这种效果能够吸引用户的注意力,提升网站的用户体验,常用于展示产品、新闻更新或者广告轮播等场景。 要实现图片连续滚动效果...

    广告图片连续滚动代码 html

    总的来说,创建广告图片连续滚动的效果需要HTML构建基本结构,CSS进行样式控制,JavaScript处理动态交互。通过合理组合这三种技术,我们可以创建出具有吸引力的广告轮播组件。当然,实际开发中可能还需要考虑兼容性...

    连续滚动的图片

    在IT领域,连续滚动的图片通常指的是轮播图或者幻灯片展示,这种技术广泛应用于网站设计、移动应用以及各种多媒体...在实际的网页开发中,这些图片会被嵌入到轮播组件中,按照一定的顺序和动画效果进行连续滚动展示。

    UIScrollview 图片无缝连续自动滚动

    在标题“UIScrollview 图片无缝连续自动滚动”中,我们讨论的核心是利用UIScrollview来实现图片的无缝、连续且周期性的自动滚动效果。这种效果常见于新闻头条、广告轮播或者产品展示等场景,可以吸引用户的注意力并...

    不间断 滚动图片 滚动文字

    在IT行业中,"不间断滚动图片"和"滚动文字"是一种常见的网页动态效果,常用于新闻网站、广告展示或产品介绍等场景。这种效果能够吸引用户的注意力,提高信息的传播效率。接下来,我们将深入探讨实现这些效果的技术...

    网页表格中图片连续滚动

    本文将详细解析如何在HTML表格中实现图片的连续滚动效果,包括其实现原理、代码详解以及注意事项。 ### 实现原理 在网页设计中,想要让元素(如图片)在固定区域内连续滚动,主要依赖于CSS和JavaScript的结合。...

    jQuery连续滚动图片展示.zip

    jQuery连续滚动图片展示是一种常见的网页动态效果,常用于网站的广告轮播或产品展示区域,以吸引用户注意力并提供丰富的视觉体验。这个效果利用了JavaScript库jQuery的强大功能,结合CSS样式和HTML结构,实现了类似...

    原生js图片滚动插件新浪电影大片首页焦点图片滚动切换效果代码

    本教程将详细讲解如何利用原生JavaScript实现一个类似新浪电影大片首页的焦点图片滚动切换效果。 首先,我们需要理解焦点图(Slider)的基本原理。焦点图是一种网页设计元素,用于展示一组图片或内容,并通过自动或...

    无缝图片滚动效果

    "无缝图片滚动效果"是网页设计中的一种常见视觉特效,它可以让图片以平滑连续的方式循环滚动,给予用户流畅的浏览体验。这个效果常用于产品展示、轮播广告或照片墙等场景。 该插件的主要功能是创建一个自动或手动...

    基于Jquery图片点击上下滚动效果

    当用户点击某张图片时,会计算出下一张图片的位置(如果已经是最后一张则返回第一张),然后淡出当前图片,同时淡入下一张图片,营造出平滑的滚动效果。 在实际项目中,为了使代码更加健壮和适应性强,我们还可以...

    C# js 图片连续滚动代码

    在IT领域,图片连续滚动是一种常见的网页动态效果,常用于展示产品、新闻或者广告等信息。本主题聚焦于使用C#和JavaScript这两种编程语言来实现这一功能。C#通常用于后端开发,处理数据和逻辑,而JavaScript则常用于...

Global site tag (gtag.js) - Google Analytics