滚动经典最新话题[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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
JavaScript中的其他对象
Jan 16 Javascript
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
jQuery实现本地存储
Dec 22 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 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
jQuery对象[0]是什么含义?
2010/07/31 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
js使用心得分享
2015/01/13 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
vue单元格多列合并的实现
2020/11/26 Vue.js
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
微信跳一跳python自动代码解读1.0
2018/01/12 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
小学生自我鉴定
2013/10/12 职场文书
国窖1573广告词
2014/03/21 职场文书
党员政治学习材料
2014/05/14 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
村道德模范事迹材料
2014/08/28 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
教师节大会主持词
2015/07/06 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
期中考试后的感想
2015/08/07 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js