js 两侧悬浮广告的简单示例代码

发布时间:2019-10-31编辑:脚本学堂
分享一例js实现的悬浮广告代码,可以悬浮在两侧,效果不错,适合新手入门参考,有兴趣的朋友可以看看。

本节内容:
两侧悬浮广告

例子:
 

复制代码 代码示例:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>两侧悬浮广告- www.jb200.com</title>
<script language="javascript" type="text/javascript">
lastScrollY=0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
 diffY = document.documentElement.scrollTop;
else if (document.body)
 diffY = document.body.scrollTop;
else
    {/*Netscape stuff*/}
//(diffY);
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else
percent=Math.floor(percent);
document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
document.getElementById("lovexin14").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
//(lastScrollY);
}
suspendcode12="<DIV id="lovexin12" style='left:2px;POSITION:absolute;TOP:120px;'><iframe WIDTH="100" HEIGHT="300" MARGINWIDTH="0" MARGINHEIGHT="0" HSPACE="0" VSPACE="0" FRAMEBORDER="0" SCROLLING="no" BORDERCOLOR="#000000" SRC="http://hx.hexun.com/html.ng/adsize=100x300&place=lefttop&site=homeway-blog"></IFRAME></div>"
suspendcode14="<DIV id="lovexin14" style='right:2px;POSITION:absolute;TOP:120px;'><IFRAME WIDTH="100" HEIGHT="300" MARGINWIDTH="0" MARGINHEIGHT="0" HSPACE="0" VSPACE="0" FRAMEBORDER="0" SCROLLING="no" BORDERCOLOR="#000000" SRC="http://hx.hexun.com/html.ng/adsize=100x300&place=righttop&site=homeway-blog"></IFRAME></div>"
document.write(suspendcode12);
document.write(suspendcode14);
window.setInterval("heartBeat()",1);
</script>
<style type="text/css">
<!--
#lovexin12,#lovexin14{
   width:100px;
   height:250px;
   background-color:#e5e5e5;
   border:1px solid #ddd;
}
html,body{
  height:1000px;
  }
#mm{
  height:1000px;
  }
-->
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
脚本学堂提醒:这里可以多添加一些回车,以测试悬浮广告效果。</body>
</html>