跟随滚动条移动的图片_网页图片特效

·网页特效库 ·网页工具库

背景按钮

导航特效

< 后退 | 收藏网页特效库

推荐网页特效

推荐网页工具

您的位置：网页特效库 >> 网页图片特效 >> 跟随滚动条移动的图片	查看此特效演示

跟随滚动条移动的图片

把如下代码复制到<body>与</body>之间

<STYLE type="text/css">
#floater { 
POSITION: absolute; HEIGHT: 0px;
}
</STYLE> 
<script language="JavaScript">
<!--
//more javascript from http://www.smallrain.net
var Xpos = 0;
var Ypos = 0;
var Ygravity = 0.9;
var scrollPos = 0;
var oldScrollPos = 0;

function FloatMenu() { 
docWidth = 700; // update document width
docHeight = document.body.clientHeight; // update document height
oldScrollPos = scrollPos;
scrollPos = document.body.scrollTop; // update scrollbar position
//if(scrollPos > 600) scrollPos = 580;

Xpos = docWidth; 
Yboundary = scrollPos + 400;

if (floater.offsetTop < Yboundary - 10) // Object is behind boundary
Ypos += 3;

if (floater.offsetTop > Yboundary + 10) // Object is past boundary
Ypos -= 3;

Ypos *= Ygravity; // Slow object down

floater.style.pixelLeft = Xpos + 130;
floater.style.pixelTop += Ypos; // Make object bounce
}

window.setInterval("FloatMenu()", 30);

//-->
</script>

使用说明：把代码中"<img src="http://www.butong.net/image/logo.jpg border=0 width="172" height="90">改为你的图片地址有大小即可，还能为图片加上链接。

上一个特效：图片透明渐变显现

返回列表

下一个特效：自由浮动图像特效