移動圖片問題

震宇 2014-02-22

展開全文

移動圖片問題

春天沒來　14-02-21 07:39:49

        小助手2朋友幫幫忙,看看我的這篇網(wǎng)頁:
http://bbzoh.cn/showweb/0/0/354239962.aspx
存在兩個問題:
        1、移動速度太慢,。不像4,，到像1（網(wǎng)頁中設(shè)置的移動速度為4）；
        2,、6個圖片不能全顯示出來,。只顯示出第三個圖片就跳轉(zhuǎn)到第一個圖片了,。
        要告訴我原因歐，不要讓技術(shù)人員修改一下就罷了,。

共有4條回復(fù)

360doc小助手2 14-02-21 09:48:03

您好,，技術(shù)人員查看是您的圖片代碼設(shè)置有問題。

在您的文章代碼中有一段文字：<marquee scrollamount="4" scrolldelay="200" direction="left" width="740" height="1000">

您需要將圖片的速度調(diào)快,，即：scrolldelay="200"中的數(shù)字調(diào)小,，移動速度將會變快。

如果您想讓圖片全部顯示,，需要修改字幕寬度,，即：width="740"中的數(shù)字需要調(diào)整到4000

春天沒來 14-02-22 17:09:40

小助手2朋友：
你好！
謝謝你的答復(fù),，也謝謝技術(shù)人員,！

技術(shù)人員的答復(fù)，并不能使人滿意,。其中，有一點(diǎn)是正確的,，就是移動標(biāo)簽中的延時屬性,，也就是兩次移動操作之間的間隔時間：scrolldelay="200" 這里的屬值如果設(shè)置得過大，確實(shí)是會影響移動內(nèi)容的移動速度,。這一點(diǎn),，以前我理解得不深刻。

第二點(diǎn),，如果想讓圖片全部顯示,，需要修改字幕寬度，即：width="740"中的數(shù)字需要調(diào)整到4000,。

這一點(diǎn),，就答復(fù)得不能令人滿意了。難道說移動圖片的總寬度有多大,，移動屏幕的寬度就應(yīng)該設(shè)置為多寬嗎,？這樣的網(wǎng)頁效果太差了，也就是說,，網(wǎng)頁的寬度太寬了,，網(wǎng)頁中出現(xiàn)了橫向滾動條了。

經(jīng)過我一天來的測試,，只要把移動屏幕的寬度設(shè)置為100％圖片就能夠全部顯示出來了,。
其效果見我制作的這篇文章：
http://bbzoh.cn/content/14/0221/21/4127803_354612392.shtml

我非常奇怪，以往在圖書館中制作移動網(wǎng)頁,，并不會出現(xiàn)這種情形的,，現(xiàn)在不知是怎么了,？是不是新來的技術(shù)人員修改了360圖書館服務(wù)器中的哪些數(shù)據(jù)了？

DLLC1234 14-02-22 18:02:38

春天沒來館友：

圖片（文字）滾動寬度設(shè)置與圖片滾動可見畫面寬度設(shè)置并不是完全一回事,，因此——width="740"中的數(shù)字需要調(diào)整到4000,。——技術(shù)人員意見可能是正確的,。這可能是畫面滾動初始位子和滾動連續(xù)性所需,。

另外據(jù)我檢測，目前圖書館系統(tǒng)對于圖片（文字）的滾動速度控制也是沒有問題的,。
僅供參考,。。,。,。。,。,。

DLLC1234 14-02-22 18:11:59

        請看下面我為文章模版編制的一套代碼，滾動寬度都是5550,，而每張滾動圖片顯示畫面只設(shè)置為100寬,。只有這樣8張圖片滾動才能同步，整體顯示好像一張圖片在滾動,。

