http://phpschool.com/gnuboard4/bbs/board.php?bo_table=talkbox&wr_id=1774281&page=2 이걸 보고 한 번 만들어 봤습니다. 뚝뚝 끊기는 느낌을 어떻게 줄여 볼려고 했는데 속도를 유지하면서 끊기는 느낌을 줄이기가 어렵네요.
ie8에서 잘 돌아가고, 크롬에서는 잘 돌아가다가 쓸데없는 태그, 자스 좀 뺏더니 화면도 안나오네요. 이유를 아시는 분은 댓글 좀 달아 주세요. (다시 또 되네요. 크롬 캐시와 관련된 문제인 거 같기도 하고...)
예시는 링크 1번
<body onload=init()> <div id=divarea style=width:800px;height:600px;overflow:hidden;position:relative> <div id=div1 style=position:absolute;top:0px;left:0px><img id=img1 src="a6.jpg></div> <div id=div2 style=position:absolute;top:0px;left:800px><img src=a6.jpg></div> </div>
<script> var divarea,div1,div2,img1,tmp
divarea=document.getElementById('divarea') div1=document.getElementById('div1') div2=document.getElementById('div2') img1=document.getElementById('img1')
function init(){ divarea.style.height=img1.offsetHeight autoscroll(30,1) }
function autoscroll(nexttime,scrollamount){ div1.style.left=parseInt(div1.style.left)-scrollamount if(parseInt(div1.style.left)<((-1*img1.offsetWidth)+divarea.offsetWidth)){ div2.style.left=parseInt(div2.style.left)-scrollamount if(parseInt(div1.style.left)==(-1*img1.offsetWidth)){ tmp=div1 div1=div2 div2=tmp div2.style.left=divarea.offsetWidth } } setTimeout('autoscroll('+nexttime+','+scrollamount+')',nexttime) } </script> |