- Biển số
- OF-29430
- Ngày cấp bằng
- 18/2/09
- Số km
- 1,791
- Động cơ
- 500,060 Mã lực
Em cần làm một danh sách ảnh chạy dọc màn hình cho web của em, nếu dùng marquee thì trông quê quá nên em muốn dùng js và css ạ.
tìm trên mạng thì em thấy có người share code chạy ngang, vậy em nhờ cụ nào biết sửa lại thành chạy dọc hộ em..
cảm ơn các cụ... đây là code em kiếm trên mạng side ảnh chạy ngang màn hình.
tìm trên mạng thì em thấy có người share code chạy ngang, vậy em nhờ cụ nào biết sửa lại thành chạy dọc hộ em..
cảm ơn các cụ... đây là code em kiếm trên mạng side ảnh chạy ngang màn hình.
<style type="text/css">
<!--
#slideCont {
border:solid 1px #000;
text-align:center;
}
#slideCont img {
margin: 5px;
}
-->
</style>
<script type="text/javascript">
function clip() {
// width of the banner container
var contWidth = 425;
// height of the banner container
var contHeight = 90;
var id1 = document.getElementById('slideA');
var id2 = document.getElementById('slideB');
id1.style.left = parseInt(id1.style.left)-1 + 'px';
document.getElementById('slideCont').style.width = contWidth + "px";
document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
id2.style.display = '';
if(parseFloat(id1.style.left) == -(contWidth)) {
id1.style.left = '0px';
}
setTimeout(clip,25)
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
clip();
});
//-->
</script>
<div id="slideCont" style="clip: rect(auto, 425px, 90px, auto); height: 90px; overflow: hidden; position: relative; top: 0px; width: 425px; z-index: 1;">
<div id="slideA" style="height: 90px; left: -194px; overflow: hidden; position: absolute; top: 0px; width: 850px; z-index: 1;">
<div id="innerSlideA" style="float: left;">
<a href="http://www.apache.org/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/1.jpg" width="126" /></a>
<a href="http://www.haan.net/"><img border="0" height="60" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/2.jpg" width="120" /></a>
<a href="http://www.mysql.com/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/3.jpg" width="126" /></a>
</div>
<div id="slideB" style="height: 90px; left: 0px; overflow: hidden; position: relative; top: 0px; width: 425px; z-index: 1;">
<a href="http://www.apache.org/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/4.jpg" width="126" /></a>
<a href="http://www.haan.net/"><img border="0" height="60" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/5.jpg" width="120" /></a>
<a href="http://www.mysql.com/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/6.jpg" width="126" /></a>
</div>
</div>
</div>