滚动经典最新话题[prototype框架]下编写


Posted in Javascript onOctober 03, 2006

前天见到sin100看到的那个日本网站的滚动,挖掘后原来是使用Ajax读取xml后显示出来的。

就弄了这个滚动经典最新话题的供朋友参考参考。
范例使用了prototype.js的ajax轻便型框架。
因为远程调用了 prototype.js 这个文件,测试的朋友请耐心等候一下下。

经典不允许远程调用别的站点的js文件,所以还请多一部操作,复制到本地运行查看结果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" > 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
    <meta name="author" content="Smiling Dolphin" /> 
    <meta name="keywords" content="design, css, cascading, style, sheets, xhtml, graphic design, w3c, web standards, visual, display, java, javascript, c++, php, jsp, asp, py, pl" /> 
    <meta name="description" content="my favorites language." /> 
    <meta name="robots" content="all" /> 
    <title>Dolphin Document</title>     <style type="text/css" title="currentStyle" media="screen"> 
        #scroll{width:99%;height:25px;border:1px solid #2BBB00;background:#E7FFE0;overflow:hidden;} 
        #scrollFrame,#scrollFrame2{line-height:25px;font-size:13px; word-break:keep-all;line-break:normal; white-space:nowrap;} 
        #scrollFrame span,#scrollFrame2 span{display:inline;margin-right:20px;} 
    </style> 
    <script src="http://prototype.conio.net/dist/prototype-1.4.0.js" type="text/javascript"></script> 
</head> 
<body> 
<div id="scroll"> 
    <div id="scrollFrame"></div> 
    <div id="scrollFrame2"></div> 
</div> 
<script language="javascript" type="text/javascript"> 
var Ticker = Class.create(); 
Ticker.prototype = { 
    initialize: function() { 
        try{ 
        this.scrollType = "normal"; 
        this.m_scroll = $(arguments[0]); 
        this.m_scroll_1 = $(arguments[1]); 
        this.m_scroll_2 = $(arguments[2]); 
        this.m_speed = (arguments[3][0])?arguments[3][0]:3; 
        this.m_request = (arguments[3][1])?arguments[3][1]:60; 
        this.m_loop = (arguments[3][2])?arguments[3][2]:0.05; 
        this.m_url = (arguments[3][3])?arguments[3][3]:'http://bbs.blueidea.com/rss.php?fid=1'; 
        }catch(e){} 
        finally{} 
        Event.observe(this.m_scroll, 'mouseover', this.mouseover.bindAsEventListener(this), false); 
        Event.observe(this.m_scroll, 'mouseout',  this.mouseout.bindAsEventListener(this), false); 
        new PeriodicalExecuter(this.scroll.bindAsEventListener(this), this.m_loop); 
        new PeriodicalExecuter(this.load.bindAsEventListener(this),   this.m_request); 
        this.load(); 
    }, 
    load:function(){ 
        var request = new Ajax.Request( 
          this.m_url, 
          { 
            method:    'post', 
            onSuccess: this.update.bindAsEventListener(this), 
            onFailure: false, 
            on304:     false 
          } 
        ); 
    }, 
    update:function(request){ 
        var items = request.responseXML.getElementsByTagName("item"); 
        for(var i=0;i<items.length;i++){ 
            var title = items[i].childNodes[0].childNodes[0].nodeValue; 
            var link = items[i].childNodes[1].childNodes[0].nodeValue; 
            var description = items[i].childNodes[2].childNodes[0].nodeValue; 
            var author = items[i].childNodes[4].childNodes[0].nodeValue; 
            this.m_scroll_1.innerHTML += "<span><a href=\""+link+"\" title=\""+author+":\r\n"+description+"\">"+i+":"+title+"</a></span>"; 
        } 
        this.m_scroll_2.innerHTML = this.m_scroll_1.innerHTML; 
    }, 
    scroll:function(event){ 
        switch(this.scrollType){ 
            case "slow": 
                if(this.m_scroll_2.offsetWidth-this.m_scroll.scrollLeft<=0){ 
                    this.m_scroll.scrollLeft -= this.m_scroll_1.offsetWidth; 
                }else{ 
                    this.m_scroll.scrollLeft++; 
                } 
            break; 
            case "normal": 
            default: 
                if(this.m_scroll_2.offsetWidth-this.m_scroll.scrollLeft<=0){ 
                    this.m_scroll.scrollLeft -= this.m_scroll_1.offsetWidth; 
                }else{ 
                    this.m_scroll.scrollLeft+=3; 
                } 
            break; 
        } 
    }, 
    mouseover:function(){ 
        this.scrollType = 'slow'; 
        return false; 
    }, 
    mouseout:function(){ 
        this.scrollType = 'normal'; 
        return false; 
    } 
} 
ticker1  = new Ticker("scroll","scrollFrame","scrollFrame2",[3,60,0.05,'http://bbs.blueidea.com/rss.php?fid=1']); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
禁止js文件缓存的代码
Apr 09 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
浅谈js中的this问题
Aug 31 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
图片自动更新(说明)
Oct 02 #Javascript
在线游戏大家来找茬II
Sep 30 #Javascript
静态页面的值传递(三部曲)
Sep 25 #Javascript
关于Blog顶部的滚动导航条代码
Sep 25 #Javascript
初学prototype,发个JS接受URL参数的代码
Sep 25 #Javascript
浅谈JavaScript中面向对象技术的模拟
Sep 25 #Javascript
理解JavaScript中的事件
Sep 23 #Javascript
You might like
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
JavaScript适配器模式详解
2017/10/19 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
layui的select联动实现代码
2019/09/28 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
深入解析Python中函数的参数与作用域
2016/03/20 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
django之session与分页(实例讲解)
2017/11/13 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
详解pandas赋值失败问题解决
2020/11/29 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
公司担保书范文
2014/05/21 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
旷工检讨书1000字
2015/01/01 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS