图片滚动
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>圖片滾動(dòng) 郵票</title><style>.demo{width:578px;background-color: white;overflow: hidden;border: 1px dashed grey;}.indemo{float: left;width: 800%;}.demo1{float: left;}.demo2{float: left;}.demo a{display: block;width: 90px;height: 72px;float: left;border: 3px solid #F2F2F2;}.demo img{width: 100%;height: 100%;}</style>
</head>
<body>
<div class="demo"><div class="indemo"><div class="demo1"><a href="#"><img src="img/s1.JPG"></a><a href="#"><img src="img/s5.JPG"></a><a href="#"><img src="img/s2.JPG"></a><a href="#"><img src="img/s6.JPG"></a><a href="#"><img src="img/s3.JPG"></a><a href="#"><img src="img/s4.JPG"></a></div><div class="demo2"></div></div>
</div>
<script>var speed=10;var demo=document.getElementsByClassName("demo")[0];var demo1=document.getElementsByClassName("demo1")[0];var demo2=document.getElementsByClassName("demo2")[0];demo2.innerHTML=demo1.innerHTML;function myMar(){if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo2.offsetWidth;}else{demo.scrollLeft++;}}var mymar=setInterval(myMar,speed);//鼠標(biāo)移入事件demo.onmouseover=function(){clearInterval(mymar);}//鼠標(biāo)移出事件demo.onmouseout=function(){setInterval(mymar=setInterval(myMar,speed))}
</script>
</body>
</html>
scrollWidth 對(duì)象的實(shí)際內(nèi)容的寬度，不包含邊線寬度，會(huì)隨對(duì)象中內(nèi)容超過可視區(qū)后而變大 ? 實(shí)際內(nèi)容的寬度
clientWidth 對(duì)象內(nèi)容的可視區(qū)的寬度，不包含滾動(dòng)條等邊線，會(huì)隨對(duì)象顯示大小的變化而改變 ?內(nèi)容可視區(qū)的寬度
offsetWidth 對(duì)象整體的實(shí)際寬度,包含滾動(dòng)條等邊線，采用默認(rèn)寬高顯示 ?元素的實(shí)際寬度
clientLeft,clientTop ?表示內(nèi)容區(qū)域的左上角相對(duì)于整個(gè)元素左上角的位置（包括邊框） （取決于邊框？）
offsetLeft,offsetTop ?相對(duì)于最近的祖先定位元素
scrollLeft,scrollTop ?元素滾動(dòng)的大小
總結(jié)
- 上一篇： 【记录】python3 tkinterU
- 下一篇： 我的-Android-面试故事---13