<!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. php可获取客户端信息

    <?php echo "<br>".$_SERVER['PHP_SELF'];#当前正在执行脚本的文件名,与 document root相关 echo " ...

  2. Swift - 炫酷放射弹出按钮菜单（改造自AwesomeMenu）

    这个是一个第三方按钮菜单组件,原版是使用Objective-C编写的名为AwesomeMenu的组件,地址是:https://github.com/levey/AwesomeMenu 这里改造成了Sw ...

  3. linux log系统图

    log系统图 先贴图,怎么样,效果还不错吧,根据个人理解画的,如果不行将就用着吧.   解说 syslog是一种机制,在wiki中说这种机制可以使用udp,tcp,unix socket等把日志记录在 ...

  4. 用qsort排序

     冒泡,快排都是常见的排序方法,这里介绍用头文件里的qsort函数排序.只是自己要先一个cmp函数. #include<stdlib.h>//qsort的头文件 int a[100]= ...

  5. Ello讲述Haar人脸检测：易懂、很详细、值得围观

    源地址:http://www.thinkface.cn/thread-142-1-1.html 由于工作需要,我开始研究人脸检测部分的算法,这期间断断续续地学习Haar分类器的训练以及检测过程,在这里 ...

  6. Cocos2d-x内存管理解说在ios开发中

    使用过 Cocos2d-x 都知道,其中有一套自己实现的内存管理机制,不同于一般 C++ 的编写常规,而在使用前,了解其原理是有必要的,网上已经有很多对内部实现详细解说的文章.而对于使用者而言,并不需 ...

  7. 浅谈 Python 程序和 C 程序的整合

    源地址:http://www.ibm.com/developerworks/cn/linux/l-cn-pythonandc/ 概览 Python 是一种用于快速开发软件的编程语言,它的语法比较简单, ...

  8. android 自己定义通知栏遇到的问题

    首先看报错信息: E/AndroidRuntime(12220): FATAL EXCEPTION: main E/AndroidRuntime(12220): Process: gn.com.and ...

  9. hdu2389（HK算法）

    传送门:Rain on your Parade 题意:t个单位时间后开始下雨,给你N个访客的位置(一维坐标平面内)和他的移动速度,再给M个雨伞的位置,问在下雨前最多有多少人能够拿到雨伞(两个人不共用一 ...

  10. webapi Task

    webapi+Task并行请求不同接口实例 标题的名称定义不知道是否准确,不过我想表达的意思就是使用Task特性来同时请求多个不同的接口,然后合并数据:我想这种场景的开发对于对接过其他公司接口的人不会 ...