<!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. 在DLL动态链接库中封装VCL的MDI子窗体

    在DLL动态链接库中封装VCL的MDI子窗体不多说了,看代码就应该明白了,曾经我遇到的问题,现在放出来大家共享! 这里是工程文件的部分: 在DLL中封装MDI子窗体需要重写DLL入口函数,具体代码如下 ...

  2. 已成功与服务器建立连接，但是在登录过程中发生错误。 (provider: SSL Provider, error: 0 - 接收到的消息异常，或格式不正确。)

    之前做好的asp.net部署后,发现 访问数据库时: 异常:已捕获: "已成功与服务器建立连接,但是在登录过程中发生错误. (provider: SSL Provider, error: 0 ...

  3. VS2008下编译BOOST 1.39的ASIO库

    由于全部编译BOOST库需要的时间太长,而且耗费空间,况且我只需要用ASIO库,所以就没有必要全部编译了. boost库到www.boost.org上下载. 编译很简单,假设你的boost存放的目录是 ...

  4. 使用微软Remote Desktop 手机远程控制 windows

    在我的电脑上右击选择“属性”,打开属性面板.然后点击左边的“远程设置”. 2/2 如果你要操作的计算机出入外网(大多数是家里网线进线直连电脑),就选择远程桌面选择框中的“允许运行任意版本远程桌面的计算 ...

  5. SDL Guide 中文译版

    SDL即Simple DirectMedia Layer,类似DirectX,是完整的游戏.多媒体开发包,但不同的是它跨越几乎所有的平台,有各种语言的接口,多种语言的文档,而这一切都是广大志愿者完成的 ...

  6. 【Demo 0010】事件响应链

    本章学习要点:       1.  熟悉iOS事件分发过程以及事件响应链;       2.  掌握基本事件响应方法(单击,双击):       3.  掌握基本手势处理方法:

  7. HealthKit开发教程Swift版：起步

    原文:HealthKit Tutorial with Swift: Getting Started 作者:Ernesto García 译者:Mr_cyz ) HealthKit是iOS 8中的新的A ...

  8. iphone之NSArray比较大小

    //排序 NSArray *tempArray = [[NSArray alloc]initWithArray:self.contentArray]; tempArray = [tempArray s ...

  9. Java.util.zip adding a new file overwrites entire jar?(转)

    ZIP and TAR fomats (and the old AR format) allow file append without a full rewrite. However: The Ja ...

  10. ANDROID L——Material Design综合应用（Demo）

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Material Design: Material Design是Google推出的一个全 ...