相信大家和我一样都曾为一个网上随处可见的内容无缝滚动特效头疼过吧,因为JS在各个浏览器中的兼容性不同,大量的开发时间在不断的F5刷新中度过了。有了我这段原创代码你就再也不必头疼了,因为它可以兼容IE6/IE7/IE8/FF这些浏览器(现只测试过这4种内核的浏览器)。
这段代码是JQuery库的扩展函数,用普通的JavaScript代码也可以实现,做成JQuery扩展方便大家使用。
该函数有两种功能:普通无缝滚动、间断式无缝滚动。
该方法需要配合JQuery1.3或以上版本。
下载地址:
http://download.csdn.net/source/1568799
下面是这段扩展代码:
[code=JScrip]/*****************************************************
函数功能:扩展jQuery方法scrollStart()开始内容滚动。
创建时间:2011年2月20日
修改时间:2011年2月20日
创建人员:李俊杰
参数说明:speed指滚动速度,隐藏参数二指定间隔滚动速度
*****************************************************/
jQuery.fn.extend({
scrollStart : function (speed){
this.append("<div></div>");
this.children().last().html(this.children().first().html());
this.scrollTop(0);
function Marquee(Obj){
if(mySpeed == speed){
if(Obj.scrollTop() >= Obj.children().first().height() * 2 - Obj.height()){
Obj.scrollTop(Obj.scrollTop() - Obj.children().first().height());
}else{
Obj.scrollTop(parseInt(Obj.scrollTop()) + 1);
}
}else{
var i = 1;
var myMar_ = window.setInterval(function(){
if(Obj.scrollTop() >= Obj.children().first().height() * 2 - Obj.height()){
Obj.scrollTop(Obj.scrollTop() - Obj.children().first().height());
}else{
Obj.scrollTop(parseInt(Obj.scrollTop()) + 1);
i < Obj.height() ? i++ : clearInterval(myMar_);
}
}, speed);
}
}
var mySpeed = arguments[1]||speed;
var e = this;
var myMar = window.setInterval(function(){Marquee(e);}, mySpeed);
this.live("mouseover", function(){
clearInterval(myMar);
});
this.live("mouseout", function(){
myMar = window.setInterval(function(){Marquee(e);}, mySpeed);
});
}
})
[/code]
使用实例1:普通无缝滚动
[code=HTM]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="generator" content="【残剑·工作室】" />
<meta name="author" content="李俊杰" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<TITLE>完美兼容的无缝滚动演示</TITLE>
<script type="text/javascript" src="function/jquery.js"></script>
<STYLE type=text/css>
#demo a {
width:100%;
overflow:hidden;
font:12px/16px tahoma;
display:block;
text-decoration:none;
margin:2px;
color:#4a551c;
padding-left:2px;
text-align:left;
}
#demo a:hover {
color:#ff6600;
}
</STYLE>
</HEAD>
<body>
<div id="demo" style="overflow:hidden;height:72px;width:400px; border:1px solid #dde5bc;">
<div>
<a href="#">完全兼容IE, FF, 其它的还未经测试……</a>
<a href="#">代码是残剑原创,联系QQ232297913,希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, 其它的还未经测试……</a>
<a href="#">代码是残剑原创,联系QQ232297913,希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, 其它的还未经测试……</a>
<a href="#">代码是残剑原创,联系QQ232297913,希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, 其它的还未经测试……</a>
<a href="#">代码是残剑原创,联系QQ232297913,希望大家多提意件……</a>
</div>
</div>
<script type="text/javascript">
/*****************************************************
函数功能:扩展jQuery方法scrollStart()开始内容滚动。
创建时间:2011年2月20日
修改时间:2011年2月20日
创建人员:李俊杰
参数说明:speed指滚动速度,隐藏参数二指定间隔滚动速度
*****************************************************/
jQuery.fn.extend({
scrollStart : function (speed){
this.append("<div></div>");
this.children().last().html(this.children().first().html());
this.scrollTop(0);
function Marquee(Obj){
if(mySpeed == speed){
if(Obj.scrollTop() >= Obj.children().first().height() * 2 - Obj.height()){
Obj.scrollTop(Obj.scrollTop() - Obj.children().first().height());
}else{
Obj.scrollTop(parseInt(Obj.scrollTop()) + 1);
}
}else{
var i = 1;
var myMar_ = window.setInterval(function(){
if(Obj.scrollTop() >= Obj.children().first().height() * 2 - Obj.height()){
Obj.scrollTop(Obj.scrollTop() - Obj.children().first().height());
}else{
Obj.scrollTop(parseInt(Obj.scrollTop()) + 1);
i < Obj.height() ? i++ : clearInterval(myMar_);
}
}, speed);
}
}
var mySpeed = arguments[1]||speed;
var e = this;
var myMar = window.setInterval(function(){Marquee(e);}, mySpeed);
this.live("mouseover", function(){
clearInterval(myMar);
});
this.live("mouseout", function(){
myMar = window.setInterval(function(){Marquee(e);}, mySpeed);
});
}
})
$("#demo").scrollStart(40);
</script>
</body>
</html>[/code]
使用实例2:间隔式无缝滚动
[code=HTM]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="generator" content="【残剑·工作室】" />
<meta name="author" content="李俊杰" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<TITLE>完美兼容的无缝滚动演示</TITLE>
<script type="text/javascript" src="function/jquery.js"></script>
<STYLE type=text/css>
#demo a {
width:100%;
overflow:hidden;
font:12px/16px tahoma;
display:block;
text-decoration:none;
margin:2px;
color:#4a551c;
padding-left:2px;
text-align:left;
}
#demo a:hover {
color:#ff6600;
}
</STYLE>
</HEAD>
<body>
<div id="demo" style="overflow:hidden;height:36px;width:400px; border:1px solid #dde5bc;">
<div>
<a href="#">完全兼容IE, FF, 其它的还未经测试……</a>
<a href="#">代码是残剑原创,联系QQ232297913,希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, 其它的还未经测试……</a>
<a href="#">代码是残剑原创,联系QQ232297913,希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, 其它的还未经测试……</a>
<a href="#">代码是残剑原创,联系QQ232297913,希望大家多提意件……</a>
<a href="#">完全兼容IE, FF, 其它的还未经测试……</a>
<a href="#">代码是残剑原创,联系QQ232297913,希望大家多提意件……</a>
</div>
</div>
<div id="abc"></div>
<script type="text/javascript">
/*****************************************************
函数功能:扩展jQuery方法scrollStart()开始内容滚动。
创建时间:2011年2月20日
修改时间:2011年2月20日
创建人员:李俊杰
参数说明:speed指滚动速度,隐藏参数二指定间隔滚动速度
*****************************************************/
jQuery.fn.extend({
scrollStart : function (speed){
this.append("<div></div>");
this.children().last().html(this.children().first().html());
this.scrollTop(0);
function Marquee(Obj){
if(mySpeed == speed){
if(Obj.scrollTop() >= Obj.children().first().height() * 2 - Obj.height()){
Obj.scrollTop(Obj.scrollTop() - Obj.children().first().height());
}else{
Obj.scrollTop(parseInt(Obj.scrollTop()) + 1);
}
}else{
var i = 1;
var myMar_ = window.setInterval(function(){
if(Obj.scrollTop() >= Obj.children().first().height() * 2 - Obj.height()){
Obj.scrollTop(Obj.scrollTop() - Obj.children().first().height());
}else{
Obj.scrollTop(parseInt(Obj.scrollTop()) + 1);
i < Obj.height() ? i++ : clearInterval(myMar_);
}
}, speed);
}
}
var mySpeed = arguments[1]||speed;
var e = this;
var myMar = window.setInterval(function(){Marquee(e);}, mySpeed);
this.live("mouseover", function(){
clearInterval(myMar);
});
this.live("mouseout", function(){
myMar = window.setInterval(function(){Marquee(e);}, mySpeed);
});
}
})
$("#demo").scrollStart(40,10000);
</script>
</body>
</html>[/code]