这是一个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>




