js案例之跑馬燈代碼,js跑馬燈的實現

本文目錄一覽：

• 1、一行文字跑馬燈怎樣用Jquery或js做？
• 2、jquery 跑馬燈 怎麼 實現 循環
• 3、求Jquery或js一行文字跑馬燈代碼
• 4、js怎麼實現標題跑馬燈功能？
• 5、急需一個連續不間斷的跑馬燈的代碼
• 6、JS跑馬燈代碼如何實現

一行文字跑馬燈怎樣用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 跑馬燈 怎麼 實現 循環

打開 Dreamweaver

新建 HTML 文檔；

修改標題為”跑馬燈”

保存為 index.html 文件。

jquery跑馬燈 圖片不間斷滾動效果

首先，編寫跑馬燈部分的靜態 HTML 代碼，把圖片排列起來

在 body 和 /body 標籤中添加以下代碼：

div

　ul

liimg src=”img/1.jpg” //li

liimg src=”img/2.jpg” //li

liimg src=”img/3.jpg” //li

liimg src=”img/4.jpg” //li

liimg src=”img/5.jpg” //li

liimg src=”img/6.jpg” //li

liimg src=”img/7.jpg” //li

　/ul

/div

jquery跑馬燈 圖片不間斷滾動效果

給上一步的 HTML 代碼中的 div 標籤增加 class 屬性，如下：

　div class=”con”

編寫跑馬燈部分的 CSS 樣式代碼，代碼放在 head 和 /head 標籤中，如下：

style type=”text/css”

　ul{list-style:none; padding:0; margin:0;}

　.con{ width:1105px; height:225px; overflow:hidden; border:2px solid #666; margin:10px auto 0 auto; padding:5px 0 0 5px;}

　.con ul li{ float:left; margin:0 5px 10px 0;}

　.con ul li img{ display:block; width:209px; height:209px; padding:2px; border:1px solid #ccc;}

/style

jquery跑馬燈 圖片不間斷滾動效果

引入 JQuery 庫

　script type=”text/javascript” src=”jquery-1.11.0.min.js”/script

引入 Marquee 插件

　script type=”text/javascript” src=”marquee2.js”/script

代碼放在 /body 標籤前，如圖：

jquery跑馬燈 圖片不間斷滾動效果

給 div 增加 marquee 類

　div class=”con marquee”

保存文件，在瀏覽器中打開，就可以看到圖片開始滾動了。

jquery跑馬燈 圖片不間斷滾動效果

圖片默認的滾動方向是「向上滾動」

如果要修改圖片滾動的方向，可以給 div 指定 direction 屬性，屬性值可以取：

　up 上

　down 下

　left 左

　right 右

jquery跑馬燈 圖片不間斷滾動效果

完整的例子放在百度網盤中，需要的請發郵件到 xdhy_dn@foxmail.com

主題寫 「百度經驗」。自動回復下載地址

求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；可根據自己的需求來修改

最後效果就是

白色會一直從左到右 有點像早期蘋果滑動解鎖的那種動畫，這個可以根據實際需求來修改

js怎麼實現標題跑馬燈功能？

這邊百度了一個代碼，供參考

!DOCTYPE html

html

head

meta charset=”UTF-8″

titlejs跑馬燈效果/title

/head

body

div id=”txt” style=”color: white;background-color: red;text-align: center;font-size: 50px;”歡迎您的來訪！/div

script type=”text/javascript”

setInterval(function ()//通過定時器重複動作

{

var oTxt = document.getElementById(‘txt’); //獲取標籤

var txt = oTxt.innerText; //獲取標籤文本內容

var first_i = txt[0]; //字元串索引取值

var last_i = txt.slice(1,txt.length);//字元串切片

var new_txt = last_i + first_i;//字元串拼接

oTxt.innerText = new_txt; //拼接後的字元串放到標籤文本內容

},300)

/script

/body

/html

急需一個連續不間斷的跑馬燈的代碼

我這有個精簡版的連續不間斷的跑馬燈的代碼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

JS跑馬燈代碼如何實現

jquery的，參考一下吧，希望對你有幫助 ，如果有不明白的，可以追問