Ⅰ 如何用div+css無縫拼接圖片
你看這樣子是不是你想要的效果
<divstyle="width:750px;">
<ulstyle="margin:0;padding:0;">
<listyle="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><ahref="#"><imgsrc="001.jpg"style="display:block;"/></a></li>
<listyle="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><ahref="#"><imgsrc="001.jpg"style="display:block;"/></a></li>
<listyle="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><ahref="#"><imgsrc="001.jpg"style="display:block;"/></a></li>
<listyle="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><ahref="#"><imgsrc="001.jpg"style="display:block;"/></a></li>
<listyle="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><ahref="#"><imgsrc="001.jpg"style="display:block;"/></a></li>
<listyle="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><ahref="#"><imgsrc="001.jpg"style="display:block;"/></a></li>
<listyle="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><ahref="#"><imgsrc="001.jpg"style="display:block;"/></a></li>
<listyle="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><ahref="#"><imgsrc="001.jpg"style="display:block;"/></a></li>
<listyle="margin:0;padding:0;list-style-type:none;float:left;width:250px;"><ahref="#"><imgsrc="001.jpg"style="display:block;"/></a></li>
</ul></div>
寬度(width)根據你自己的實際情況去改變就可以了
Ⅱ div+css問題,層之間的無縫要如何實現
只設置外邊距"margin"就行了!你是這么寫的嗎: padding:0,margin:0
這么寫吧,用第2個div:
.div2 {margin-top:0px:}
-----------------------------------
<div class="div2">直接在TXT文本裡面測試下,不要用其它工具寫。<div>
你用這個去測試下,看是你那有什麼問題:
.div1 {height:50px; border:1px solid red;}
.div2 {height:50px; margin-top:0px; border:1px solid black;}
---------------------------------------------------------
<div class="div1">第一個</div>
<div class="div2">第二個</div>
補充:
你怎麼是在css里的body裡面設置的,- -!要對應相應的元素!
Ⅲ marquee 中如何讓圖片進行無縫循環
思路:一個設定寬度並且隱藏超出它寬度的內容的容器demo,裡面放demo1和demo2,demo1是滾動內容,demo2為demo1的直接克隆,通過不斷改變demo1的scrollTop或者scrollLeft太到滾動的目的,當滾動至demo1與demo2的交界處時直接跳回初始位置,因為demo1與demo2一樣,所以分不出跳動的瞬間,從而達到「無縫」滾動.
有個代碼例子:
<html>
<body>
<div id=demo style=overflow:hidden;height:95;width:500;>
<table align=center cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top><a href='http://www.lijinran.com' target='_blank' title='網站名稱:勁然的眼鏡
網站地址:http://www.lijinran.com
網站簡介:勁然漫畫'><img src='http://www.lijinran.com/bbs/UploadFile/20047111344528837.gif' width='88' height='31' border='0'></a><a href='http://my.coolala.net' target='_blank' title='網站名稱:酷辣辣
網站地址:http://my.coolala.net
網站簡介:酷辣辣更精彩'><img src='http://my.coolala.net/images/logo8831.gif' width='88' height='31' border='0'></a><a href='http://www.brazilfans.cn' target='_blank' title='網站名稱:巴迷社區
網站地址:http://www.brazilfans.cn
網站簡介:巴迷社區'><img src='http://www.brazilfans.cn/news/images/link/logo.gif' width='88' height='31' border='0'></a><a href='/FriendSite/FriendSiteReg.asp' target='_blank'><img src='/images/nologo.gif' width='88' height='31' border='0' alt='點擊申請'></a><a href='/FriendSite/FriendSiteReg.asp' target='_blank'><img src='/images/nologo.gif' width='88' height='31' border='0' alt='點擊申請'></a><a href='/FriendSite/FriendSiteReg.asp' target='_blank'><img src='/images/nologo.gif' width='88' height='31' border='0' alt='點擊申請'></a></td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
Ⅳ 怎樣在網頁製作中設置圖片左右無縫滾動
網站常用的向左滾動 首尾相接
你可以把圖片銜接的路徑改成你電腦上的就行了.寬度,長度你可以自己改,圖片指向的網頁也可以改。圖片數量也可以加。把下面代碼另存為html格式就可以了。
<div id="demo" style="overflow:hidden;width:600px;color:#ffffff;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="demo1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><a href="www..com"><img src="01.gif" width="120" height="100" border="0"></a>
<td>
<td><a href="www..com"><img src="02.gif" width="120" height="100" border="0"></a>
<td>
<td><a href="www..com"><img src="03.gif" width="120" height="100" border="0"></a>
<td>
<td><a href="www..com"><img src="04.gif" width="120" height="100" border="0"></a>
<td>
<td><a href="www..com"><img src="05.gif" width="120" height="100" border="0"></a>
<td><td><a href="www..com"><img src="06.gif" width="120" height="100" border="0"></a>
<td>
<td><a href="www..com"><img src="07.gif" width="120" height="100" border="0"></a>
<td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=1
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
Ⅳ JavaScript 控制Marquee無縫滾動的原理是什麼呀
JavaScript 控制Marquee無縫滾動的原理:首先把內容復制為兩份再連接起來,然後控制滾到一半的時侯從頭開始,看起來就是無縫的。下面是一個例子(網路上可以搜索許多,這是我搜索的第一個,但是我測試正確):
<div id="marquees"> <!-- 這些是字幕的內容,你可以任意定義 --> <a href="http://www.31u.net">鏈接1</a>
<br> <a href="#">鏈接2</a>
<br> <a href="#">鏈接3</a>
<br> <a href="#">鏈接4</a>
<br> <!-- 字幕內容結束 -->
</div>
<!-- 以下是javascript代碼 -->
<script language="javascript">
<!--
marqueesHeight=200; //內容區高度
stopscroll=false; //這個變數控制是否停止滾動
with(marquees){
noWrap=true; //這句表內容區不自動換行
style.width=0; //於是我們可以將它的寬度設為0,因為它會被撐大
style.height=marqueesHeight;
style.overflowY="hidden"; //滾動條不可見
onmouseover=new Function("stopscroll=true"); //滑鼠經過,停止滾動
onmouseout=new Function("stopscroll=false"); //滑鼠離開,開始滾動
}
//這時候,內容區的高度是無法讀取了。下面輸出一個不可見的層"templayer",稍後將內容復制到裡面:
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滾動內容
//多次復制原內容到"templayer",直到"templayer"的高度大於內容區高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的內容的「兩倍」復制回原內容區:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//設置連續超時,調用"scrollUp()"函數驅動滾動條:
setInterval("scrollUp()",20);
}
document.body.onload=init;
preTop=0; //這個變數用於判斷滾動條是否已經到了盡頭
function scrollUp(){ //滾動條的驅動函數
if(stopscroll==true) return; //如果變數"stopscroll"為真,則停止滾動
preTop=marquees.scrollTop; //記錄滾動前的滾動條位置
marquees.scrollTop+=1; //滾動條向下移動一個像素
//如果滾動條不動了,則向上滾動到和當前畫面一樣的位置
//當然不僅如此,同樣還要向下滾動一個像素(+1):
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>
Ⅵ css中怎麼讓div居左無縫隙
div默認是居左靠上的,你說的縫隙應該是由於body的默認CSS屬性沒有被清除造成的,你可回以在CSS里寫上 body {margin:0; padding:0} ,這樣處答於body里的div就靠左無縫隙了。