求Jquery或js一行文字跑马灯代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了求Jquery或js一行文字跑马灯代码相关的知识，希望对你有一定的参考价值。
求Jquery或js一行文字跑马灯代码 ，宽度最好不限制，能兼所有浏览器！~
要求：一行文字从右往左，无缝滚动。！~
急~~
不能使用<marquee 这个标签，在移动设备中是不支持这个的!~
这个完全是我本人自己真实项目当中的代码
http://1.xifan00520.applinzi.com/weixin/index.html
其实不用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；可根据自己的需求来修改
最后效果就是
白色会一直从左到右 有点像早期苹果滑动解锁的那种动画，这个可以根据实际需求来修改
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>跑马灯</title>
<style>
* font-size:12px; font-family:宋体, Arial; /*规定了所有的字体样式*/
body overflow:auto;
#mq width:220px; height:40px; line-height:20px; overflow:hidden; border:1px solid black;
#mq div position:absolute; width:220px; padding:0px 10px;
</style>
<script>
function init()
initMq($("mq"));
$("mq").start();
function initMq(obj)
var objs;
//定义跑马灯对象的自定义属性
obj.currentItem = -1;
obj.loopDelay = 50;
obj.loopItems = new Array();
obj.loopTimer = null;
obj.speedX = 2;
obj.speedY = 2;
//定义跑马灯对象的自定义方法
obj.loop = mq_loop;
obj.start = mq_startLoop;
obj.stop = mq_stopLoop;
//定义跑马灯对象的事件
obj.onmouseover = function() this.stop();
obj.onmouseout = function() this.loop();
//获取跑马灯对象的所有子元素
objs = obj.getElementsByTagName("div");
for(var i=0; i<objs.length; i++)
//在loopItems属性中记录子元素
obj.loopItems.push(objs[i]);
//自定义子元素的属性和方法
objs[i].index = i;
objs[i].move = move;
objs[i].reset = mq_reset;
//初始化子元素的状态
objs[i].reset();
function move(x, y)
this.style.left = x + "px";
this.style.top = y + "px";
function mq_loop()
var obj;
clearTimeout(this.loopTimer);
if(this.currentItem >= this.loopItems.length)this.currentItem = 0;
obj = this.loopItems[this.currentItem];
if(obj.offsetLeft!=this.offsetLeft)
//向左卷动
obj.move(obj.offsetLeft - this.speedX, obj.offsetTop);
else if(obj.offsetTop + obj.offsetHeight > this.offsetTop)
//向上卷动
obj.move(obj.offsetLeft, obj.offsetTop - this.speedX);
else
//重置该子元素
obj.reset();
this.currentItem++;
this.loopTimer = setTimeout("$(\""+this.id+"\").loop();", this.loopDelay);
function mq_reset()
var p = this.parentNode;
this.move(p.offsetLeft + p.offsetWidth, p.offsetTop);
function mq_startLoop()
for(var i=0; i<this.loopItems.length; i++)this.loopItems[i].reset();
this.currentItem = 0;
this.loop();
function mq_stopLoop()
clearTimeout(this.loopTimer);
function $(str) return(document.getElementById(str));
window.onload = init;
</script>
</head>
<body>
<div id="mq">
<div>
姚明在今天的比赛中拿到了22分和12个篮板球，拉斐尔-阿尔斯通拿到了17分和9次助攻，
最终火箭以92比77击败了骑士，这是他们在最近10场比赛中的第九场胜利，也是他们取得的五连胜。
赛后麦蒂说：“我们很多球员都站了出来。”
</div>
<div>
影片《大灌篮》除了在电影特技和体育主题两大方面，与当年星爷的《少林足球》堪称龙虎片，
而且此番故事中，周董和老戏骨曾志伟饰演的一段动人父子情，又与星爷前不久刚刚公映的转型大片
《长江7号》不谋而合。
</div>
</div>
</body>
</html> 参考技术B
使用方法：
使用该跑马灯特效之前要先引入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 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 ); );
参考技术C <div align="center" id="demo" style="overflow:hidden;height:200px;width:600px;border:1px solid #000;"><div id="demo1">
标准之路——DIV+CSS教程,网而布局,web2.0,常用代码,水晶图标,幻灯图片
</div>
<div id="demo2"></div>
</div>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10; //滚动速度值，值越大速度越慢
var nnn=200/demo1.offsetHeight;
for(i=0;i<nnn;i++)demo1.innerHTML+="<br />"+ demo1.innerHTML
demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1
function Marquee()
if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else
demo.scrollTop++
var MyMar = setInterval(Marquee,speed); //设置定时器
demo.onmouseover = function()clearInterval(MyMar) //鼠标经过时清除定时器达到滚动停止的目的
demo.onmouseout = function()MyMar = setInterval(Marquee,speed) //鼠标移开时重设定时器
-->
</script> 参考技术D <marquee direction="left" behavior="scroll" scrollamount="10" scrolldelay="200">
www
</marquee>追问
多谢回答，但是这个不能用的，我要在手机或ipad上运行的，需要用jq或者JS写的，并且要无缝滚动，！~
以上是关于求Jquery或js一行文字跑马灯代码的主要内容，如果未能解决你的问题，请参考以下文章