热门标签:   个人网站   个人网页   WAP网站   网页特效   网页教程   收藏本站   设为主页  
首 页   个人网站   个人博客   WAP网站   网页特效   网页教程   软件教程   我要参展
帐 号: 密 码:
 
网站及资源搜索:  
 
  当前位置 > 中国个人网页秀-> 网页特效-> 页面特效-> 图形图像-> 跟随滚动条弹性移动的图片
跟随滚动条弹性移动的图片
整理:Cnwshow.Com   来源:Internet   整理时间:2008-8-22

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>跟随滚动条弹性移动的图片</title>
</head>

<body>
<STYLE type="text/css">
#floater {
POSITION: absolute; HEIGHT: 0px;
}
</STYLE>
<script language="JavaScript">
<!--

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>

<div id=floater border="0">
<a href="#"><img src=rmb.jpg border=0 width="172" height="90"></a>
</div>

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="151%" id="table1">
<tr>
<td> </td>
</tr>
</table>
</body>
</html>

运行代码预览特效
  图形图像 热门点击
·图片翻页效果代码
·自由变化大小的图片
·给图片加注释
·向上下左右滚动图片的特效
·像篮球一样跳动的图片
·水中倒影
·自由浮动图像特效
·鼠标让图片震动
·图片渐渐显隐
·图片渐渐显示
  酷站推荐
关于本站  联系本站  免责声明  使用帮助  网站搜索  网站地图
Copyright © 2005-2008 Cnwshow.Com Inc All Rights Reserved 中国个人网页秀
技术支持:网秀科技   QQ群:36941957  客服QQ:151483161  粵ICP备05134415号