javascript代码求助广告层跟随屏幕滚动

发布网友发布时间：2022-04-28 16:34

共4个回答

懂视网时间：2022-05-16 01:09

这篇文章主要为大家详细介绍了JavaScript实现跟随滚动缓冲运动广告框，页面左右两边跟随式广告框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

当我们浏览一些网页时我们会发现页面的的边上会有广告图片，当滚动滚动条的时候这些广告图片会跟随性的随页面一起运动（这里我叫它为广告框）。一些网页的广告框是固定在浏览器上的用background：fixed；便可实现。这里我用JavaScript简单的制作了一个随滚动缓冲运动的广告框。

制作的原理比较简单，大家都有一个完美的js运动框架，这里的缓冲运动需要用到。这里的广告框设定的是跟随滚动条缓冲运动并运动到浏览器的中间位置。需要理解的是运动距离的计算和一些细节上的处理（一些BUG的预防）

这是我在这里使用的一个js运动框架，传递的参数只有一个并不是完美运动框架。传递的参数是广告框的运动距离，因此我在运动框架内又获取了一次对象。

样式和布局代码

 <style>
 #p1{
 width: 100px;
 height: 100px;
 background: #ccc;
 position: absolute;
 //使用绝对定位让其处于右上方
 right: 0;
 top: 0;
 </style>

 <body style="height: 2000px;">
 <p id="p1"></p>
 </body>

js代码

这里增加了.onscroll属性目的是当滚动滚动条的时候也加载页面,广告框就能随着滚动条一起运动了。还增加了.onresize属性，由于我要实现广告框一直是运动到浏览器的中间位置，然而当我改变浏览器高度的时候也要实现广告框的运动，所以增加该属性，当浏览器大小改变时加载。

当滚动条滚动到菜单位置时，怎样让他固定到浏览器顶端，当滚动条回到他原来位置时，他就停在哪里。
网上很多都是要引用一个jquery插件，感觉很麻烦。
该怎样写一个这样的效果呢？

大致写个思路吧，肯定是自己调试比直接引用jQuery插件麻烦大家才会纷纷引插件来用

用onscroll事件判断用户滚动的位置，用菜单元素的offsetTop属性判断它的显示位置

如果滚动到了菜单到顶的时候，把菜单的display改成fixed

等下一个菜单滚到某个适当的位置时，把原来菜单的diplay改回来，把新菜单改成fixed

热心网友时间：2022-05-15 22:17

请把第17行改为:
document.getElementById("Layer1").style.pixelTop=document.body.scrollTop+top;

-------------------------------
http://www.diukai.com
-------------------------------

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<script language="javascript">
var top;

function getTop()
{

top=document.getElementById("Layer1").style.pixelTop;
}

function move()
{

document.getElementById("Layer1").style.pixelTop=document.body.scrollTop+top;
}

function myClose()
{
document.getElementById("Layer1").style.display="none";
}

window.onscroll=move;
</script>
<style type="text/css">

</style>
</head>

<body onLoad="getTop()">
a
 
a
<div id="Layer1">
<div id="Layer2"><a href="javascript:myClose();">关闭</a></div>
</div>
 
a
 
a
 
a
 
a
 
a
 
a
 
a
 
a
 
a
 
a
 
a
 
 
a
 
a
 
a
 
a
 
a
 
a
 
a
 
a
 
 
a
 
a
 
a
 
a
 
a
 
a
 
a
 
a
 
a

</body>
</html>

热心网友时间：2022-05-15 23:35

以前扒的一段代码。

放在</head>和<body>之间就可以了。你整理下应该对你有所帮助

<script language=javascript>function close163news(){searchspe.style.visibility='hidden';searchspe2.style.visibility='hidden';} var specialcode="<DIV id=searchspe style='Z-INDEX: 100; right: 1px; POSITION: absolute; TOP: 30px;'><TABLE cellSpacing=0 cellPadding=0 width=150 style='font-size:12px;color:#ffffff'><TR bgcolor=#C54A00><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick='close163news()' width=30>关闭</TD></TR></TABLE>这里放入代码</DIV>";document.write(specialcode);lastScrollX=0;function heartBeat0(){diffY=document.body.scrollTop;percent=.1*(diffY-lastScrollX);if(percent>0)percent=Math.ceil(percent);else percent=Math.floor(percent);document.all.searchspe.style.pixelTop+=percent;lastScrollX=lastScrollX+percent;}window.setInterval("heartBeat0()",1);var specialcode2="<DIV id=searchspe2 style='Z-INDEX: 100; left: 1px; POSITION: absolute; TOP: 30px;'><TABLE cellSpacing=0 cellPadding=0 width=150 style='font-size:12px;color:#ffffff'><TR bgcolor=#12BDFF><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick='close163news()' width=30>关闭</TD></TR></TABLE>这里放入代码</DIV>";document.write(specialcode2);lastScrollY=0;function heartBeat1(){diffY=document.body.scrollTop;percent=.1*(diffY-lastScrollY);if(percent>0)percent=Math.ceil(percent);else percent=Math.floor(percent);document.all.searchspe2.style.pixelTop+=percent;lastScrollY=lastScrollY+percent;}window.setInterval("heartBeat1()",1);</script>

热心网友时间：2022-05-16 01:09

你的两个z-index属性不能一样

javascript代码求助 广告层跟随屏幕滚动

javascript代码求助广告层跟随屏幕滚动