搜索
您的当前位置:首页正文

jQuery实现模拟marquee标签效果_jquery

2023-12-05 来源:优库美食网
Marquee

模仿IE下面的marquee效果,鼠标移上去暂停。形成环的主要原理在于每张图片一旦判断出了外面的显示窗口就添加到尾部,用append和prepend模拟数组的push()和shift()。

代码如下:

HTML

模拟marquee标签效果的简单实现

JavaScript

详细下载见https://github.com/codetker/myMarquee

以上所述就是本文的全部内容了,希望大家能够喜欢。

小编还为您整理了以下内容,可能对您也有帮助:

jquery跑马灯效果

要实现简单的跑马灯效果其实运用html中<marquee></marquee>标签就可以达到了

基本属性如下:

1.滚动方向direction(包括4个值:up、 down、 left和 right)

2.滚动方式behavior(scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动)

3.滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度,以像素为单位)

4.滚动延迟scrolldelay(设置滚动的时间间隔,单位是毫秒)

5.滚动循环loop(默认值是-1,滚动会不断的循环下去)

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

如果想要更多的动画效果,更多选择jquery.marquee.js这款插件——ul里的啥都能滚并自带悬停效果

1.html 中写入<ul id="marquee"><li></li></ul>

2.js中调入$("#marquee").marquee();即可

3.css比较简单,一般自己写,大致如下:

ul.marquee{display:block;line-height:1;position:relative;overflow:hidden;width:400px;height:22px;}

ul.marquee li{ position:absolute;top:-999em;left:0; display:block; white-space:nowrap ;padding:3px5px;text-indent:0.8em;}

4.相关参数如下:

{

yScroll:"top";  // 初始滚动方向 (还可以是"top" 或 "bottom")

showSpeed:850;  // 初始下拉速度

scrollSpeed:12;  // 滚动速度

pauseSpeed:5000;  // 滚动完到下一条的间隔时间

pauseOnHover:true;  // 鼠标滑向文字时是否停止滚动

loop:-1;  // 设置循环滚动次数 (-1为无限循环)

fxEasingShow:"swing";  // 缓冲效果

fxEasingScroll:"linear";  // 缓冲效果

cssShowing:"marquee-showing";  //定义class event handlers

init:null;  // 初始调用函数

beforeshow:null;  // 滚动前回调函数

show:null;  // 当新的滚动内容显示时回调函数

aftershow:null;  // 滚动完了回调函数

}

基于jQuery实现一个marquee无缝滚动的插件

