<!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. ASP.NET、WinForm - 判断整个页面文本框是否为空

    foreach(Control ctrl in Page.Controls) { foreach(Control childc in ctrl.Controls) { switch(childc.Ge ...

  2. HotelIInventory项目小结

    最近参与了HotelIInventory这个项目的一个模块的开发.经验不足,对Sql脚本的编写能力还需要提高,这个模块的Sql语句大多是组长替我写的,如果靠我自己来写,我绝对是没有能力完成工作的,在此 ...

  3. asp.net ajax检查用户名是否存在代码

    原文  asp.net ajax检查用户名是否存在代码 用户注册时,我们经常需要检查用户名是否存在,本文就是实现无刷新验证用户名 打开开发环境VS 2005,新建项目(或打开现有项目),新建一个Web ...

  4. VMware vSphere服务器虚拟化实验六 vCenter Server 添加储存

                                                                          VMware vSphere服务器虚拟化实验六 vCente ...

  5. Eclipse shift + ctrl + F 不好用

    出现 shift + Ctrl + F  整理代码没有反应的情况,先检查下输入法是否是英文的,切换英文后再尝试.

  6. 积累的VC编程小技巧之编辑框

    1.如何让对话框中的编辑框接收对话框的消息 ////////////////////////////////////////////////// 如何让对话框中的CEdit控件类接收对话框的消息/// ...

  7. CTreeCtrl结点拖动实现(与后台联动)

    原帖及讨论:http://bbs.bccn.net/thread-211413-1-1.html 效果描述:鼠标点击并拖动某一结点可以把它以动到其他结点下.原理:把一个结点机器下面的所有结点在需要释放 ...

  8. NIO框架之MINA源码解析(转)

    http://blog.csdn.net/column/details/nio-mina-source.html http://blog.csdn.net/chaofanwei/article/det ...

  9. CURD演示 2

    <?php class UserAction extends Action{ public function index(){ echo "你好!"; $m=M('user' ...

  10. cocos2dx之lua项目开发中MVC框架的简单应用

    **************************************************************************** 时间:2015-03-31 作者:Sharin ...