<!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"> <mce:style type="text/css"><!-- .obj{width:180px; height:300px; position:relative;} .box{ width:160px; height:300px; border:1px solid #666666;} .btn{ width:18px; height:60px; background:#F00; float:left; position:absolute; right:0; top:0; cursor:pointer;} --></mce:style><style type="text/css" mce_bogus="1">.obj{width:180px; height:300px; position:relative;} .box{ width:160px; height:300px; border:1px solid #666666;} .btn{ width:18px; height:60px; background:#F00; float:left; position:absolute; right:0; top:0; cursor:pointer;}</style> <body> <div id="obj" class="obj"> <div class="box" id="box"></div> <div class="btn" οnclick="set()" id="btn">点<br />我</div> </div> <div style="height:2000px;"></div> <mce:script type="text/javascript"><!-- var ig=document.getElementById("obj"); var box=document.getElementById("box"); var btn=document.getElementById("btn"); var w=box.offsetWidth; var isIE = (document.all) ? true : false; var isIE6 = isIE && ([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 6); var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } } ig.style.position ="fixed"; ig.style.zIndex='1000'; ig.style.left='0'+"px"; ig.style.top='100'+"px"; if(isIE6){ ig.style.position ="absolute"; ig._fixed = Bind(ig, function(){ ig.style.marginTop = document.documentElement.scrollTop + "px"; ig.style.marginLeft = document.documentElement.scrollLeft + "px";}); ig._fixed() window.attachEvent("onscroll", ig._fixed); } function set(){ if(ig.offsetLeft+w==0) d(1); else d(-1); } function d(n){ var T=setTimeout("d("+n+")",1); n=n<0?n-20:n+20 ig.style.left=ig.offsetLeft+n+"px"; if(ig.offsetLeft+w<=0){ clearTimeout(T); ig.style.left=-w+"px"; btn.style.backgroundColor="#0000FF"; } if(ig.offsetLeft>=0){ clearTimeout(T); ig.style.left=0; btn.style.backgroundColor="#FF0000"; } } // --></mce:script> </body> </html>