<DIV align=center>
<TABLE style="BORDER-BOTTOM: #006600 3px ridge; POSITION: relative; BORDER-LEFT: #006600 3px ridge; BORDER-TOP: #006600 3px ridge; TOP: 0px; BORDER-RIGHT: #006600 3px ridge; LEFT: 0px" id=table1 title="" border=3 cellSpacing=0 cellPadding=0 width=950 bgColor=#abd1a0 height=0>
<TBODY>
<TR>
<TD>
<TABLE style="POSITION: relative; WIDTH: 950px; TOP: 0px" id=table1 title=dllc1234制作 background="" align=center height=251>
<TBODY>
<TR>
<TD>
<MARQUEE style="Z-INDEX: 70; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; BORDER-LEFT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; TOP: 3px; BORDER-RIGHT: #008080 3px ridge; LEFT: 2px" direction=right height=240 behavior=alternate width=100 scrollAmount=1 scrollDelay=50>
<TABLE style="BACKGROUND-POSITION: 840px 0px" id=table2 border=0 width=5550 background=http://userimage2.360doc.com/12/0427/05/2904667_201204270513380590.jpg height=300>
<TBODY>
<TR>
<TD>　</TD></TR></TBODY></TABLE></MARQUEE>
<MARQUEE style="Z-INDEX: 60; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; BORDER-LEFT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; TOP: 3px; BORDER-RIGHT: #008080 3px ridge; LEFT: 122px" direction=right height=240 behavior=alternate width=100 scrollAmount=1 scrollDelay=50>
<TABLE style="BACKGROUND-POSITION: 720px 0px" id=table2 border=0 width=5550 background=http://userimage2.360doc.com/12/0427/05/2904667_201204270513380590.jpg height=300>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></MARQUEE>
<MARQUEE style="Z-INDEX: 50; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; BORDER-LEFT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; TOP: 3px; BORDER-RIGHT: #008080 3px ridge; LEFT: 242px" direction=right height=240 behavior=alternate width=100 scrollAmount=1 scrollDelay=50>
<TABLE style="BACKGROUND-POSITION: 600px 0px" id=table2 border=0 width=5550 background=http://userimage2.360doc.com/12/0427/05/2904667_201204270513380590.jpg height=300>
<TBODY>
<TR>
<TD>　</TD></TR></TBODY></TABLE></MARQUEE>
<MARQUEE style="Z-INDEX: 40; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; BORDER-LEFT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; TOP: 3px; BORDER-RIGHT: #008080 3px ridge; LEFT: 362px" direction=right height=240 behavior=alternate width=100 scrollAmount=1 scrollDelay=50>
<TABLE style="BACKGROUND-POSITION: 480px 0px" id=table2 border=0 width=5550 background=http://userimage2.360doc.com/12/0427/05/2904667_201204270513380590.jpg height=300>
<TBODY>
<TR>
<TD>　</TD></TR></TBODY></TABLE></MARQUEE>
<MARQUEE style="Z-INDEX: 30; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; BORDER-LEFT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; TOP: 3px; BORDER-RIGHT: #008080 3px ridge; LEFT: 482px" title="" direction=right height=240 behavior=alternate width=100 scrollAmount=1 scrollDelay=50>
<TABLE style="BACKGROUND-POSITION: 360px 0px" id=table2 border=0 width=5550 background=http://userimage2.360doc.com/12/0427/05/2904667_201204270513380590.jpg height=300>
<TBODY>
<TR>
<TD>　</TD></TR></TBODY></TABLE></MARQUEE>
<MARQUEE style="Z-INDEX: 20; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; BORDER-LEFT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; TOP: 3px; BORDER-RIGHT: #008080 3px ridge; LEFT: 602px" direction=right height=240 behavior=alternate width=100 scrollAmount=1 scrollDelay=50>
<TABLE style="BACKGROUND-POSITION: 240px 0px" id=table2 border=0 width=5550 background=http://userimage2.360doc.com/12/0427/05/2904667_201204270513380590.jpg height=300>
<TBODY>
<TR>
<TD>　</TD></TR></TBODY></TABLE></MARQUEE>
<MARQUEE style="Z-INDEX: 10; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; BORDER-LEFT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; TOP: 3px; BORDER-RIGHT: #008080 3px ridge; LEFT: 722px" direction=right height=240 behavior=alternate width=100 scrollAmount=1 scrollDelay=50>
<TABLE style="BACKGROUND-POSITION: 120px 0px" id=table2 border=0 width=5550 background=http://userimage2.360doc.com/12/0427/05/2904667_201204270513380590.jpg height=300>
<TBODY>
<TR>
<TD>　</TD></TR></TBODY></TABLE></MARQUEE>
<MARQUEE style="Z-INDEX: 5; BORDER-BOTTOM: #008080 3px ridge; POSITION: absolute; BORDER-LEFT: #008080 3px ridge; BORDER-TOP: #008080 3px ridge; TOP: 3px; BORDER-RIGHT: #008080 3px ridge; LEFT: 842px" direction=right height=240 behavior=alternate width=100 scrollAmount=1 scrollDelay=50>
<TABLE style="BACKGROUND-POSITION: 0px 0px" id=table2 border=0 width=5550 background=http://userimage2.360doc.com/12/0427/05/2904667_201204270513380590.jpg height=300>
<TBODY>
<TR>
<TD>　 </TD></TR></TBODY></TABLE></MARQUEE></TD></TR></TBODY></TABLE>
<DIV>
<TABLE style="POSITION: relative; WIDTH: 950px; TOP: 0px" id=table1 title=dllc1234制作 background=http://userimage2.360doc.com/12/0427/17/2904667_201204271753030465.jpg align=center height=372>
<TBODY>
<TR>
<TD>
<DIV style="POSITION: absolute; TOP: 5px; LEFT: 0px" class=divBorderStyle><EMBED height=400 type=application/x-shockwave-flash width=460 src=http://pendant.360doc.com/1/14.swf 第一個FLASH wmode="transparent" quality="high"></EMBED></DIV>
<DIV style="POSITION: absolute; TOP: 60px; LEFT: 80px" class=divBorderStyle>
<DIV align=center>
<DIV style="FILTER: shadow(color=#000000, strength=10); WIDTH: 800px; HEIGHT: 135px"><FONT style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; COLOR: #abd1a7; FONT-SIZE: 50pt; FONT-WEIGHT: normal" face=黑體><STRONG>文章題目<BR><BR></STRONG></FONT></DIV></DIV></DIV>
<DIV style="POSITION: absolute; TOP: 150px; LEFT: 400px" class=divBorderStyle>
<P align=center><FONT style="FONT-FAMILY: 宋體; FONT-SIZE: 24px" color=#006600><STRONG>文章作者署名<BR></STRONG></FONT></P></DIV></TD></TR></TBODY></TABLE></DIV>
<DIV>
<TABLE style="POSITION: relative; WIDTH: 950px; TOP: 0px" id=table1 title=dllc1234制作 background=http://userimage2.360doc.com/12/0427/17/2904667_201204271753030918.jpg align=center height=890>
<TBODY>
<TR>
<TD width=20>
<TD><BR>
<TABLE style="BORDER-BOTTOM-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted; BORDER-LEFT-STYLE: dotted" border=10 cellSpacing=0 borderColor=#006600 cellPadding=20 width=510 align=center>
<TBODY>
<TR>
<TD><BR>
<P style="TEXT-INDENT: 3em" align=left><FONT color=#006600 size=5 face=隸書>使用方法：在編輯狀態(tài)下,，按住鼠標(biāo)左鍵，將這里的文字與下面的圖片圖藍(lán),，然后將你的文字或圖表復(fù)制,、粘貼。（千萬注意：圖表寬度不能超過500,，否則就要在代碼狀態(tài)下,，由里向外調(diào)整設(shè)置數(shù)據(jù)。）</FONT></P>
<P style="TEXT-INDENT: 3em" align=left><FONT color=#006600 size=5 face=隸書>文章標(biāo)題與作者署名的置換方法同上,，只是要分別進(jìn)行,。或者在代碼狀態(tài)下,，找到原漢字刪除重寫,，其他不動。</FONT></P>
<P align=center><IMG src="http://userimage2.360doc.com/12/0428/05/2904667_201204280507240168.gif"></P></TD></TR></TBODY></TABLE><BR><BR></TD></TR></TBODY></TABLE></DIV>
<DIV style="POSITION: absolute; TOP: 50px; LEFT: 500px" class=divBorderStyle>
<TABLE>
<TBODY>
<TR>
<TD><IMG style="WIDTH: 612px; HEIGHT: 918px" src="http://image51.360doc.com/DownloadImg/2012/04/2700/23557668_1.gif" width=612 height=1095> </TD></TR></TBODY></TABLE></DIV>
<DIV>
<TABLE style="POSITION: relative; WIDTH: 950px; TOP: 0px" id=table1 title=dllc1234制作 background=http://userimage2.360doc.com/12/0427/17/2904667_201204271753020512.jpg align=center height=250>
<TBODY>
<TR>
<TD>
<P align=center>      <IMG class=restrictImg src="http://image15.360doc.com/DownloadImg/2010/10/1016/5879277_121.jpg"></P><BR><BR><BR><BR><BR><BR></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV><EMBED height=1 type=application/x-mplayer2 width=1 loop="true" autoplay="false" filename="http://bbs.jyzx./bbs_downloadAttachment.do?fileName=2008/9/13/2_4725.wma" showdisplay="0" showstatusbar="0" showgotobar="0" autostart="TRUE" playcount="0" volume="0"> </EMBED>

