묻고답하기
크롬에서 갤러리 스크롤 소스가 동작을 하지 않아서 애를 먹고 있습니다.
2015.02.11 12:17
첫번째 소스는 scroll1.html 이라고 iframe 안에서 gallery.htm을 불러들여 갤러리를 스크롤 해주고 있는데요 이게 IE11에서는 동작하지만 크롬/파이어팍스에선 동작하지 않습니다. 이게 왜 동작을 하지 않는지 하루 종일 궁리해 봐도 모르겠네요. 어떤 웹표준 문제인것 같은데 어디가 틀렸는지 모르겠습니다.
해당 소스를 링크해 드립니다. http://www.blrun.net/temp/scroll1.html
scroll1.html
<table width="440" border="0" cellspacing="0" cellpadding="0"> <tr> <td width=246 valign="top"> <table width="246" border="0" cellspacing="0" cellpadding="0" height="154"> <tr> <td colspan="3"><img src="/images/gallery/1.gif" width="246" height="21"></td> </tr> <tr> <td width="22"><img src="/images/gallery/3.gif" width="22" height="111"></td> <td width="193" height="111"><iframe border="0" frameborder="0" marginwidth="0" scrolling="no" src="/temp/gallery.htm" width="193" height="111" marginhieght="0" name="main"></iframe></td> <td width="31"><img src="/images/gallery/4.gif" width="31" height="111"></td> </tr> <tr> <td colspan="3"><img src="/images/gallery/2.gif" width="246" height="22"></td> </tr> </table> </td> </tr> </table>
gallery.htm
<html>
<head>
<title>www.happyscript.com</title>
</head>
<body>
<script language="JavaScript">
var scrollerwidth=193 //SIZE
var scrollerheight=111 //SIZE
var scrollerbgcolor='FFFFFF'
var pausebetweenimages=2000
var slideimages=new Array()
slideimages[0]='<img src="/images/gallery/1.jpg" border="0">'
slideimages[1]='<img src="/images/gallery/2.jpg" border="0">'
slideimages[2]='<img src="/images/gallery/3.jpg" border="0">'
if (slideimages.length>1)
i=2
else
i=0
function move3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelLeft>0&&tdiv.style.pixelLeft<=5){
tdiv.style.pixelLeft=0
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(second2)",pausebetweenimages)
return
}
if (tdiv.style.pixelLeft>=tdiv.offsetWidth*-1){
tdiv.style.pixelLeft-=5
setTimeout("move3(tdiv)",100)
}
else{
tdiv.style.pixelLeft=scrollerwidth
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelLeft>0&&tdiv2.style.pixelLeft<=5){
tdiv2.style.pixelLeft=0
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(first2)",pausebetweenimages)
return
}
if (tdiv2.style.pixelLeft>=tdiv2.offsetWidth*-1){
tdiv2.style.pixelLeft-=5
setTimeout("move4(tdiv2)",100)
}
else{
tdiv2.style.pixelLeft=scrollerwidth
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function startscroll(){
if (document.documentElement){
move3(first2)
second2.style.left=scrollerwidth
}
}
window.onload=startscroll
</script>
<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgcolor=&{scrollerbgcolor}; visibility=hide>
<layer id="first" left="1" top="0" width="1" height="200" z-index="1" ></layer>
<layer id="second" left="0" top="0" width="1" height="200" z-index="1"></layer>
</ilayer>
<script language="JavaScript">
if (document.documentElement){
document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1;top:0;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}
</script>
</body>
</html>
이 문제는 "자객의 눈물" 블로그에서 제공해 주신 자바스크립트를 이용 소스를 개조해 해결했습니다. 다른 분들도 참고바랍니다.
출처: 자객의 눈물
<div style="width:191px; height:111px;"> <script language="javascript"> var htmlstr_m = "", flag=true, mouse=1, speed=30, wait=1000, temp=0, m_amount=191, m_left=191; var ctnt=new Array(), i=0, j=0; function startText_m() { for (i=0; i<ctnt.length; i++) insertText_m(i); window.setTimeout("scroll_m()",wait); } function scroll_m() { if (mouse && flag) { for (i=0;i<ctnt.length;i++) { temp++; tmp = document.getElementById('scroll_area'+i).style; tmp.left = parseInt(tmp.left) - 1; if (parseInt(tmp.left) <= m_left*(-1)) { tmp.left = m_left*(ctnt.length-1); } if (temp>(m_amount-1)*ctnt.length) { flag=false; temp=0; window.setTimeout("flag=true;temp=0;",wait); } } } window.setTimeout("scroll_m()",speed); } function insertText_m(i) { htmlstr_m='<div style="left:'+((m_left)*i)+'px; width:'+(m_amount+0)+'px; position: absolute; top: 0px;padding:0 0 0 0" id="scroll_area'+i+'">\n'; htmlstr_m+=ctnt[i]+'\n'+'</div>\n'; document.write(htmlstr_m); //alert(i + " " + htmlstr_m); } ctnt[0] = "<img src='/images/gallery/1.jpg' border='0'>"; ctnt[1] = "<img src='/images/gallery/2.jpg' border='0'>"; ctnt[2] = "<img src='/images/gallery/3.jpg' border='0'>"; </script> <div style="height: 111px; width: 191px; position: absolute; overflow:hidden;" onMouseover="mouse=0" onMouseout="mouse=1" id="scroll_div"><script language="Javascript">startText_m();</script> </div> </div>