悬浮卡片主要用于功能集合或者页面内容扩展场景，目的是提升页面的操作效率。例如微信聊天界面下拉出现的小程序卡片，高德地图首页卡片,或者iOS系统随时可以调用的系统控制卡片和消息卡片。
<script>var class_name=function()
{
this.top=500//与顶部距离
//左侧广告
this.l_width=100//宽
this.l_height=100//高
this.l_left=100//与左侧的距离
this.l_src="http://img.baidu.com/img/logo-zhidao.gif"//图片路径
this.l_url="http://www.baidu.com/"//图片链接地址
//右侧广告
this.r_width=100//宽
this.r_height=100//高
this.r_right=100//与右侧的距离
this.r_src="http://img.baidu.com/img/logo-zhidao.gif"//图片路径
this.r_url="http://www.baidu.com/"//图片链接地址
}
var c=new class_name()
document.write('<div id="xf_left_gg" style="position:absolutewidth:'+c.l_width+'pxheigth:'+c.l_height+'pxleft:'+c.l_left+'pxtop:'+c.top+'px"><a href="'+c.l_url+'" target="_blank"><img src="'+c.l_src+'" width="'+c.l_width+'" height="'+c.l_height+'" border="0"></a></div>')
document.write('<div id="xf_right_gg" style="position:absolutewidth:'+c.r_width+'pxheigth:'+c.r_height+'px" right:'+c.r_right+'pxtop:'+c.top+'px"><a href="'+c.l_url+'" target="_blank"><img src="'+c.l_src+'" width="'+c.l_width+'" height="'+c.l_height+'" border="0"></a></div>')
function lxs_xf()
{
var t=(document.body.scrollTop>0)?(parseInt(document.body.scrollTop)+c.top):c.top
$("xf_left_gg").style.left=c.l_left+"px"
$("xf_left_gg").style.top=t+"px"
$("xf_right_gg").style.right=c.r_right+"px"
$("xf_right_gg").style.top=t+"px"
}
function $(id){return document.getElementById(id)}
if(window.attachEvent)
{
window.attachEvent("onload",lxs_xf)
window.attachEvent("onscroll",lxs_xf)
}
else
{
window.addEventListener("load",lxs_xf,false)
window.addEventListener("scroll",lxs_xf,false)
}
</script>
随滚动而滚动，css就可以实现，也就是固定在屏幕固定位置，用 position:fixed即可，关闭按钮可以用document.getElementById('').style.display='none'即可，如<div style="width:500pxheight:200pxbackground-color:#F00position:fixedleft:100pxtop:200px" id="test">
<button onclick="document.getElementById('test').style.display='none'">关闭</button>
</div>
其中left和top都是相对于屏幕的位置