實(shí)際效果見http://bbzoh.cn/content/12/0428/02/2904667_207171730.shtml

春天沒來 14-02-23 18:52:42

DLLC1234老師的這篇作品http://bbzoh.cn/content/12/0428/02/2904667_207171730.shtml是在一個居中的塊區(qū)內(nèi)（我把這個標(biāo)簽<div>叫做塊區(qū)標(biāo)簽,，很可能不規(guī)范,，就當(dāng)它是個別名吧）放入了一個總表格。
總表格內(nèi)共有5個內(nèi)容：

第一個內(nèi)容是一個950×251的表格。表格中用了8個寬度為100px的移動標(biāo)簽各控制一個5550×300的表格,，這8個表格的背景圖片都是：http://userimage2.360doc.com/12/0427/05/2904667_201204270513380590.jpg ,。

第二個內(nèi)容是一個950×372的表格，背景圖片為：http://userimage2.360doc.com/12/0427/17/2904667_201204271753030465.jpg（切割圖片1）,，在這個表格中放入了動畫圖片：http://pendant.360doc.com/1/14.swf（牽?；ǎ⑽恼聵?biāo)題,、文章作者署名等內(nèi)容,。

第三個內(nèi)容是一個950×890的表格，背景圖片為：http://userimage2.360doc.com/12/0427/17/2904667_201204271753030918.jpg（切割圖片2）,。
這個表格的第一個單元格是寬度為20px的空單元格,；第二個單元格設(shè)置了三個段落分別放入兩段說明文字與一個圖片：http://userimage2.360doc.com/12/0428/05/2904667_201204280507240168.gif（女人的正面像）。

