滚动经典最新话题[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关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
微信小程序自定义底部弹出框动画
Nov 18 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抽奖小程序的实现代码
2013/06/18 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
介绍Python的Django框架中的QuerySets
2015/04/20 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
简约控的天堂:The Undone
2016/12/21 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
车间副主任岗位职责
2013/12/24 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
学生安全责任书范本
2014/07/24 职场文书
会员活动策划方案
2014/08/19 职场文书
学校联谊协议书
2014/09/16 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
客房服务员岗位职责
2015/02/09 职场文书
致运动员的广播稿
2015/08/19 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
改造DE1103三步曲
2022/04/07 无线电