<!DOCTYPE HTML>

<!--

-->

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

#div1{

	width:100px;

	height:150px;

	background:red;

	position:absolute;

	right:0;

	bottom:0;

}

</style>

<script>

window.onscroll=function (){

	var oDiv=document.getElementById('div1');

	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//做兼容

	startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);

};

var timer=null;

function startMove(iTarget)

{

	var oDiv=document.getElementById('div1');

	clearInterval(timer);

	timer=setInterval(function (){

		var speed=(iTarget-oDiv.offsetTop)/4;

		speed=speed>0?Math.ceil(speed):Math.floor(speed);

		if(oDiv.offsetTop==iTarget)

		{

			clearInterval(timer);

		}

		else

		{

			oDiv.style.top=oDiv.offsetTop+speed+'px';

		}

	},30);

}

</script>

</head>

<body style="height:2000px;">

    <div id="div1"></div>

</body>

</html>

效果图：

（40）JS运动之右下角悬浮框的更多相关文章

  1. JS错误记录 - 右侧悬浮框 - 缓冲运动

    本次练习错误总结: 1.  正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...

  2. JS-缓冲运动-对联型悬浮框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. JavaScript侧边悬浮框

    <script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=d ...

  4. （41）JS运动之右側中间悬浮框（对联悬浮框）

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  5. js实现页面悬浮框

    当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE ht ...

  6. js右侧悬浮框

    示例:屏幕右侧悬浮框 原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop ...

  7. 菜鸟学JS（三）——自动隐藏的悬浮框

    今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...

  8. HTML5气泡悬浮框(已经加上完整文件)

    源文件链接:http://pan.baidu.com/s/1pKHlNSn 设计气泡悬浮框 1.在网页设计中,气泡悬浮框常常用于页面中为某些对象显示提示信息,恰当地使用气泡悬浮框能够使网页布局更加完美 ...

  9. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

随机推荐

  1. 节点地址的函数list_entry()原理详解

    本节中,我们继续讲解,在linux2.4内核下,如果通过一些列函数从路径名找到目标节点. 3.3.1)接下来查看chached_lookup()的代码(namei.c) [path_walk()> ...

  2. 人人网javascript面试题

    JavaScript面试题要求:以下题目必须从一至四题中,选出三道题,使用原生代码实现,不可使用任何框架,第五题为选作题. 一.  在页面的固定区域内实现图片的展示       <ignore_ ...

  3. python开发与实战content

    课时10_字典和集合 课时11 练习:列表运算.doc 课时12_讨论答疑:日志.引用.单例模式等 课时13_函数式编程 课时14 练习:编程实现若干函数.doc 课时15_练习讲解:编写函数 课时1 ...

  4. WinExec函数，启动其他应用程序

    WinExec The WinExec function runs the specified application. Note  This function is provided only fo ...

  5. git 提交ignore files

    1,首先在命令行创建.gitignore文件 $ touch .gitignore 2,在文件.gitignore 加入要忽略的文件入 $ echo *.class > .gitignore 3 ...

  6. pc2日记——有惊无险的第二天2014/08/29

    今天下午如期的用pc2进行了第二场比赛.因为昨天的出错经历和早上充足的准备,下午的比赛尽管在開始的时候出了点小小的问题,但总的来说还是非常成功的. 早上八点过去504開始又一次配置client,由于开 ...

  7. VC++ WIN32 sdk实现按钮自绘详解 之二.

    网上找了很多,可只是给出代码,没有详细解释,不便初学者理解.我就抄回冷饭.把这个再拿出来说说. 实例图片:    首先建立一个标准的Win32 Application 工程.选择a simple Wi ...

  8. form表单提交不成功提示

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  9. Webserver管理系列：5、利用MSConfig排查木马

    木马程序最喜欢去的地方有两个一个是服务里面,一个是启动里面.利用msconfig我们能够高速的找到可疑程序. 在命令行中输入msconfig回车 选择服务项: 这里面的服务有非常多我们非常难排查,我告 ...

  10. 用XCA（X Certificate and key management）可视化程序管理SSL 证书（2）--生成SSL证书请求

    在上个章节中,我们提到了怎样安装XCA(X Certificate and key management)程序.这个章节我们開始正式介绍怎样用XCA生成证书请求.假设大家用过java的话.肯定知道jd ...