第四個內(nèi)容是一個表格,。表格中放入了612×1095的圖片：http://image51.360doc.com/DownloadImg/2012/04/2700/23557668_1.gif（女人背面像）,。

第五個內(nèi)容是一個950×250的表格，背景圖片為：http://userimage2.360doc.com/12/0427/17/2904667_201204271753020512.jpg（切割圖片3）,。單元格中放入了小插圖：http://image15.360doc.com/DownloadImg/2010/10/1016/5879277_121.jpg（動態(tài)兩女人）

總表格的下面放入了一個內(nèi)容：是隱藏了的口哨音樂,。

DLLC1234老師巧妙地應(yīng)用了相對定位與絕對定位相結(jié)合的方法，設(shè)置了不同的定位樣式,，設(shè)置了精確的移動標(biāo)簽,，設(shè)置了各個圖片的規(guī)格，應(yīng)用了多種技術(shù)手段,，組成了一幅精美的畫面。

DLLC1234老師的整篇網(wǎng)頁代碼,，簡潔清楚,，無多余的累贅代碼。真讓人佩服,，真讓人羨慕,，使學(xué)生我望塵莫及。我一定要繼續(xù)以您為楷模,，深入鉆研代碼知識,，爭取制作出像這樣的網(wǎng)頁來。

