`
zhans52
  • 浏览: 35780 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

YUI下改造的滚动效果

YUI 
阅读更多

       公司最新项目使用YUI,正好有一个图片滚动功能,之前从网上找了一段代码,用可以倒是可以用,但是会不停的创建图片链接或者div,发送图片请求,对服务造成压力,所以改造成如下:

 

AP.widget.ScrollBox=new AP.Class({
            scrollBox:null,//滚动区域div
            scrollBoxHeight:null,//一次滚动高度
            scrollCol:0,
            scrolln:0,
            setTimeOut:20,//数值越大移动越快
            addTimeOut:3000,//移动完一次后停留间隔
            space:1,//一次移动距离,
            size:3,//滚切区数目,默认为3条在滚动
            initialize:function(_arg){
                if(_arg.scrollBox){
                    this.scrollBox=_arg.scrollBox;
                    this.scrollBoxHeight = this.scrollBox.clientHeight;
                    this.scrollBox.innerHTML += this.scrollBox.innerHTML;
                     this.addScroll();
                }
                if(_arg.setTimeOut){this.setTimeOut=_arg.setTimeOut;}
                if(_arg.addTimeOut){this.addTimeOut=_arg.addTimeOut;}
                if(_arg.space){this.setTimeOut=_arg.space;}
                if(_arg.size){this.size=_arg.size;}
            },
            setScroll:function(){
                 this.scrollBox.scrollTop = this.scrollCol + this.scrolln;
                 if(this.scrolln==this.scrollBoxHeight) return this.addScroll()
                else    this.scrolln +=this.space;
                var o = this;
                function m(){o.setScroll();}
                setTimeout(m,this.setTimeOut);
            },
            addScroll:function () {
                if(this.scrollBox.scrollTop>=this.scrollBoxHeight*this.size)
                 this.scrollBox.scrollTop=0;
                this.scrollCol = this.scrollBox.scrollTop;
                this.scrolln = 0;
                var o = this;
                function m(){o.setScroll();}
                setTimeout(m,this.addTimeOut);
             }
        });

 

欢迎讨论@@ 希望下次能扩充到左右移动

分享到:
评论

相关推荐

    yui3-master.zip

    在“yui3-master.zip”中,我们可以看到不同模块的源代码文件,如“build”目录下的“node”, “event”, “dom”等,这些都是YUI3的核心模块。 2. **事件系统** YUI3的事件系统是其强大功能之一,它允许开发者...

    yuicompressor-yui compressor

    将yuicompressor-2.4.2.jar 放在c:下,将editor.js放在c:盘下。 将editor.js进行压缩 命令为: C:\java -jar yuicompressor-2.4.2.jar editor.js -o editor2.js 参数说明: yuicompressor-2.4.2.jar 为工具包...

    yui 资源包

    《深入理解YUI 3.9.0 r2:界面设计与资源优化》 YUI,全称为Yahoo! User Interface Library,是由雅虎公司开发的一个开源JavaScript库,它旨在简化Web应用程序的构建,特别是对于界面设计和交互效果的实现。在3.9.0...

    yui.rar 例子

    《深入理解YUI:基于“yui.rar 例子”的解析》 YUI,全称Yahoo! User Interface Library,是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、易于维护的网页应用。本篇文章将结合“yui.rar 例子”...

    YUI3.6文档及示例

    4. **样式与动画**:YUI3.6包含了CSS类操作和动画效果的实现,可以轻松实现复杂的页面过渡和动画效果。 5. **数据管理**:提供了数据存储和模型层管理,方便在客户端进行数据操作和同步。 6. **用户界面组件**:...

    YUI-EXT使用详解

    5. **Ajax交互(Ajax Interactions)**:YUI-EXT集成了YUI的Ajax功能,允许在不刷新页面的情况下与服务器进行异步通信。这使得用户界面能够实时更新,提高了用户体验。 6. **工具提示(Tooltips)**:YUI-EXT还提供...

    【YUI组件】基于YUI的表单验证器

    1. **YUI库**:了解YUI的基本结构、模块化设计和如何引入到项目中,是使用YUI表单验证器的前提。 2. **表单验证**:表单验证的常见规则包括非空检查、长度限制、格式验证(如邮箱、电话号码等)和自定义验证函数。 3...

    yuicompressor-2.4.8.jar

    2.4.8是其一个稳定版本,提供了更可靠的压缩效果和兼容性。 yuicompressor的核心功能在于代码压缩。对于JavaScript文件,它通过消除不必要的字符,如换行符、空格和注释,以及通过短变量名替换长变量名,达到减小...

    yui_2.9.0前端UI

    YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...

    YAHOO yui2.7 文档+ 代码+例子

    - **动画效果**:YUI的动画模块允许开发者创建复杂的动画效果,包括平滑的渐变、缩放、旋转等,增强了用户体验。 - **Ajax通信**:YUI的Ajax组件支持异步与服务器进行数据交换,实现无刷新页面更新。 **2. YUI的可...

    yui_2.6.0r2

    YUI 2.6.0r2版本在当时的JavaScript社区中占有重要地位,它提供了大量的可重用模块,涵盖了DOM操作、事件处理、动画效果、Ajax交互、CSS样式管理、数据处理等多个领域。这个版本修复了之前的一些已知问题,增强了...

    《YUI使用文档》汉语版的yui学习材料

    《YUI使用文档》汉语版是一份详细的YUI学习材料,它涵盖了这个JavaScript库的核心功能和使用方法。YUI,全称Yahoo! User Interface Library,是Yahoo开发的一个开放源代码的JavaScript库,旨在帮助开发者创建交互式...

    YUI JS CSS 打包工具

    开发者可以选择适合自己的版本,一般来说,新版本可能包含更多优化和修复,但老版本在某些特定环境下可能更稳定。 yuicompressor.reg 文件可能是注册表导入文件,用于将YUI压缩器相关的设置添加到Windows注册表中,...

    YUI.rar_html_javascript YUI_yui_yui javascript

    7. **AJAX**:YUI的AJAX组件支持异步数据交换,使得网页可以在不刷新的情况下更新内容。 8. **动画效果**:YUI的Anim模块可以创建复杂的动画效果,增强了用户体验。 **YUI的示例** 压缩包中的示例文件展示了如何...

    YUI3.7.3 最新版本 带API

    4. **DOM操作**:YUI3提供了丰富的DOM操作接口,如查找元素(YUI.one, YUI.all)、创建和修改元素、以及动画效果等。 5. **IO模块**:YUI3的IO模块支持Ajax请求,包括GET、POST等多种HTTP方法,以及异步请求和JSONP...

    yui_3.8.1.zip

    5. **动画效果**:内置的Anim模块支持丰富的动画效果,包括CSS属性的平滑过渡、定时器控制等,使网页动态效果更加丰富。 6. **AJAX与IO**:YUI提供了Xhr模块,支持XMLHttpRequest和JSONP请求,实现异步数据交互,...

    yuitest YUI测试工具

    YUI Test is a complete testing framework for JavaScript and Web applications. You can use the simple JavaScript syntax to write unit tests that can be run in web browsers or on the command line, as ...

    一些关于YUI的资源

    3. **事件处理**:YUI的事件系统支持事件委托、事件捕获/冒泡,以及跨浏览器的事件处理,确保在各种环境下都能正常工作。这对于基于用户交互的Ajax应用来说尤为重要。 4. **Ajax支持**:YUI包含了Ajax组件,可以...

    YUI2 库与例子都有了

    在压缩包中的"yui_2.8.0r4"目录下,你可能会找到以下文件结构: - `build/`:包含了编译后的YUI库文件,包括压缩和未压缩版本,通常用于生产环境。 - `docs/`:YUI的文档资料,帮助开发者理解和使用各个组件。 - `...

    YUI类库2.9.0下载download

    YUI 2 is a JavaScript and CSS library with more than 30 unique components including low-level DOM utilities and high-level user-interface widgets. Currently at version 2.9.0, YUI 2 is robust, proven, ...

Global site tag (gtag.js) - Google Analytics