文章来源：蓝色理想
<html>
<head>
<title>跟随滚动条的图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<STYLE media=screen type=text/css>
#floater {
POSITION: absolute; VISIBILITY: visible; WIDTH: 10px; Z-INDEX: 10
}
//不知道为什么要定义floater为样式表!
</STYLE>
<script language="javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" >
<div id="floater" style="position:absolute; left:436px; top:60px; width:152px; height:178px; z-index:12"><img border=0 src="
<SCRIPT language=javascript>
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft += percent;
if(NS) document.floater.left += percent;
lastScrollX = lastScrollX + percent;
}
}
<!-- /STALKER CODE -->
<!-- DRAG DROP CODE 鼠标拖放事件-->
function checkFocus(x,y) {
stalkerx = document.floater.pageX;
stalkery = document.floater.pageY;
stalkerwidth = document.floater.clip.width;
stalkerheight = document.floater.clip.height;
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
else return false;
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("floater") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.floater;
StalkerTouchedX = e.pageX-document.floater.pageX;
StalkerTouchedY = e.pageY-document.floater.pageY;
}
}
return true;
}
function moveIt(e) {
if (whichIt == null) { return false; }
if(IE) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY);
currentX = newX; currentY = newY;
whichIt.style.pixelLeft += distanceX;
whichIt.style.pixelTop += distanceY;
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
event.returnValue = false;
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
return false;
}
return false;
}
function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (Event.MOUSEMOVE);
return true;
}
<!-- DRAG DROP CODE 鼠标拖放事件-->
if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown = grabIt;
window.onmousemove = moveIt;
window.onmouseup = dropIt;
}
if(IE) {
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
</SCRIPT>
<font size="7" color="#FF0000">跟随滚动条的图片</font><br>
<font size="4" color="#FF0000">(跟随滚动的图层名字:floater,必须使用该名称才有，跟随滚动，以及拖放属性) </font><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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
分享到：
相关推荐
浮动广告，跟随滚动条移动的源码，大家可以看一下
随滚动条广告的QQ咨询随滚动条广告的QQ咨询
本人花了一上午的时间，终于测试通过，好东西大家分享，虽然分要的比较多，但绝对值，留着以后使用。效果演示地址： http://www.shoppinghelps.com/sale.aspx
js固定层不随滚动条滚动图片广告固定层在顶部
根据滚动条移动的多层浮动效果，实现页面广告效果。
2 调用运动函数的时候付入的参数其实就是先用整个可视区的高度减去盒子的高度，然后在加上可视区到顶部的距离，这样可以实现的就是把悬浮广告停在右下角的位置 3 根据上面的分析则说明如果把可视区的高减掉盒子的高...
亲测很不错的一个对联广告,分享给大家对联广告代码广告代码
js练习4：制作带关闭按钮的滚动广告.zip
javascript时尚广告特效
此实例通过对滚轮事件的监听，通过滚轮控制滚动条的上下移动，可以将其修改后运用与使用滚轮缩放图片、改变透明度等特效。 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <...
全屏漂浮广告 原理： 当图片按路径1移动的时候top和left值是增大的当到...因为图片是要随滚条的移动的 所以图片和顶部的距离应该是：图片距离顶部的初始值+滚条滚动的距离 ;把图片具顶部的初始值赋给了t ;滚动的高度是
javascript的特效之一，广告漂浮，拉动页面的滚动条，广告随之移动
自定义QLabel控件，自动判断文本长度与显示框长度的大小，显示框太短，则自动滚动显示，否则正常显示，类似于广告屏的滚动播放效果，qt 5源码，编译测试通过。
本文实例讲述了js实现网站最上边可关闭的浮动广告条。分享给大家供大家参考。具体如下： 这是一款广告条代码,平时浮动在网站最上边,可关闭,设计唯美简洁,带关闭按钮,自适应网页宽度,色调明了,相信有不少朋友会喜欢的...
在网站制作中,可以添加四周的广告条,随下拉而移动,非常实用
2、网页左侧实现带关闭按钮、随滚动条上下移动的广告层 3、随机漂浮的图片广告 4、向上、向左滚动的信息（利用marquee跑马灯实现） 5、最热招聘（本页内链接） 6、页面打开时，弹出广告窗口 7、二级的横向菜单，...
89:迅雷网七屏flash广告轮换下载 90：奥林匹克运动会焦点广告下载 91:一种选项卡样式广告代码下载 92：网站页首可关闭广告条下载 93:flash无限图片展示广告下载 94：电子杂志首页flash焦点图下载 95:Zcom电子杂志...
89:迅雷网七屏flash广告轮换下载 90：奥林匹克运动会焦点广告下载 91:一种选项卡样式广告代码下载 92：网站页首可关闭广告条下载 93:flash无限图片展示广告下载 94：电子杂志首页flash焦点图下载 95:Zcom电子杂志...
CSS实现对联广告，广告由图片构成，自动跟随滚动条移动。
2、支持鼠标拖曳滚动操作的列表，同时支持系统滚动条样式 3、支持两段扩展的内置播放器，选择时间点更容易，操作更方便 4、快速使用向导，指导新用户快速熟悉软件操作 5、转换开始与结束时间记录列表，更清晰检查...