js實現圖片滾動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>rightToLeft</title>
</head>
<body>
<!--從右向左滾動 begin-->
<div id="demo" style="overflow: hidden; width: 980px; padding: 0; margin: 0 auto; border: 1px dashed #CCC;">
<div id="indemo" style="float: left; width: 800%;">
<div id="demo1"  style="padding: 0; margin: 0 auto; float: left;">
<li style="padding: 0 2px; margin: 0; list-style: none; float: left;"><img src="images/no1.jpg" /></li>
<li style="padding: 0 2px; margin: 0; list-style: none; float: left;"><img src="images/no2.jpg" /></li>
<li style="padding: 0 2px; margin: 0; list-style: none; float: left;"><img src="images/no3.jpg" /></li>
<li style="padding: 0 2px; margin: 0; list-style: none; float: left;"><img src="images/no4.jpg" /></li>
<li style="padding: 0 2px; margin: 0; list-style: none; float: left;"><img src="images/no5.jpg" /></li>
<li style="padding: 0 2px; margin: 0; list-style: none; float: left;"><img src="images/no6.jpg" /></li>
</div>
<div id="demo2" style="float: left;"></div>
</div>
</div>
<script type="text/javascript">
var speed = 30;
var tab   = document.getElementById("demo");
var tab1  = document.getElementById("demo1");
var tab2  = document.getElementById("demo2");

tab2.innerHTML = tab1.innerHTML;

function marquee1() {
	if(tab2.offsetWidth <= tab.scrollLeft)	{
		tab.scrollLeft -= tab2.offsetWidth;	
	} else {
		tab.scrollLeft++;	
	}
}

var myMarquee1 = setInterval(marquee1, speed);
tab.onmouseover = function() { clearInterval(myMarquee1); }
tab.onmouseout  = function() { myMarquee1 = setInterval(marquee1, speed); }
</script>
<!--end-->
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>buttomToUp</title>
</head>
<body>
<!--從下向上滾動 begin-->
<div id="demo20" style="overflow: hidden; height: 500px; width: 335px; margin: 0 auto; border: 1px dashed #CCC;">
<div id="indemo2" style="height: 1000%; text-align: center;">
<div id="demo21">
<li style="padding: 2px 0; margin: 0; list-style: none; display: block; "><img src="images/no1.jpg" /></li>
<li style="padding: 2px 0; margin: 0; list-style: none; display: block; "><img src="images/no2.jpg" /></li>
<li style="padding: 2px 0; margin: 0; list-style: none; display: block; "><img src="images/no3.jpg" /></li>
<li style="padding: 2px 0; margin: 0; list-style: none; display: block; "><img src="images/no4.jpg" /></li>
<li style="padding: 2px 0; margin: 0; list-style: none; display: block; "><img src="images/no5.jpg" /></li>
<li style="padding: 2px 0; margin: 0; list-style: none; display: block; "><img src="images/no6.jpg" /></li>
</div>
<div id="demo22"></div>
</div>
</div>
<script type="text/javascript">
var speed = 30;
var tab   = document.getElementById("demo20");
var tab1  = document.getElementById("demo21");
var tab2  = document.getElementById("demo22");

tab2.innerHTML = tab1.innerHTML;

function marquee2() {
	if(tab2.offsetTop <= tab.scrollTop)	{
		tab.scrollTop -= tab1.offsetHeight;	
	} else {
		tab.scrollTop++;	
	}
}

var myMarquee2  = setInterval(marquee2, speed);
tab.onmouseover = function() { clearInterval(myMarquee2); }
tab.onmouseout  = function() { myMarquee2 = setInterval(marquee2, speed); }
</script>
<!--end-->
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>upToButtom</title>
</head>

