/**這個是我轉司徒正美的一個圖片上下無縫滾動的效果**/<style type="text/css">
#marquee {
position: relative;
height: 300px;
width: 200px;
overflow: hidden;
border: 10px solid #369;
padding:0;
margin:0;
}
#marquee img {
display: block;
}
#marquee dd {
margin: 0px;
padding: 0px;
}
</style>
<dl id="marquee">
<dt>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="無縫滾動" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="無縫滾動" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="無縫滾動" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="無縫滾動" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="無縫滾動" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="無縫滾動" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="無縫滾動" />
</dt>
<dd>
</dd>
</dl>
<script type="text/javascript">
var Marquee = function (id) {
var container = document.getElementById(id),
original = container.getElementsByTagName("dt")[0],
clone = container.getElementsByTagName("dd")[0],
speed = arguments[1] || 10;
clone.innerHTML = original.innerHTML;
alert(container.scrollTop);
var rolling = function () {
if (container.scrollTop == clone.offsetTop) {//我現在糾結的就是container.scrollTop和clone.offsetTop的區別 為什么clone.offsetTop是1050，而外面的container.scrollTop卻是0
container.scrollTop = 0;
} else {
container.scrollTop++;
}
}
var timer = setInterval(rolling, speed)
container.onmouseover = function () { clearInterval(timer) }
container.onmouseout = function () { timer = setInterval(rolling, speed) }
}
window.onload = function () {
Marquee("marquee");
}
</script>
scrollTop和offsetTop的區別
料青山看我應如是
2018-12-07 08:18:16
