原创JQuery扩展函数－实现内容无缝滚动（兼容所有浏览器）

最新推荐文章于 2019-04-29 22:21:00 发布

iteye_20309

最新推荐文章于 2019-04-29 22:21:00 发布

阅读量133

点赞数

文章标签：浏览器 jQuery IE JavaScript HTML ViewUI

　相信大家和我一样都曾为一个网上随处可见的内容无缝滚动特效头疼过吧，因为JS在各个浏览器中的兼容性不同，大量的开发时间在不断的F5刷新中度过了。有了我这段原创代码你就再也不必头疼了，因为它可以兼容IE6/IE7/IE8/FF这些浏览器（现只测试过这４种内核的浏览器）。

　　这段代码是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]

使用实例１：普通无缝滚动
[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]

使用实例２：间隔式无缝滚动
[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]

稍微修改了一下如果内容不满则不复制第二个层也不滚动
因为权限不够就先跟帖回复在这了

/*****************************************************
函数功能：扩展jQuery方法scrollStart()开始内容滚动。
创建时间：2011年2月20日
修改时间：2011年2月20日
创建人员：李俊杰
参数说明：speed指滚动速度，隐藏参数二指定间隔滚动速度
*****************************************************/
jQuery.fn.extend({

scrollStart : function (speed){
if(this.height() < this.children().first().height()){
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);
});
}
}
})

iteye_20309

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原创JQuery扩展函数－实现内容无缝滚动（兼容所有浏览器）

　相信大家和我一样都曾为一个网上随处可见的内容无缝滚动特效头疼过吧，因为JS在各个浏览器中的兼容性不同，大量的开发时间在不断的F5刷新中度过了。有了我这段原创代码你就再也不必头疼了，因为它可以兼容IE6/IE7/IE8/FF这些浏览器（现只测试过这４种内核的浏览器）。　　这段代码是JQuery库的扩展函数，用普通的JavaScript代码也可以实现，做成JQuery扩展方便大家使用。　...
复制链接

扫一扫