兼容IE、FF的悬停banner效果（需配合JQuery使用）

<div id="Flyer">
    <a href="http://www.g.cn/">
        <img src="./Stuff/Images/tmp_doctor.jpg" width="100" height="100" alt="" />
    </a>
    <span>[ <a href="javascript:void(0);" onclick="closeFlayer()">关闭</a> ]</span>
</div>

首先，按照上方的样子，在页面的任意位置添加一个div，用于放置banner。然后，用类似下方的CSS将其以绝对定位的形式放在所需的位置：

#Flyer {...}{
    width: 100px;
    height: 120px;
    background: #ffc;
    position: absolute;
    right: 0px;
    z-index: 5000;
}
#Flyer span {...}{ display: block; height: 20px; background: #9BA542; line-height: 20px; text-align: right;}
#Flyer span a {...}{ color: #fff;}

至于js部分，配合JQuery编写就很简单了：

$(document).ready(function() ...{
    var banner_h = 120; //此处的120为放置banner的div高度
        var scrollTopNum = document.documentElement.scrollTop;
    var scroll_h = document.documentElement.scrollHeight;
    var client_h = document.documentElement.clientHeight;
    var newPostion = scrollTopNum + (client_h - banner_h ); 
    $("#Flyer").css(...{ top: newPostion });

    $(window).scroll(function() ...{
        scrollTopNum = document.documentElement.scrollTop;
        newPostion = scrollTopNum + (client_h - banner_h );
        $("#Flyer").css(...{ top: newPostion });
    });
});

function closeFlayer() ...{
    $("#Flyer").hide();
}

这个小例子是我从项目中直接拿来的，所以有些地方的编写可能不够完善，这里也只是给大家一个参考，虽然网上类似的效果有很多，但是大多都不够规范，所以就自己动手了。