Ajax调用xml文件循环显示的脚本

2010-02-22 18:02:55 作者:http://www.dynamicdrive.com 来源:查看 | 【

这是一个Ajax增强代码的脚本,可以在外部文件内定义要显示的代码(支持HTML),通过ajax方式调用到网页进行循环显示,用户可以自己定义显示的内容的条数和切换频率,外部文件以类似于xml格式的文本文件存在,此外,请注意,由于ajax限制,脚本和文本文件必须在同一个域/服务器。

查看演示页面 View Demo 查看全部代码 View Code

在网页<head>区添加以下代码

<style type="text/css">

/*Example CSS for demo ticker*/

#ajaxticker1{
width: 200px;
height: 100px;
border: 1px ridge black;
padding: 5px;
background-color: #FEEEB8;
}

#ajaxticker1 div{ /*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/
background-color: #FEEEB8;
}

.someclass{ //class to apply to your scroller(s) if desired
}

</style>

<script src="ajaxticker.js" type="text/javascript"></script>


其中引用了脚本文件ajaxticker.js,请先下载保存

在网页<body>区添加以下代码

<script type="text/javascript">

var xmlfile="tickercontent.txt" //path to ticker txt file on your server.

//ajax_ticker(xmlfile, divId, divClass, delay, optionalfadeornot)
new ajax_ticker(xmlfile, "ajaxticker1", "someclass", [3500], "fade")
</script>


其中xmlfile为要调用的内容文本文件地址,如果你想定义为绝对地址,可以使用下面这种方式定义:
var xmlfile=="http://"+window.location.hostname+"/subdir/tickercontent.txt"

函数 ajax_ticker() 用来在页面上显示内容
ajax_ticker(xmlfile, divId, divClass, [delay], optionalfadeornot)


其中:
"divId" 是一个任意的编号,但是在同一页面内不许保证唯一
"divClass" 用来定义显示样式
[delay] 是一个数组,他可以是[delay] 或者 [delay, refetchdelay]两种形式,delay表示两条内容切换间隔的时间,单位是毫秒,refetchdelay表示间隔多长时间重新读取一次xml文件
"optionalfadeornot" 表示是否允许切换过程中加入特效,值为"fade"表示允许,去除表示不允许

例如:
new ajax_ticker(xmlfile, "ajaxticker1", "someclass", [3500], "fade") //每隔3.5秒切换一次

new ajax_ticker(xmlfile, "ajaxticker1", "someclass", [3500, 60000], "fade") //每隔3.5秒切换一次,每隔一分钟重新加载xml文件


"tickercontent.txt" 文件的格式
<div>
<div class="message">
<a href="http://www.javascriptkit.com" target="_new">JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!
</div>

<div class="message">
<a href="http://www.codingforums.com">Coding Forums 2</a><br />Web coding and development forums.
</div>

<div class="message">
<a href="http://www.cssdrive.com">CSS Drive</a><br />Categorized CSS gallery and examples.
</div>
</div>

下载"Ajax调用xml文件循环显示的脚本"

  • 本地下载
  • 本地下载2

相关资源