教程集 > 脚本编程 > javascript > 正文 js 两侧悬浮广告的简单示例代码

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

发布时间：2015-03-12 编辑：jiaochengji.com

分享一例js实现的悬浮广告代码，可以悬浮在两侧，效果不错，适合新手入门参考，有兴趣的朋友可以看看。

本节内容：
两侧悬浮广告

例子：

复制代码代码示例:

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>两侧悬浮广告- www.jiaochengji.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>

您可能感兴趣的文章：
JS右下角悬浮广告代码的简单示例
 js 两侧悬浮广告的简单示例代码
 JS悬浮广告代码的简单例子
 js、jQuery设置悬浮广告的代码
 js 左右悬浮广告的实例代码
 网页右侧漂浮广告窗口的js代码
 js右侧漂浮广告的小例子
 js左右悬浮广告(兼容谷歌)的实例代码
 JS悬浮移动窗口(悬浮广告)的特效代码
 js漂浮广告代码大全

上一篇：js左右悬浮广告(兼容谷歌)的实例代码下一篇：Js、css图片幻灯切换的实现代码

[关闭]

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

最近更新

浏览排行