一行文字跑马灯怎样用Jquery或js做?
发布网友
发布时间：2022-04-24 19:36
共2个回答
热心网友
时间：2022-05-05 01:13
使用方法：
使用该跑马灯特效之前要先引入jQuery和marquee.js文件。
<script src="jquery-1.11.2.min.js"></script> <script src="marquee.js"></script>
HTML结构：
跑马灯中的文字使用无序列表来制作，外面使用一个<div>作为包裹容器。
1234567101112 <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样式：
下面是该跑马灯特效的一些基本样式。
12345671011121314151617181920212223242526272829303132333435363738394041424344454748495051525354 .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();});
在页面加载完毕之后，可以通过下面的方法来初始化该跑马灯插件。
配置参数：
下面是该跑马灯特效的可用配置参数。
123456710111213141516171819202122232425262728 $(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 }); });
热心网友
时间：2022-05-05 02:31
<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>
