js標題跑馬燈,跑馬燈js代碼

本文目錄一覽：

• 1、一行文字跑馬燈怎樣用Jquery或js做？
• 2、js怎麼實現標題跑馬燈功能？
• 3、jquery跑馬燈效果

一行文字跑馬燈怎樣用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    });  });  

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

jquery跑馬燈效果

要實現簡單的跑馬燈效果其實運用html中marquee/marquee標籤就可以達到了

基本屬性如下：

1.滾動方向direction（包括4個值：up、 down、 left和 right）

2.滾動方式behavior（scroll:循環滾動，默認效果； slide:只滾動一次就停止； alternate:來回交替進行滾動）

3.滾動速度scrollamount（滾動速度是設置每次滾動時移動的長度，以像素為單位）

4.滾動延遲scrolldelay（設置滾動的時間間隔，單位是毫秒）

5.滾動循環loop（默認值是-1，滾動會不斷的循環下去）

6.滾動範圍width、height

7.滾動背景顏色bgcolor

8.空白空間hspace、vspace

如果想要更多的動畫效果，更多選擇jquery.marquee.js這款插件——ul里的啥都能滾並自帶懸停效果

1.html 中寫入ul id=”marquee”li/li/ul

2.js中調入$(“#marquee”).marquee();即可

3.css比較簡單，一般自己寫，大致如下：

ul.marquee{display:block;line-height:1;position:relative;overflow:hidden;width:400px;height:22px;}

ul.marquee li{ position:absolute;top:-999em;left:0; display:block; white-space:nowrap ;padding:3px5px;text-indent:0.8em;}

4.相關參數如下：

{

yScroll:”top”;  // 初始滾動方向 (還可以是”top” 或 “bottom”)

showSpeed:850;  // 初始下拉速度

scrollSpeed:12;  // 滾動速度

pauseSpeed:5000;  // 滾動完到下一條的間隔時間

pauseOnHover:true;  // 鼠標滑向文字時是否停止滾動

loop:-1;  // 設置循環滾動次數 （-1為無限循環）

fxEasingShow:”swing”;  // 緩衝效果

fxEasingScroll:”linear”;  // 緩衝效果

cssShowing:”marquee-showing”;  //定義class event handlers

init:null;  // 初始調用函數

beforeshow:null;  // 滾動前回調函數

show:null;  // 當新的滾動內容顯示時回調函數

aftershow:null;  // 滾動完了回調函數

}