广告条随滚动条的移动而移动

文章来源：蓝色理想

<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>

<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;
 
 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;
 }
 }
 
 
 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;
 }
 
 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>

跟随滚动条的图片 
(跟随滚动的图层名字:floater,必须使用该名称才有，跟随滚动，以及拖放属性)

</body>
</html>

广告条随滚动条的移动而移动相关推荐

java 滚动条滚动_广告条随滚动条的移动而移动
文章来源:蓝色理想跟随滚动条的图片#floater{ POSITION:absoJavaScript 文章来源:蓝色理想跟随滚动条的图片 #floater { POSITION: ab ...
Android之高仿京东APP首页“京东快报”自动向上滚动的广告条
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/51013562 本文出自:[顾林海的博客] ##前言上次在京东APP上 ...
仿京东首页的京东快报，自动向上滚动的广告条
向上滚动的广告条实现原理起初看到这个效果时,第一个想法就是向上移动动画+定时器,但当我准备写时发现,滚动时上下文字都是逐渐出来的(有点像滑动的),如果用动画的话不行,如果用滑动的话,那就是List ...
Android控件——ViewFlipper的使用，垂直滚动广告条
1 前言之前开发过一个TextView的滚动显示,但是局限性比较大,只能显示文字,不能显示图片等其他View.对比淘宝App的淘宝头条,发现显示的内容挺丰富的.网上搜索了下资料发现android自带 ...
自定义控件——轮播广告条
1. 效果图 2. 布局文件 <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android" ...
网站页首可关闭广告条
<html><head><title>网站页首可关闭广告条</title><style type="text/css"> ...
自定义控件（视图）2期笔记03：自定义控件之使用系统控件（优酷案例之广告条Viewpager）...
1.首先我们看看运行效果,如下: 2. 下面就是详细实现这个效果的过程: (1)新建一个Android工程,命名为"广告条的效果",如下: (2)这里用到一个控件ViewPager ...
利用RecyclerView实现无限轮播广告条
代码地址如下: http://www.demodashi.com/demo/14771.html 前言: 公司产品需要新增悬浮广告条的功能,要求是可以循环滚动,并且点击相应的浮条会跳转到相应的界面,在 ...
Android 竖直滚动广告条、上下滚动广告条，View滚动广告条；
四种方式实现仿淘宝滚动广告条: TextView+Handler延时动画实现滚动效果: 自定义ViewFlipper 实现滚动效果:(用法简单,推荐使用) RecyclerView+子线程延时实现 ...

广告条随滚动条的移动而移动

广告条随滚动条的移动而移动相关推荐

最新文章

热门文章