접근성 높은 스크롤 배너
페이지 정보
작성자 서방님 댓글 0건 조회 99회 작성일 07-06-19 11:04본문
<!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=euc-kr" />
<title>배너 스크롤 하기</title>
<style type="text/css">
#Banner_Box { position:relative; width:426px; height:113px; background:url(http://hooney.net/files/code/070611-scroll/img/banner_bg_1.gif) no-repeat left top; overflow:hidden; }
#Banner_Box img { border:none; }
#Banner_Box ul { position:relative; width:424px; height:90px; overflow:hidden; margin:14px 1px 0px 1px; padding:0px; list-style:none; }
#Banner_Box ul li { position:absolute; height:90px; left:0px; top:0px; }
#Banner_Box ul li a { float:left; display:block; height:90px; text-indent:-5000px; }
#Banner_Box ul li a.line_0_off { background:url(http://hooney.net/files/code/070611-scroll/img/banner_pic_0_off.gif) no-repeat left top; }
#Banner_Box ul li a.line_0_on { background:url(http://hooney.net/files/code/070611-scroll/img/banner_pic_0_on.gif) no-repeat left top; }
#Banner_Box ul li a.line_1_off { background:url(http://hooney.net/files/code/070611-scroll/img/banner_pic_1_off.gif) no-repeat left top; }
#Banner_Box ul li a.line_1_on { background:url(http://hooney.net/files/code/070611-scroll/img/banner_pic_1_on.gif) no-repeat left top; }
#Banner_Box ul li a.line_2_off { background:url(http://hooney.net/files/code/070611-scroll/img/banner_pic_2_off.gif) no-repeat left top; }
#Banner_Box ul li a.line_2_on { background:url(http://hooney.net/files/code/070611-scroll/img/banner_pic_2_on.gif) no-repeat left top; }
#Banner_Box ul li a.line_3_off { background:url(http://hooney.net/files/code/070611-scroll/img/banner_pic_3_off.gif) no-repeat left top; }
#Banner_Box ul li a.line_3_on { background:url(http://hooney.net/files/code/070611-scroll/img/banner_pic_3_on.gif) no-repeat left top; }
#Banner_Box ul li a.line_4_off { background:url(http://hooney.net/files/code/070611-scroll/img/banner_pic_4_off.gif) no-repeat left top; }
#Banner_Box ul li a.line_4_on { background:url(http://hooney.net/files/code/070611-scroll/img/banner_pic_4_on.gif) no-repeat left top; }
#Banner_Box ul li a.line_5_off { background:url(http://hooney.net/files/code/070611-scroll/img/banner_pic_5_off.gif) no-repeat left top; }
#Banner_Box ul li a.line_5_on { background:url(http://hooney.net/files/code/070611-scroll/img/banner_pic_5_on.gif) no-repeat left top; }
#Banner_Box ul li.widths { width:54px; }
#Banner_Box ul li.widths a { width:54px; }
#Banner_Box ul li.widthb { width:154px; }
#Banner_Box ul li.widthb a { width:154px; }
</style>
</head>
<body>
<div id="Banner_Box">
<ul>
<li><a href="#">살충제</a></li>
<li><a href="#">방향제</a></li>
<li><a href="#">목욕제품</a></li>
<li><a href="#">소비자접착제</a></li>
<li><a href="#">건축용제품군</a></li>
<li><a href="#">산업용제품권</a></li>
</ul>
</div>
<script type="text/javascript">
function BannerOver() {
this.BannerWrap = document.getElementById(BannerBox);
this.BannerList = this.BannerWrap.getElementsByTagName("ul")[0].getElementsByTagName("li");
this.BannerTotal = this.BannerList.length;
this.BannerLocation = new Array();
this.BannerTarget = new Array();
this.BannerTempWidth;
for ( var i=0; i<this.BannerTotal; i++ ) {
this.BannerLocation[i] = BannerWidth_S*i;
this.BannerList.item(i).style.left = this.BannerLocation[i] + "px";
this.BannerLink = this.BannerList.item(i).getElementsByTagName("a")[0];
this.BannerLink.Num = i;
this.BannerLink.onmouseover = function() {
eval(BannerName+".BannerMove("+this.Num+")");
}
}
this.BannerRandom = Math.floor(Math.random()*this.BannerTotal);
this.BannerMove(this.BannerRandom);
}
BannerOver.prototype.BannerMove = function(val) {
this.BannerTargetSetting(val);
this.BannerLiMove(val);
}
BannerOver.prototype.BannerTargetSetting = function(val) {
for ( var i=0; i<this.BannerTotal; i++ ) {
this.BannerLiw = this.BannerList.item(i);
this.BannerImg = this.BannerLiw.getElementsByTagName("a")[0];
if ( (val+1) == i ) { this.BannerTempWidth = BannerWidth_B } else { this.BannerTempWidth = BannerWidth_S }
if ( i == 0 ) {
this.BannerTarget[i] = 0;
} else {
this.BannerTarget[i] = this.BannerTarget[i-1] + this.BannerTempWidth;
}
if ( val == i ) {
this.BannerLiw.className = "widthb";
this.BannerImg.className = "line_" + i + "_on";
} else {
this.BannerLiw.className = "widths";
this.BannerImg.className = "line_" + i + "_off";
}
}
}
BannerOver.prototype.BannerLiMove = function(val) {
for ( var i=0; i<this.BannerTotal; i++ ) {
this.BannerLocation[i] += (this.BannerTarget[i] - this.BannerLocation[i]) * 0.2;
if ( Math.abs((this.BannerTarget[i] - this.BannerLocation[i])) < 2 ) {
this.BannerTarget[i] = this.BannerTarget[i];
this.BannerList.item(i).style.left = this.BannerTarget[i] + "px";
} else {
this.BannerList.item(i).style.left = parseInt(this.BannerLocation[i],10) + "px";
setTimeout(BannerName+".BannerLiMove("+val+")",100);
}
}
}
var BannerName = "BannerScroll";
var BannerBox = "Banner_Box";
var BannerWidth_S = 54;
var BannerWidth_B = 154;
var BannerScroll = new BannerOver();
</script>
</body>
</html>
출처 : http://hooney.net/2007/06/11/390/
http://hooney.net/files/code/070611-scroll/
댓글목록
등록된 댓글이 없습니다.
