兼容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();
}

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