春天沒來 14-02-23 20:34:45

移動圖片的制作問題,，經(jīng)過許多次的試驗(yàn)測試,，終于有點(diǎn)兒眉目了。現(xiàn)將試驗(yàn)結(jié)果公示如下,，不妥之處,，期望大家指導(dǎo)。
用一個移動標(biāo)簽控制若干張圖片，怎樣才能夠讓圖片全部顯示出來呢,？經(jīng)過反復(fù)試驗(yàn),，總結(jié)出下列幾種類型：

類型一：
表格中放入移動標(biāo)簽，移動標(biāo)簽控制若干張圖片,，移動屏幕的寬度設(shè)置為：style="WIDTH: 100%",，圖片都能顯示出來。
見： http://bbzoh.cn/content/14/0221/21/4127803_354608874.shtml

類型二：
直接用移動標(biāo)簽控制若干張圖片,，移動屏幕的寬度設(shè)置為：style="width: 700px;",，移動標(biāo)簽中添加“來回走”的屬性：behavior="alternate"，圖片都能顯示出來,。
見：http://bbzoh.cn/content/14/0221/19/4127803_354573068.shtml

類型三：
直接用移動標(biāo)簽控制若干張圖片,，移動屏幕的寬度設(shè)置為：style="width: 700px;"，移動標(biāo)簽中沒有“來回走”的屬性：behavior="alternate",，只能顯示兩張圖片,。
見：http://bbzoh.cn/content/14/0221/21/4127803_354605486.shtml

類型四：
直接用移動標(biāo)簽控制若干張圖片，移動屏幕的寬度設(shè)置為：style="WIDTH: 100%",，不添加“來回走”的屬性：behavior="alternate",，圖片都能顯示出來。
見：http://bbzoh.cn/content/14/0221/21/4127803_354612392.shtml

類型五：
直接用移動標(biāo)簽控制若干張圖片,，移動屏幕的寬度缺?。ň褪遣辉O(shè)置），圖片都能顯示出來,。
見：http://bbzoh.cn/showWeb/0/0/354988307.aspx

由此可見,，用一個移動標(biāo)簽控制若干張圖片，圖片不能全部顯示出來的原因在于“移動屏幕寬度”設(shè)置得不合理：

如果用具體的數(shù)字設(shè)置移動屏幕的寬度值,，當(dāng)若干張圖片的總寬度超過移動屏幕寬度的2倍以上時，圖片不能夠全部顯示出來,。如果移動屏幕的寬度用百分比：style="WIDTH: 100%"設(shè)置或者缺省移動屏幕的寬度時,，圖片就能夠全部顯示出來。

這個事實(shí)究竟是什么道理,？我很難理解。但是,，結(jié)果若干次的試驗(yàn)測試,，事實(shí)就是如此啊。我慢慢地再悟吧,。

在此,，我再次謝謝DLLC1234老師,、360doc小助手2朋友以及圖書館技術(shù)人員的幫助指導(dǎo)！也謝謝各位關(guān)注此貼的朋友們,！

順祝朋友們馬年萬事如意,！

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn),。請注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購買等信息，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào),。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：震宇 > 《應(yīng)用代碼》

舉報(bào)/認(rèn)領(lǐng)