<!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运动之右下角悬浮框的更多相关文章
-
JS错误记录 - 右侧悬浮框 - 缓冲运动
本次练习错误总结: 1. 正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...
-
JS-缓冲运动-对联型悬浮框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
-
JavaScript侧边悬浮框
<script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=d ...
-
（41）JS运动之右側中间悬浮框（对联悬浮框）
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
-
js实现页面悬浮框
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE ht ...
-
js右侧悬浮框
示例:屏幕右侧悬浮框 原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop ...
-
菜鸟学JS（三）——自动隐藏的悬浮框
今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...
-
HTML5气泡悬浮框(已经加上完整文件)
源文件链接:http://pan.baidu.com/s/1pKHlNSn 设计气泡悬浮框 1.在网页设计中,气泡悬浮框常常用于页面中为某些对象显示提示信息,恰当地使用气泡悬浮框能够使网页布局更加完美 ...
-
第八节 JS运动基础
运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
随机推荐
-
关于raid的理解
缘起 公司部署业务的时候,6块盘需要做raid,以前还没有用过所以不知道,临时才去百度看了一下相关知识. 部署 当前可以用软raid与硬raid,软raid系统上建立,占用CPU与IO资源;硬RAID ...
-
[css]邮件的写法
<style type="text/css"> /* Client-specific Styles */ #outlook a{paddin ...
-
C puzzles详解【46-50题】
第四十六题 What does the following macro do? #define ROUNDUP(x,n) ((x+n-1)&(~(n-1))) 题目讲解: 参考:http:// ...
-
详解 Node + Redux + MongoDB 实现 Todolist
前言 为什么要使用 Redux? 组件化的开发思想解放了繁琐低效的 DOM 操作,以 React 来说,一切皆为状态,通过状态可以控制视图的变化,然后随着应用项目的规模的不断扩大和应用功能的不断丰富, ...
-
thinkinginjava学习笔记02_对象
对象 1. 对象通过一个引用来操作,但是java中的对象是按值传递的,基本上可以在操作中认为对象本身,在内部结构中仍然要记得是对象实体的引用:如:String s = "abcd" ...
-
Linux centos ssh
创建m01.backup.nfs.web01.web02 m01(172.16.1.61).backup(172.16.1.41).nfs(172.16.1.31).web01(172.16.1.7) ...
-
ES - dynamic field mapping
Dynamic field mapping 1.我们向es提交一个json对象进行索引,es会对json字段和索引字段进行字段类型适配. 规则如下: 2.string字段的转换规则 当date det ...
-
docker常用操作备忘
一.docker安装 参考资料:阿里云镜像加速1. 安装/升级Docker客户端 curl -fsSL https://get.docker.com | bash -s docker --mirror ...
-
同时开始了SQL。。。
SQL LIMIT OFFSET 和 LIMIT code1: SELECT id, name, score FROM table ORDER BY score DESC LIMIT OFFSET 4 ...
-
Partition4：增加分区
在关系型 DB中,分区表经常使用DateKey(int 数据类型)作为Partition Column,每个月的数据填充到同一个Partition中,由于在Fore-End呈现的报表大多数是基于Mon ...