本文目录一览：
急需一个连续不间断的跑马灯的代码
我这有个精简版的连续不间断的跑马灯的代码js的：html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
/head
body
div id=roll1 style="OVERFLOW:hidden; WIDTH:450px;"
table
tr
td id=rollleft1
table
tr
td1111111111111111/td
td2222222222222222/td
td3333333333333333/td
td4444444444444444/td
/tr
/table
/td
td id=rollright1 /td
/tr
/table
/div
table
tr
td
SCRIPT language=JavaScript type=text/JavaScript
var speed1=22
rollright1.innerHTML=rollleft1.innerHTML
function Marquee1(){
if(rollright1.offsetWidth-roll1.scrollLeft=0)
roll1.scrollLeft-=rollleft1.offsetWidth
else{
roll1.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,speed1)
roll1.onmouseover=function() {clearInterval(MyMar1)}
roll1.onmouseout=function() {MyMar1=setInterval(Marquee1,speed1)}
/SCRIPT
/td
/tr
/table
/body
/html
一行文字跑马灯怎样用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" liItem 1/li liItem 2/li liItem 3/li liItem 4/li liItem 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 duration: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 }); });
求Jquery或js一行文字跑马灯代码
这个完全是我本人自己真实项目当中的代码
其实不用js 用css3就能完成
代码如下
标签：{
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));
background-clip: text; //文字背景区域
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
-webkit-animation: slidetounlock 2s linear infinite; //动画执行的参数 第一是 动画执行的名字 第二是所需时间 第三是执行动画的快慢infinite是均速 第四个参数是循环
animation: slidetounlock 2s linear infinite;
}
为了兼容建议把写全 百分比是指动画执行到多少以后执行里面的动画
@keyframes slidetounlock{
0% {
background-position: -2rem 0;
}
80% {
background-position: 1rem 0;
}
100% {
background-position: 2rem 0;
}
}
@-webkit-keyframes slidetounlock{
0% {
background-position: -2rem 0;
}
80% {
background-position: 1rem 0;
}
100% {
background-position: 2rem 0;
}
}
@-moz-keyframes slidetounlock{
0% {
background-position: -1.1rem 0;
}
80% {
background-position: 1rem 0;
}
100% {
background-position: 1.1rem 0;
}
}
@-ms-keyframes slidetounlock{
0% {
background-position: -1.1rem 0;
}
80% {
background-position: 1rem 0;
}
100% {
background-position: 1.1rem 0;
}
}
@-o-keyframes slidetounlock{
0% {
background-position: -1.1rem 0;
}
80% {
background-position: 1rem 0;
}
100% {
background-position: 1.1rem 0;
}
}
之后你只需要设置文字所在容器的宽度就行，用px可以代替rem；可根据自己的需求来修改
最后效果就是
白色会一直从左到右 有点像早期苹果滑动解锁的那种动画，这个可以根据实际需求来修改
