網(wǎng)站建設小代碼之點(diǎn)擊可隱藏顯示的層

發(fā)布日期：[2010/3/20] 編輯：奇億廣州網(wǎng)站建設

一個(gè)點(diǎn)擊可顯示再點(diǎn)擊隱藏層的代碼，并可隨瀏覽器滾動(dòng)條拉伸而滾動(dòng)，可廣泛適用于廣告、在線(xiàn)客服、快捷留言發(fā)布等功能的精短代碼。

<div style="width:100px;height:100px;position:absolute;left:-200px;top:80px;background:#FFCC00;border:1px solid #999;">點(diǎn)擊可隱藏</div>
<div style="position:absolute;left:2px;top:80px;"><img src=http://www.studstu.com/images/logo.gif alt="點(diǎn)擊打開(kāi)" /></div>
<script type="text/Ｊavascript">
<!--
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.Ｏnclick = function(){
                img.style.left = "2px";
                div.style.left = "-200px";
        }

        img.Ｏnclick = 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火狐瀏覽器中測試通過(guò)，其他未測試。Ｊ和Ｏ改成小寫(xiě)的字母j和o