<!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. boost.asio系列——io_service

    IO模型 io_service对象是asio框架中的调度器,所有异步io事件都是通过它来分发处理的(io对象的构造函数中都需要传入一个io_service对象). asio::io_service i ...

  2. ADS1.2安装

    一.ADS1.2的安装 1. 解压 2. 双击打开ads1.2 3.我们选择当中的SETUP.EXE文件,进行安装 4.点击Next: 5.这是许可文件,假设允许的话选择Yes: 6.选择安装文件夹, ...

  3. 《C++语言基础》实践參考——数组作数据成员

    返回:贺老师课程教学链接 [项目5 - 数组作数据成员]阅读教材P255例8.4.注意到类中的数据成员能够是数组.设计一个工资类(Salary),当中类的数据成员例如以下: class Salary ...

  4. android之LruCache源代码解析

    移动设备开发中,因为移动设备(手机等)的内存有限,所以使用有效的缓存技术是必要的.android提供来一个缓存工具类LruCache,开发中我们会经经常使用到,以下来他是怎样实现的. 在package ...

  5. disruptor流程

    这里先不提那些编译器方面的优化.只看一下基于无锁环形队列的生产者消费者模型的工作流程.上一个图先: 当中,buffer是一个数组,用来模拟环形队列. slowest_reader记录最慢的reader ...

  6. select value from v$diag_info where name='Default Trace File';

    VALUE -------------------------------------------------------------------------------- /u01/diag/rdb ...

  7. poj3468 A Simple Problem with Integers(线段树模板 功能：区间增减，区间求和)

    转载请注明出处:http://blog.csdn.net/u012860063 Description You have N integers, A1, A2, ... , AN. You need ...

  8. 【总结】在VirtualBox上面安装Mac的注意事项

    看此文之前 http://www.crifan.com/category/work_and_job/virtual_machine/virtualbox-virtual_machine/ 此文仅仅是针 ...

  9. 依赖注入（DI）有助于应用对象之间的解耦，而面向切面编程（AOP）有助于横切关注点与所影响的对象之间的解耦（转good）

    依赖注入(DI)有助于应用对象之间的解耦,而面向切面编程(AOP)有助于横切关注点与所影响的对象之间的解耦.所谓横切关注点,即影响应用多处的功能,这些功能各个应用模块都需要,但又不是其主要关注点,常见 ...

  10. Android开发之Sqlite的使用

    在Android中存储数据可以用文件.数据库.网络,其中文件和数据库是最常用的,数据库我们常用的就是Sqlite,它是一种经量级的.嵌入式的关系型数据库:在android中当需要操作SQLite数据库 ...