图片滚动
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>圖片滾動 郵票</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);//鼠標移入事件demo.onmouseover=function(){clearInterval(mymar);}//鼠標移出事件demo.onmouseout=function(){setInterval(mymar=setInterval(myMar,speed))}
</script>
</body>
</html>
scrollWidth 對象的實際內容的寬度，不包含邊線寬度，會隨對象中內容超過可視區后而變大 ? 實際內容的寬度
clientWidth 對象內容的可視區的寬度，不包含滾動條等邊線，會隨對象顯示大小的變化而改變 ?內容可視區的寬度
offsetWidth 對象整體的實際寬度,包含滾動條等邊線，采用默認寬高顯示 ?元素的實際寬度
clientLeft,clientTop ?表示內容區域的左上角相對于整個元素左上角的位置（包括邊框） （取決于邊框？）
offsetLeft,offsetTop ?相對于最近的祖先定位元素
scrollLeft,scrollTop ?元素滾動的大小
總結
- 上一篇： 【记录】python3 tkinterU
- 下一篇： shell命令 ffmpeg 批量提取视