導航:首頁 > 萬維百科 > 網頁設計跑馬燈樣式是什麼

網頁設計跑馬燈樣式是什麼

發布時間:2020-11-02 22:01:42

1、網頁設計中怎樣設置跑馬燈方向從下到上

你學習來一下marquee,網路自查一下就知道了。
它在網頁中這樣使用

<marquee direction="up" behavior="scroll" scrollamount="10" scrolldelay="200"> 要滾動的內容</marquee>

2、網頁製作裡面的跑馬燈效果怎樣製作滑鼠放上就停止的效果?

編寫代碼啊。<marquee onmouseover="this.stop()" onmouseout="this.start()"> </marquee>

3、網頁製作中。不熟悉代碼,如何製作圖片跑馬燈效果。或者如何設置樣式

我記得90設計上面有這種免費代碼服務 可以生成跑馬燈效果 你可以去看看

4、dreamweaver網頁製作中,怎樣實現圖片的走馬燈效果

打開 Dreamweaver
新建 HTML 文檔;
修改標題為"跑馬燈"
保存為 index.html 文件。

首先,編寫跑馬燈部分的靜態 HTML 代碼,把圖片排列起來
在 <body> 和 </body> 標簽中添加以下代碼:
<div>
 <ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/6.jpg" /></li>
<li><img src="img/7.jpg" /></li>
 </ul>
</div>

給上一步的 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 庫
 <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
引入 Marquee 插件
 <script type="text/javascript" src="marquee2.js"></script>
代碼放在 </body> 標簽前,如圖:

給 div 增加 marquee 類
 <div class="con marquee">
保存文件,在瀏覽器中打開,就可以看到圖片開始滾動了。

圖片默認的滾動方向是「向上滾動」
如果要修改圖片滾動的方向,可以給 div 指定 direction 屬性,屬性值可以取:
 up 上
 down 下
 left 左
 right 右

5、跑馬燈的設計在網頁中有什麼效果?

根據我多次使用跑馬燈,跑馬燈的效果在實際的網頁設計中還是有一定的應用的,但是沒有使用js和焦點圖那麼直接和效果好。

6、網頁製作中怎麼樣控制文字跑動的速度

marquee標簽
功能:
使文字或者圖片等產生移動效果
語法:

displaydata


是成對標記

truespeed 未知意義

loop
設定跑馬燈的次數

behavior
設定走動方式
① scroll 跑到盡頭後再重新開始(默認)
② slide 跑完一次就不跑了
③ alternate 以左右來回移動的方式跑

direction
設定跑馬燈移動方向
① left 從右向左(默認方式)
② right 從左向右

scrolldelay
設定移動速度,用來設定延遲時間
數值越大,速度越慢(默認為90)
單位以毫秒來計算

scrollamount
設定移動速度,跑馬燈移動距離
數值越大,速度越慢(默認為6)
以移動的pixel為單位

width
調整跑馬燈的寬度

height
調整跑馬燈的高度

bgcolor
設定跑馬燈的背景顏色

只適用於 IE ,叫做"跑馬燈" 如 Status Bar 的那種,意指走動或卷動的文字,其參數設定比較多。

Hello

behavior="SCROLL"
決定文字的卷動方式,可選值為:
SCROLL 一般卷動,是內定值。
SLIDE 如幻燈片,一格格的,文字一接觸左邊便全消失。
ALTERNATE 文字向左右兩邊撞來撞去。

direction="LEFT"
設定文字設定文字的卷動方向,LEFT 表示向左,是內定值,RIGHT 表示向右。

bgcolor="#0000FF"
設定文字卷動范圍的背景顏色,顏色值可參考【調色原理】。

height="30" width="150"
>設定文字卷動范圍,可採用相對或絕對,如 30% 或 30 等,單位為像素。

hspace="0" vspace="0"
設定文字的水平及垂直空白位置。

loop="INFINITE"
設定文字卷動次數,其值可以是正整數或 INFINITE,INFINITE 是默認值,表示無限次。

scrollamount="30"
每「格」文字間的間隔,單位是像素。

scrolldelay="500"
文字卷動的停頓時間,單位是毫秒。

7、javascript腳本網頁如何製作狀態欄的跑馬燈

<html> <head> <title> 文字的跑馬燈效果 </title> <script Language="JavaScript"> var msg="這是使用JavaScript實現的文字跑馬燈效果"; var interval = 100;//定義函數的時間參數,這里是0.1秒。 var maxlen = 120;//定義跑馬燈msg處於最右時的位置值。 var space=" "; var seq=maxlen;//定義stext中被選取段的開始位置。 var stext="";//實際顯示它的一部分。 var len; for (i=1; i<=maxlen; i++) stext += space; stext += msg;//初始化它,實質是一段空格加上msg。 len=stext.length; function Scroll() { window.status=stext.substring(seq, len);//在狀態欄上顯示stext從seq開始,長度為len的一部分。 seq++;//seq每次加1,表示每次少顯示一個前置空格,視覺效果就是文字提前一格。 if(seq >= len)//如果seq比len大,意味著什麼都不顯示,或者說到達了左邊界,則重新開始。 { seq = 0; } window.setTimeout("Scroll();", interval);//遞歸調用,過interval毫秒後再次調用Scroll函數。 } Scroll();//調用Scroll函數,進入遞歸。 </script> </head> <body> <center> <font size=5 color="ff0094"> 遞歸實現的跑馬燈效果 </font> </center> </body> </html>

8、網頁中跑馬燈效果製作

<div
id=demo>
<div
id=demo1>
這里放你想寫的文字或圖片!實現無空白循環滾動
</div>
<div
id=demo2></div>
</div>
<script>
var
speed=30
demo2.innerHTML=demo1.innerHTML
//克隆demo1為demo2
function
Marquee(){
//當滾動至demo1與demo2交界時版
if(demo2.offsetTop-demo.scrollTop<=0)
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>

與網頁設計跑馬燈樣式是什麼相關的知識