js走馬燈怎麼寫,js跑馬燈效果展示

本文目錄一覽：

• 1、一行文字跑馬燈怎樣用Jquery或js做？
• 2、javascript 怎樣寫了，我想在DM2004中寫跑馬燈（要求是跑動過程中沒有後面的白的空白，）
• 3、用js 實現走馬燈效果,橫向的怎麼實現?縱向的又是怎麼實現的?
• 4、求Jquery或js一行文字跑馬燈代碼
• 5、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    });  });  

javascript 怎樣寫了，我想在DM2004中寫跑馬燈（要求是跑動過程中沒有後面的白的空白，）

說一下思路，

marquee scrollamount=”2″ width=”100%” onmouseover=”stop()” onmouseout=”start()”流風，飄然的風 作品/marquee

這段跑馬燈從右往左滾動，在左邊消失後再次循環。

樓主要的效果是右邊內容一出完就開始循環而不是等到在左邊消失右邊的才出來吧？

從右到左循環的效果用marquee標籤就可以輕鬆實現了，那麼javascript控制的就是在右邊內容跑後馬上進行第二次循環，這裡就需要判斷什麼時候右邊的內容跑完？和如何讓他進行第二次循環？

解決了這兩個問題就很容易寫代碼了。

用js 實現走馬燈效果,橫向的怎麼實現?縱向的又是怎麼實現的?

!DOCTYPE html PUBLIC “-//W3C//Dtd XHTML 1.0 Transitional//EN” “”

html xmlns=””

head

meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /

title無縫滾動/title

style type=”text/css”

img{

border:0;

height:100px; width:150px;

}

td img{

margin:0 10px;

}

/style

/head

body

!– 縱向向無縫滾動–

div id=”demo” style=”overflow:hidden;height:350px;width:200px”

div id=”demo1″

a href=”#” target=”_blank”img src=”jsfile/imagesa32/gundong_01.jpg”/ap

a href=”#” target=”_blank”img src=”jsfile/imagesa32/gundong_02.jpg”/ap

a href=”#” target=”_blank”img src=”jsfile/imagesa32/gundong_03.jpg”/ap

a href=”#” target=”_blank”img src=”jsfile/imagesa32/gundong_04.jpg”/ap

a href=”#” target=”_blank”img src=”jsfile/imagesa32/gundong_05.jpg”/ap

a href=”#” target=”_blank”img src=”jsfile/imagesa32/gundong_06.jpg”/ap

a href=”#” target=”_blank”img src=”jsfile/imagesa32/gundong_07.jpg”/ap

a href=”#” target=”_blank”img src=”jsfile/imagesa32/gundong_08.jpg”/ap

a href=”#” target=”_blank”img src=”jsfile/imagesa32/gundong_10.jpg”/ap

a href=”#” target=”_blank”img src=”jsfile/imagesa32/gundong_11.jpg”/ap

/div

div id=”demo2″

/div

/div

script

var speed=40;

var demo2=document.getElementById(“demo2”);

var demo1=document.getElementById(“demo1”);

var demo=document.getElementById(“demo”);

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetTop-demo.scrollTop=0)

demo.scrollTop-=demo1.offsetHeight;

else{

demo.scrollTop++;

}

}

var MyMar=setInterval(Marquee,speed);

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

/script

!– 橫向無縫滾動–

div style=”margin-top:20px;”

div id=”scroll_div” style=”overflow: hidden; WIDTH: 778px;” align=center

table border=”0″ cellpadding=”0″ cellspacing=”0″

tr

td id=”scroll_begin”

a href=”#”img src=”jsfile/imagesa32/gundong_11.jpg” border=0/aa href=”#”img src=”jsfile/imagesa32/gundong_01.jpg” border=0/aa href=”#”img src=”jsfile/imagesa32/gundong_02.jpg” border=0/aa href=”#”img src=”jsfile/imagesa32/gundong_03.jpg” border=0/aa href=”#”img src=”jsfile/imagesa32/gundong_04.jpg” border=0/aa href=”#”img src=”jsfile/imagesa32/gundong_05.jpg” border=0/aa href=”#”img src=”jsfile/imagesa32/gundong_06.jpg” border=0/aa href=”#”img src=”jsfile/imagesa32/gundong_07.jpg” border=0/a/td

td id=”scroll_end”/td

/tr

/table

/div/div

script

var speed1=40

var scroll_end = document.getElementById(“scroll_end”);

var scroll_div = document.getElementById(“scroll_div”);

scroll_end.innerHTML=scroll_begin.innerHTML

function Marquee1(){

if(scroll_end.offsetWidth-scroll_div.scrollLeft=0)

scroll_div.scrollLeft-=scroll_begin.offsetWidth

else{

scroll_div.scrollLeft++

}

}

var MyMar1=setInterval(Marquee1,speed1)

scroll_div.onmouseover=function() {clearInterval(MyMar1)}

scroll_div.onmouseout=function() {MyMar1=setInterval(Marquee1,speed1)}

/script

/body

/html

求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 PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”

html xmlns=””

head

titlejavascript無縫滾動/title

meta charset=”gb2312″/

style type=”text/css”

#marquee ,#marquee li { padding:0px; margin:0px;}

#marquee { position:relative; list-style:none; height:150px; width:210px; padding-left:5px; overflow:hidden; border:10px solid #eee; }

#marquee li { position:absolute; font-size:12px;}

#marquee a { display:block; color:#999999; text-decoration:none;}

/style

script type=”text/javascript”

var Marquee = function(id){

try{document.execCommand(“BackgroundImageCache”, false, true);}catch(e){};

var container = document.getElementById(id),

slide = container.getElementsByTagName(“li”)[0],

speed = arguments[1] || 80, //速度

delta = 0,//當前滾動的位置

critical = slide.offsetHeight;//臨界點

slide.innerHTML += slide.innerHTML;

var rolling = function(){

delta == -critical ? delta = 0 : delta–;

slide.style.top = delta + “px”;

}

var timer = setInterval(rolling,speed)//設置定時器

container.onmouseover=function() {clearInterval(timer)}//鼠標移到marquee上時，清除定時器，停止滾動

container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠標移開時重設定時器

}

window.onload = function(){

Marquee(“marquee”);

}

/script

/head

body

ul id=”marquee”

li

a href=”#”纖雲弄巧，飛星傳恨，銀漢迢迢暗度。/abr /

a href=”#”金風玉露一相逢，便勝卻、人間無數。/abr /

a href=”#”柔情似水，佳期如夢。忍顧鵲橋歸路！/abr /

a href=”#”兩情若是久長時，又豈在、朝朝暮暮。/abr /

a href=”#”千重劫，百世難，亘古匆匆，彈指間！/abr /

a href=”#”不死軀，不滅魂，震古爍今，無人敵！/abr /

a href=”#”待到陰陽逆亂時，以我魔血染青天！/abr /

/li

/ul

/body

/html