基于jQuery,实现一个marquee无缝滚动的插件,已经发布到
git.oschina.net,演示稍后更新(更新到
http://git.oschina.net/mqycn/jQueryMarquee
)。
代码如下:
/**
*
类库名称:jQuery.marquee
*
实现功能:基于
jquery
实现的
marquee
无缝滚动插件
*
作者主页:http://www.miaoqiyuan.cn/
*
联系邮箱:mqycn@126.com
*
使用说明:http://www.miaoqiyuan.cn/p/jquery-marquee
*
最新版本:http://git.oschina.net/mqycn/jQueryMarquee
*/
jQuery.fn.extend({
marquee
:
function(opt,
callback){
opt
=
opt
||
{};
opt.speed
=
opt.speed
||
30;
opt.direction
=
opt.direction
||
'left';
opt.pixels
=
opt.pixels
||
2;
switch(
opt.direction
){
case
"left":
case
"right":
opt.weight
=
"width";
opt.margin
=
"margin-left";
opt.tpl
=
'<table><tr><td>[TABLE]</td><td>[TABLE]</td></tr></table>';
break;
case
"top":
case
"bottom":
opt.weight
=
"height";
opt.margin
=
"margin-top";
opt.tpl
=
'<table><tr><td>[TABLE]</td></tr></tr><td>[TABLE]</td></tr></table>';
break;
default:
throw
Error("[jQuery.marquee.js]
Options.direction
Error!");
}
switch(
opt.direction
){
case
"left":
case
"top":
opt.addon
=
-1;
break;
case
"right":
case
"bottom":
opt.addon
=
1;
break;
default:
throw
Error("[jQuery.marquee.js]
Options.direction
Error!");
}
callback
=
typeof
callback
==
"function"
?
callback
:
function(){};
//设置宽度
$(this).each(function(){
if(
this.control
){
clearInterval(this.control);
}
else
{
//如果第一次执行,初始化代码
$(this)
.data(opt.weight,
opt.weight
==
'width'
?
$(this).find("table").width()
:
$(this).find("table").height())
.width($(this).data(opt.weight)
*
2)
.html(opt.tpl.replace(/\[TABLE\]/ig,
$(this).html()))
.mouseover(function(){
$(this).data("pause",
true);
}).mouseout(function(){
$(this).data("pause",
false);
});
}
this.control
=
setInterval((function(){
if(
$(this).data("pause")
){
return;
}
var
_margin
=
parseInt($(this).css(opt.margin))
+
opt.addon
*
opt.pixels;
if(
opt.addon
==
-1
&&
_margin
+
$(this).data(opt.weight)
<
0
){
_margin
=
0;
}else
if(
opt.addon
==
1,
_margin
>
0
){
console.log(_margin
<
0,$(this).data(opt.weight));
_margin
=
-1
*
$(this).data(opt.weight);
}
$(this).css(opt.margin,
_margin
+
"px");
callback.bind(this)();
}).bind(this),
opt.speed);
});
return
$(this);
}
});
如果在IE9以下使用,还需要在之前增加如下代码:
/**
*
IE8插件(解决
function
不支持
bind
的问题),非原创
*/
if
(!Function.prototype.bind)
{
Function.prototype.bind
=
function(oThis)
{
if
(typeof
this
!==
"function")
{
throw
new
TypeError("[jQuery.marquee.ie8]
Caller
is
not
a
function");
}
var
aArgs
=
Array.prototype.slice.call(arguments,
1),
fToBind
=
this,
fNOP
=
function()
{},
fBound
=
function()
{
return
fToBind.apply(this
instanceof
fNOP
&&
oThis
?
this
:
oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype
=
this.prototype;
fBound.prototype
=
new
fNOP();
return
fBound;
};
}
一共有三个可选参数,一个回调方法。
direction,移动方向:支持
左:left
右:right
上:top
下:bottom;
pixels,每次移动的像素数
speed,两次移动之前的间隔时间数(毫秒)
调用方法如下:
$("scroll-a").marquee();
$("scroll-b").marquee({direction:'top'});
$("scroll-c").marquee({direction:'top',pixels:2,speed:30});
$("scroll-d").marquee({direction:"top",pixels:2,speed:30},
function(){
console.log("执行了一次");
});
以上所述是小编给大家介绍的基于jQuery实现一个marquee无缝滚动的插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

基于jQuery实现一个marquee无缝滚动的插件

基于jQuery,实现一个marquee无缝滚动的插件,已经发布到
git.oschina.net,演示稍后更新(更新到
http://git.oschina.net/mqycn/jQueryMarquee
)。
代码如下:
/**
*
类库名称:jQuery.marquee
*
实现功能:基于
jquery
实现的
marquee
无缝滚动插件
*
作者主页:http://www.miaoqiyuan.cn/
*
联系邮箱:mqycn@126.com
*
使用说明:http://www.miaoqiyuan.cn/p/jquery-marquee
*
最新版本:http://git.oschina.net/mqycn/jQueryMarquee
*/
jQuery.fn.extend({
marquee
:
function(opt,
callback){
opt
=
opt
||
{};
opt.speed
=
opt.speed
||
30;
opt.direction
=
opt.direction
||
'left';
opt.pixels
=
opt.pixels
||
2;
switch(
opt.direction
){
case
"left":
case
"right":
opt.weight
=
"width";
opt.margin
=
"margin-left";
opt.tpl
=
'<table><tr><td>[TABLE]</td><td>[TABLE]</td></tr></table>';
break;
case
"top":
case
"bottom":
opt.weight
=
"height";
opt.margin
=
"margin-top";
opt.tpl
=
'<table><tr><td>[TABLE]</td></tr></tr><td>[TABLE]</td></tr></table>';
break;
default:
throw
Error("[jQuery.marquee.js]
Options.direction
Error!");
}
switch(
opt.direction
){
case
"left":
case
"top":
opt.addon
=
-1;
break;
case
"right":
case
"bottom":
opt.addon
=
1;
break;
default:
throw
Error("[jQuery.marquee.js]
Options.direction
Error!");
}
callback
=
typeof
callback
==
"function"
?
callback
:
function(){};
//设置宽度
$(this).each(function(){
if(
this.control
){
clearInterval(this.control);
}
else
{
//如果第一次执行,初始化代码
$(this)
.data(opt.weight,
opt.weight
==
'width'
?
$(this).find("table").width()
:
$(this).find("table").height())
.width($(this).data(opt.weight)
*
2)
.html(opt.tpl.replace(/\[TABLE\]/ig,
$(this).html()))
.mouseover(function(){
$(this).data("pause",
true);
}).mouseout(function(){
$(this).data("pause",
false);
});
}
this.control
=
setInterval((function(){
if(
$(this).data("pause")
){
return;
}
var
_margin
=
parseInt($(this).css(opt.margin))
+
opt.addon
*
opt.pixels;
if(
opt.addon
==
-1
&&
_margin
+
$(this).data(opt.weight)
<
0
){
_margin
=
0;
}else
if(
opt.addon
==
1,
_margin
>
0
){
console.log(_margin
<
0,$(this).data(opt.weight));
_margin
=
-1
*
$(this).data(opt.weight);
}
$(this).css(opt.margin,
_margin
+
"px");
callback.bind(this)();
}).bind(this),
opt.speed);
});
return
$(this);
}
});
如果在IE9以下使用,还需要在之前增加如下代码:
/**
*
IE8插件(解决
function
不支持
bind
的问题),非原创
*/
if
(!Function.prototype.bind)
{
Function.prototype.bind
=
function(oThis)
{
if
(typeof
this
!==
"function")
{
throw
new
TypeError("[jQuery.marquee.ie8]
Caller
is
not
a
function");
}
var
aArgs
=
Array.prototype.slice.call(arguments,
1),
fToBind
=
this,
fNOP
=
function()
{},
fBound
=
function()
{
return
fToBind.apply(this
instanceof
fNOP
&&
oThis
?
this
:
oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype
=
this.prototype;
fBound.prototype
=
new
fNOP();
return
fBound;
};
}
一共有三个可选参数,一个回调方法。
direction,移动方向:支持
左:left
右:right
上:top
下:bottom;
pixels,每次移动的像素数
speed,两次移动之前的间隔时间数(毫秒)
调用方法如下:
$("scroll-a").marquee();
$("scroll-b").marquee({direction:'top'});
$("scroll-c").marquee({direction:'top',pixels:2,speed:30});
$("scroll-d").marquee({direction:"top",pixels:2,speed:30},
function(){
console.log("执行了一次");
});
以上所述是小编给大家介绍的基于jQuery实现一个marquee无缝滚动的插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

一行文字跑马灯怎样用Jquery或js做?

使用方法:

使用该跑马灯特效之前要先引入jQuery和marquee.js文件。

<script src="jquery-1.11.2.min.js"></script> <script src="marquee.js"></script>

HTML结构:

跑马灯中的文字使用无序列表来制作,外面使用一个<div>作为包裹容器。

123456789101112    <div class="container">  <div class="marquee-sibling"> Breaking News </div>  <div class="marquee">    <ul class="marquee-content-items">      <li>Item 1</li>      <li>Item 2</li>      <li>Item 3</li>      <li>Item 4</li>      <li>Item 5</li>    </ul>  </div></div>    

CSS样式:

下面是该跑马灯特效的一些基本样式。

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354    .container {  width: 100%;  background: #4FC2E5;  float: left;  display: inline-block;  overflow: hidden;  box-sizing: border-box;  height: 45px;  position: relative;  cursor: pointer;}  .marquee-sibling {  padding: 0;  background: #3BB0D6;  width: 20%;  height: 45px;  line-height: 42px;  font-size: 12px;  font-weight: normal;  color: #ffffff;  text-align: center;  float: left;  left: 0;  z-index: 2000;}  .marquee,*[class^="marquee"] {  display: inline-block;  white-space: nowrap;  position: absolute;}  .marquee { margin-left: 25%; }  .marquee-content-items {  display: inline-block;  padding: 5px;  margin: 0;  height: 45px;  position: relative;}  .marquee-content-items li {  display: inline-block;  line-height: 35px;  color: #fff;}  .marquee-content-items li:after {  content: "|";  margin: 0 1em;}    

初始化插件:

123    $(function (){  createMarquee();});    

在页面加载完毕之后,可以通过下面的方法来初始化该跑马灯插件。

配置参数:

下面是该跑马灯特效的可用配置参数。

12345678910111213141516171819202122232425262728    $(function (){    createMarquee({          // controls the speed at which the marquee moves    ration:30000,       // right margin between consecutive marquees    padding:20,       // class of the actual div or span that will be used to create the marquee -     // multiple marquee items may be created using this item's content.     // This item will be removed from the dom    marquee_class:'.example-marquee',       // the container div in which the marquee content will animate.     container_class: '.example-container',       // a sibling item to the marqueed item  that affects -     // the end point position and available space inside the container.     sibling_class: '.example-sibling',       // Boolean to indicate whether pause on hover should is required.     hover: false    });  });    

求最新的代替marquee标签的jquery插件

你好!!

有个叫SuperSilder插件不错,可以试试····

优库美食网还为您提供以下相关内容希望对您有帮助:

jquery跑马灯效果

1.html 中写入 2.js中调入$("#marquee").marquee();即可 3.css比较简单,一般自己写,大致如下:ul.marquee{display:block;line-height:1;position:relative;overflow:hidden;width:400px;height:22px;} ul.marquee...

一行文字跑马灯怎样用Jquery或js做?

5px; margin: 0; height: 45px; position: relative;} .marquee-content-items li { display: inline-block; line-height: 35px; color: #fff;} .marquee-content-items li:after { content: "|";...

基于jQuery实现一个marquee无缝滚动的插件

类库名称:jQuery.marquee 实现功能:基于 jquery 实现的 marquee 无缝滚动插件 作者主页:http://www.miaoqiyuan.cn/ 联系邮箱:mqycn@126.com 使用说明:http://www.miaoqiyuan.cn/p/jquery-marquee 最新版本:http://...

求Jquery或js一行文字跑马灯代码

标签:{ background: -webkit-gradient(linear,left top,right top,color-stop(0, #3CAF5A),color-stop(0.3, #3CAF5A),color-stop(0.5, white),color-stop(0.7, #3CAF5A),color-stop(1, #3CAF5A));back...

HTML标签marquee实现多种滚动效果

页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - marquee/marquee可以实现多种滚动效果,无需js控制。使用marquee标记不仅可以移动文字,也可以移动图片,表格等.语法:marquee.../marquee; 说明...

表格内如何实现 marquee 滚动效果

&lt;marquee&gt;这是一个滚动示例&lt;/marquee&gt; 属性参数:direction 表示滚动的方向,值可以是 left,right,up,down,默认为 left behavior 表示滚动的方式,值可以是 scroll(连续滚动)slide(滑动一次)alternate(来回滚动)loop ...

求最新的代替marquee标签的jquery插件

你好!!有个叫SuperSilder插件不错,可以试试···

htmlmarquee标签如何实现上下滚动,marquee标签的滚动速度设置

一种是让marquee标签中的文本实现上下滚动的效果,还有一种是让marquee标签中的文本滚动的速度更快或者更慢都行。大家还能把两个合起来一起使用。现在让我们一起来看这篇文章吧首先让我们认识这个html marquee标签:这个marquee...

怎么实现marquee标签的向上无缝滚动?

function Marquee(){ if(demo2.offsetTop-demo.scrollTop&lt;=0){ demo.scrollTop-=demo1.offsetHeight;} else{ demo.scrollTop++;} } var MyMar=setInterval(Marquee,speed);demo.onmouseover=function() {clearInterval(...

我想给这段jQuery代码添加自动循环向上滚动效果,请高手帮忙,代码如下...

('#marquee').superMarquee(options);options distance:200,//一次滚动的距离 duration:20,//缓动效果,单次移动时间,越小速度越快,为0时无缓动效果 time:5,//停顿时间,单位为秒 direction: 'left',//滚动方向,'...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

Top