<!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. Sublime Text3 + Golang搭建开发环境

    Sublime Text3 + Golang搭建开发环境 http://blog.csdn.net/aqiang912/article/details/46775409 1.安装git 因为golan ...

  2. POJ 1466 最大独立集入门

    题意:n个学生,给你每个学生浪漫的学生学号(男女之间浪漫),问你找出一个最大的集合保证集合内的任意两个学生之间没有相互浪漫关系,输出最大集合的人数. 注意:这里的浪漫边是双向的,如果1对2浪漫, 那么 ...

  3. 一种H.264高清视频的无参考视频质量评价算法（基于QP和跳过宏块数）

    本文记录一种无参考视频质量评价算法.这是我们自己实验室前两年一个师姐做的,算法还是比较准确的,在此记录一下. 注意本算法前提是高清视频.而且是H.264编码方式. 该方法主要使用两个码流里面的参数进行 ...

  4. 与众不同 windows phone (7) - Local Database（本地数据库）

    原文:与众不同 windows phone (7) - Local Database(本地数据库) [索引页][源码下载] 与众不同 windows phone (7) - Local Databas ...

  5. perl 使用cookie

    use Net::SMTP; use LWP::UserAgent; use HTTP::Cookies; use HTTP::Headers; use HTTP::Response; use Enc ...

  6. HDU3714 Error Curves (单峰函数)

    大意: 给你n个二次函数Si(x),F(x) = max{Si(x)} 求F(x)在[0,1000]上的最小值. S(x)=ax^2+bx+c       (0<=a<=100, |b|, ...

  7. 【读书笔记】《未来闪影》罗伯特·J·索耶

    真是一本引人入胜的书! 看了不到一半,就有一种置身其中的感觉,要是我也能看到自己二十年后的生活,哪怕只有1分43秒,该是一件多么奇妙的事情.但忧虑也随之而来,如果二十年后我没有成为现在想成为的人,现在 ...

  8. Android架构分析之使用自定义硬件抽象层(HAL)模块

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz Android版本:2.3.7_r1 Linux内核版本:android-goldfish-2.6.29 在上一篇博 ...

  9. InputStream中read()与read(byte[] b)（转）

    read()与read(byte[] b)这两个方法在抽象类InputStream中前者是作为抽象方法存在的,后者不是,JDK API中是这样描述两者的: 1:read() : 从输入流中读取数据的下 ...

  10. [Cocos2d-x]代码段记录

    一些零碎的代码,便于以后查找 1.添加动画 //添加动画帧 CCAnimation* animation = CCAnimation::create(); ; i< ;i++) { ] = {} ...