1. 怎樣在DW中加入滾動圖片,是那種自下而上沒有空白的無縫滾動,首尾相接。
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向上滾動
<div id="demo">
<div id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
<script>
<!--
var speed=10; //數字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1為demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//當滾動至與demo2交界時
tab.scrollTop-=tab1.offsetHeight //demo跳到最頂端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//滑鼠移上時清除定時器達到滾動停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//滑鼠移開時重設定時器
-->
</script>
2. DW里如何實現這種圖片滾動的效果
這個效果需要運用到javascript才可以進行實現這種圖片的滾動。而html裡面的marquee標簽只能進行左右滾動,並且進行設置相應的滾動方式,這個標簽相對來說用的就比較簡單了。
例如:<marquee scrollAmount=2 width=300>歡迎來到魔人牛牛新浪博客!</marquee>
這裡面可以有相應的參數:
marquee 參數:
BGColor:滾動文本框的背景顏色。
Direction:滾動方向設置,可選擇Left(從右到左)、Rightup(從下到上)和down(從上到下)
scrolldelay:每輪滾動之間的延遲時間,數字越大滾動越慢。
scrollamount:一次滾動總的時間量,數字越小滾動越慢。
Behaviour:滾動的方式設置,三種取值:Scroll(循環滾動) lide(滑入,單次滾動)、Alternate(來回滾動)。
Align:文字的對齊方式設置,可選擇Middle(居中)、Bottom(居下)還是Top(居上)。
Width:滾動文本框的寬度,輸入一個數值後從後面的單選框選擇in Pixels(按像素)或是in Percent(按百分比)。
Height:滾動文本框的高度,輸入一個數值後從後面的單選框選擇in Pixels(按像素)或是in Percent(按百分比)。
loop:滾動次數,默認為infinite(無限)
hspace、vspace:前後、上下的空行。
3. dw中,如何製作滾動字幕。無縫隙跟隨
跟在表格裡面一樣
滾動字幕標記<marquee>…</marquee >
屬性:滾動方向----direction= (up 、down 、left 、right)
滾動方式內----behavior= (scroll 、slide 、alternate)
滾動速度----scrollamount= (數字容 例:30=每次移動30像素)
滾動延遲----scrolldelay= (數字 例:500=0.5秒)
滾動循環----loop= (數字 例:10=10次)
滾動范圍----width 、height= (數字 450=405像素)
滾動背景----bgcolor= (顏色的英文或是顏色代碼)
特殊屬性:滑鼠經過滾動停止----onmouseover=「this.stop()」
滑鼠離開滾動繼續----onmouseout=「this.start()」
4. 在dw中如何做自動滾動文字
跟著我整理好的製作流程來做,marquee的基本屬性我也整理的比較容易理解了。如果做出來的效果和你想的不同就看看屬性設置裡面是不是有誤。
1:在需要滾動文字的地方插入游標,亂侍然後點擊插入面板的「標簽選擇器」。
2:選擇HTML標簽中的頁面元素,然後選擇右側marquee標簽。點擊「插入」按鈕,關閉「標簽選擇器」。
3:轉換到代碼視圖。把游標插入點放在的標簽之間,輸入需要滾動的文字。然後選擇「窗口」→「標簽檢查器」。
4:在標簽檢查器behavior屬性欄中點擊behavior右側的下拉箭頭,顯示的三項屬性為滾動字幕內容的運動方式。【Alternate=交替滾動】【Scroll=循環滾動】【Slide=幻燈片效果。(指滾動一次,然後停止滾動)】
5:direction屬性設置字幕內容的滾動方向。分別為:Up=向上運動,down=向下運動,Left=向左運動,Right=向右運動。默認值為Left。
6:scrollamount屬性設置字幕滾動的速度。單位為像素,一般設為1-3。數值越大滾動速度越快。
7:scrolldelay屬性設置字幕內容滾動時延遲時間,單位為毫秒,通常可以不設置_。
8:width和height屬性設置表示滾動區域的大小。width=滾動寬度,height=滾動高度。width屬性設置滾動字幕的寬度。寬度和高度可用像素或可視頁面的百分比來表示。例如滾動寬度是可視頁面的100%,而滾動寬度則是可視頁面的100像素。製做垂直滾動效果的時候,一定要設height的值。
9:style屬性設置字幕內容的樣式。需要手工輸入。我設置的為「font:13px;」。
10:loop屬性設置字幕內容滾動次數,默認時,marquee將一直循環,直到behavior屬性值被設置為slide才停止。也可以使用值-1來設置文字循環運動無限次。
11:align屬性設置是指和周圍文字的對齊方式。默認值為Left。
12:trueSpeed屬性源陪念設置是平滑滾動,當使用這個屬性時,表示scrolldelay值應該根據它的精確值來實現。如果沒有使用這個屬性,任何小於60的值都將作為60毫秒。(如果在scrolldelay的值設為1的情況下使用了trueSpeed屬性你會發現滾動文字會以奇快的速度在運行)
13:vspace屬性設置是指雹困指定的marquee區域和它周圍的文字的垂直間距,單位為像素。
14:bgcolor屬性設置是指滾動文字的背景顏色。
5. DW里如何將一張圖從左至右無縫循環滾動
你的會js才能辦到。還需要css配合。dw只是編輯器。對於功能的實現。你的會一些腳步語言和樣式表才能辦到。
6. 如何dwcs5中讓圖片實現無限滾動
首先,你得准備好素材,下面的1.jpg~6.jpg是測試用的。
然後打開Dreamweaver8,新建一網頁文件,並保存為名為「index.html"文件。
切換至代碼編輯界面,輸入如下代碼:
<body><div id="photo-list"> <ul id="scroll">
<li><a href="#"><img src="images/1.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/2.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/3.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/4.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/5.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/6.jpg" width="100px" height="100px" alt=""/></a></li> </ul> </div></body>
新建一CSS樣式表文件,並將該文件保存到與「index.html」相同的目錄下,文件名稱為「MyStyle.css"。
在新建的樣式表文件"MyStyle.css」文件中輸入如下代碼:
* { padding:0; margin:0;} /*設置所有對像的內邊距為0*/
body { text-align:center;} /*設置頁面居中對齊*/
#photo-list {
/* 6張圖片的寬度(包含寬度、padding、border、圖片間的留白)
計算:6*(100+2*2+1*2+9) - 9
之所以減去9是第6張圖片的右邊留白 */
width:681px;
/* 圖片的寬度(包含高度、padding、border)
計算:100+2*2+1*2 */
height:106px;
margin:50px auto;
overflow:hidden; /*溢出部份將被隱藏*/
border:1px dashed #ccc;
}
#photo-list ul { list-style:none;}
#photo-list li { float:left; padding-right:9px;}
#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}
在網頁文件"index.html"中添加對該樣式表的引用:
<link rel="stylesheet" type="text/css" href="MyStyle.css">
新建一個JS文件,並將該文件另存為「MoveEffect.js"。
在」MoveEffect.js「文件中輸入如下所示代碼:
var id = function(el) { return document.getElementById(el); },
c = id('photo-list');
if(c) {
var ul = id('scroll'),
lis = ul.getElementsByTagName('li'),
itemCount = lis.length,
width = lis[0].offsetWidth, //獲得每個img容器的寬度
marquee = function() {
c.scrollLeft += 2;
if(c.scrollLeft % width <= 1){ //當 c.scrollLeft 和 width 相等時,把第一個img追加到最後面
ul.appendChild(ul.getElementsByTagName('li')[0]);
c.scrollLeft = 0;
};
},
speed = 50; //數值越大越慢
ul.style.width = width*itemCount + 'px'; //載入完後設置容器長度
var timer = setInterval(marquee, speed);
c.onmouseover = function() {
clearInterval(timer);
};
c.onmouseout = function() {
timer = setInterval(marquee, speed);
};
};
然後在主頁文件"index.html」中添加對該「MoveEffect.js」文件的引用。
<script type="text/javascript" src="MoveEffect.js"></script>
打開「index.html」網頁文件
7. DW網頁設計中如何給整個網頁設置滾動條
css屬性 overflow-y:auto; DIV裡面的內容超過DIV的高度,右邊就會自動出現滾動條
1、用一個div,定製版成圖中的寬度和權高度
2、然後再把div的樣式設成overflow-y:scroll,當div里的文字超出那個高度的時候,滾動條就出來了。
例如:<div style="width:100px; height:100px; overflow:auto; border:1px solid #000000;"><img src="" style="width:300px; height:300px;"></div>
8. 用DW做網頁,怎麼能使上下框架連起來,中間沒有縫隙呢
你的代碼有問題哦:不應該有2個HEAD和2個BODY的~~
用框架的話設置邊框為0 滾動條為無/滾動條也佔地方的~~
或者用include 就可以了~
你的問題感覺滾動條的問題可能很大~~
9. DW中怎樣讓圖片填滿整個規定區域,不留縫隙
這個一般是讓圖片的大小和你的區域的大小一樣。
如果是不固定的區域的話,那專多半是讓圖片平鋪屬了,也就是在CSS面板里,找到「背景」,在裡面找到background-repeat,然後選repeat那個項就行了。這個功能要求你的圖片在重復時邊緣能夠重合,看起來就像是一張圖片平鋪整個區域一樣。
也可能有其它的情況,但多數是這兩個情況了。
大概就是這樣了。
10. DW中如何製作這種圖片循環滾動
用代碼:
基本代碼如下:
<marquee
direction="right"
onmouseover="this.stop();"
onmouseout="this.start();"
>
<a
href="http://www..com"
target="_blank"><img
src="1.jpg"
border="1"
/></a>
<img
src="2.jpg"
border="1"
/>
<img
src="3.jpg"
border="1"
/>
</marquee>
代碼需要改進的很多,如果速度,及不間斷顯示
在鏈接的地方改成你版的圖片權的位置。