本文目錄一覽：
急需一個連續不間斷的跑馬燈的代碼
我這有個精簡版的連續不間斷的跑馬燈的代碼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；可根據自己的需求來修改
最後效果就是
白色會一直從左到右 有點像早期蘋果滑動解鎖的那種動畫，這個可以根據實際需求來修改
原創文章，作者：MTSWP，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/328926.html
微信掃一掃 
支付寶掃一掃 