appstore卡片悬浮效果

JavaScript07

appstore卡片悬浮效果,第1张

appstore卡片悬浮效果：

悬浮卡片主要用于功能集合或者页面内容扩展场景，目的是提升页面的操作效率。例如微信聊天界面下拉出现的小程序卡片，高德地图首页卡片,或者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都是相对于屏幕的位置