滚动经典最新话题[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 相关文章推荐
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
图片自动更新(说明)
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与MySQL交互使用详解
2006/10/09 PHP
PHP脚本数据库功能详解(下)
2006/10/09 PHP
精通php的十大要点(上)
2009/02/04 PHP
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
php学习之 数组声明
2011/06/09 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
Python正则简单实例分析
2017/03/21 Python
Python合并多个Excel数据的方法
2018/07/16 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
恶搞卫生巾广告词
2014/03/18 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
教室标语大全
2014/06/21 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
政风行风整改报告
2014/11/06 职场文书
教师节简报
2015/07/20 职场文书