一个点击可显示再点击隐藏层的代码,并可随浏览器滚动条拉伸而滚动,可广泛适用于广告、在线客服、快捷留言发布等功能的精短代码。
<div style='width:100px;height:100px;position:absolute;left:-200px;top:80px;background:#FFCC00;border:1px solid #999;'>点击可隐藏</div>
<div style='position:absolute;left:2px;top:80px;'><img src=alt='点击打开' /></div>
<script type='text/Javascript'>
<!--
var i=0, str='';while(i++<100){str+='<br>'}
document.write(str);
var c=0;
var div = document.getElementsByTagName('div')[0];
var img = document.getElementsByTagName('div')[1];
div.Onclick = function(){
img.style.left = '2px';
div.style.left = '-200px';
}
img.Onclick = function(){
div.style.left = '2px';
img.style.left = '-200px';
}
var y = parseInt(div.style.top);
var my = parseInt(img.style.top);
window.onscroll = function(){
clearInterval(c);
c = setInterval(function(){
var cy = parseInt(div.style.top);
var mcy = parseInt(img.style.top);
var dy = document.body.scrollTop || document.documentElement.scrollTop;
div.style.top = (cy + (dy -(cy-y))*0.1) + 'px';
img.style.top = (mcy + (dy -(mcy-my))*0.1) + 'px';
},10);
}
//-->
</script>
IE6.0和Fire火狐浏览器中测试通过,其他未测试。J和O改成小写的字母j和o