<body>
<!--從上向下滾動 begin-->
<div id="demo" style="overflow: hidden; height: 500px; width: 335px; margin: 0 auto; border: 1px dashed #CCC;">
<div id="indemo" style="height: 1000%; text-align: center;">
<div id="demo1">
<li style="padding: 2px 0; margin: 0; list-style: none; display: block; "><img src="images/no1.jpg" /></li>
<li style="padding: 2px 0; margin: 0; list-style: none; display: block; "><img src="images/no2.jpg" /></li>
<li style="padding: 2px 0; margin: 0; list-style: none; display: block; "><img src="images/no3.jpg" /></li>
<li style="padding: 2px 0; margin: 0; list-style: none; display: block; "><img src="images/no4.jpg" /></li>
<li style="padding: 2px 0; margin: 0; list-style: none; display: block; "><img src="images/no5.jpg" /></li>
<li style="padding: 2px 0; margin: 0; list-style: none; display: block; "><img src="images/no6.jpg" /></li>
</div>
<div id="demo2"></div>
</div>
</div>
<script type="text/javascript">
var speed = 30;
var tab   = document.getElementById("demo");
var tab1  = document.getElementById("demo1");
var tab2  = document.getElementById("demo2");

tab2.innerHTML = tab1.innerHTML;

function marquee2() {
	if(tab1.offsetTop >= tab.scrollTop)	{
		tab.scrollTop += tab2.offsetHeight;	
	} else {
		tab.scrollTop--;	
	}
}

var myMarquee2  = setInterval(marquee2, speed);
tab.onmouseover = function() { clearInterval(myMarquee2); }
tab.onmouseout  = function() { myMarquee2 = setInterval(marquee2, speed); }
</script>
<!--end-->
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>

<body>
<div id="demo" style="overflow: hidden; width: 980px; padding: 0; margin: 0 auto; border: 1px dashed #CCC;">
<div id="indemo" style="float: left; width: 800%;">
<div id="demo1"  style="padding: 0; margin: 0 auto; float: left;">
<li style="padding: 0 2px; margin: 0; list-style: none; float: left;"><img src="images/no1.jpg" /></li>
<li style="padding: 0 2px; margin: 0; list-style: none; float: left;"><img src="images/no2.jpg" /></li>
<li style="padding: 0 2px; margin: 0; list-style: none; float: left;"><img src="images/no3.jpg" /></li>
<li style="padding: 0 2px; margin: 0; list-style: none; float: left;"><img src="images/no4.jpg" /></li>
<li style="padding: 0 2px; margin: 0; list-style: none; float: left;"><img src="images/no5.jpg" /></li>
<li style="padding: 0 2px; margin: 0; list-style: none; float: left;"><img src="images/no6.jpg" /></li>
</div>
<div id="demo2" style="float: left;"></div>
</div>
</div>
<script type="text/javascript">
var speed = 30;
var tab   = document.getElementById("demo");
var tab1  = document.getElementById("demo1");
var tab2  = document.getElementById("demo2");

tab2.innerHTML = tab1.innerHTML;

function marquee1() {
	if(tab.scrollLeft <= 0)	{
		tab.scrollLeft += tab2.offsetWidth;	
	} else {
		tab.scrollLeft--;	
	}
}

var myMarquee1 = setInterval(marquee1, speed);
tab.onmouseover = function() { clearInterval(myMarquee1); }
tab.onmouseout  = function() { myMarquee1 = setInterval(marquee1, speed); }
</script>
</body>
</html>

<!--

offsetHeight(返回元素的高度和寬度，以像素爲單位,包含內邊距)：

offsetWidth(返回元素的高度和寬度，以像素爲單位,包含內邊距)：

offsetLeft（返回當前元素的左邊界到它的包含元素的左邊界的偏移量，以像素爲單位）:

沒有offsetRight概念

offsetTop（返回當前元素的上邊界到它的包含元素的上邊界的偏移量，以像素爲單位。）

scrollHeight(返回元素的完整的高度和寬度，以像素爲單位。當一個元素擁有滾動條時（比如由於 CSS 的 overflow:scroll 屬性,如果爲hidden，得到的只是能顯示文字所能看到的高度)

scrollWidth：（和scrollheight道理一樣)

scrolltop(返回已經滾動到元素的左邊界或上邊界的像素數。只有在元素有滾動條的時候，例如，元素的 CSS overflow 屬性設置爲 auto 的時候，這些像素纔有用。這些屬性也只在文檔的 <body> 或 <html> 標記上定義（這和瀏覽器有關），並且一起來制定滾動文檔的位置。注意，這些屬性並不會指定一個 <iframe> 標記的滾動量)
如果不拖動滾動條，默認的值爲0；
scrollLeft同上

-->

js實現圖片滾動

IE7下li Bug

js實現圖片滾動

css-內聯（行內）元素、塊元素、margin、padding

div之float,clear特性

荷蘭國旗問題

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結