（40）JS运动之右下角悬浮框
<!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 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
随机推荐
- 进阶：案例三: Upload File using WebDynpro
1.节点创建,其中DATASOURCE存放uploadfile名称 2.layout布局 3.upload事件代码: method ONACTIONUPLOAD . DATA: lo_Node typ ...
- ListView+CheckBox两种解决方式及原因分析
近期在用ListView+CheckBox搞一个item选中的项目,我将CheckBox的focus设置为false,另我大喜的是,CheckBox居然能够选中(窃喜中),这么简单就搞定了,由于数据量 ...
- 如何获取本地html文件的标题
本文用于提取本地网页的标签元素如<TITLE></TITLE>,<IMG>,<A></A>...的内容,非常实用于批量文件的操作,这是按一般 ...
- Attach()函数和Detach()函数的作用
基本就是把一个句柄绑定和解绑定于一个类对象上,是其可以使用MFC的函数而不是API 首先,你要明白Windows对象和MFC对象的区别.MFC对象实际上并没有把整个Windows对象都包装在其中,它只 ...
- Android菜鸟的成长笔记（1）——Android开发环境搭建从入门到精通
原文:Android菜鸟的成长笔记(1)--Android开发环境搭建从入门到精通 今天在博客中看到好多Android的初学者对Android的开发环境的搭建不熟悉而导致不能进行学习,所以我决定自己写 ...
- poj 1845 POJ 1845 Sumdiv 数学模板
筛选法+求一个整数的分解+快速模幂运算+递归求计算1+p+p^2+````+p^nPOJ 1845 Sumdiv求A^B的所有约数之和%9901 */#include<stdio.h>#i ...
- Qt移动版优化后台云服务、支持跨平台开发
http://mp.weixin.qq.com/mp/appmsg/show?__biz=MjM5MDE0Mjc4MA==&appmsgid=10000461&itemidx=2&am ...
- uva 10581 - Partitioning for fun and profit(记忆化搜索+数论)
题目链接:uva 10581 - Partitioning for fun and profit 题目大意:给定m,n,k,将m分解成n份,然后依照每份的个数排定字典序,而且划分时要求ai−1≤ai, ...
- Android短信监听(二)——利用ContentObserver实现短信监听
MainActivity例如以下: package cc.testsmslistener; import cc.testsmslistener.SMSContentObserver.MessageLi ...
- docker 创建本地镜像服务器
1.docker pull registry //下载registry 镜像,registry 为docker 官方提供的一个镜像, 我们可以用它来创建本地的docker私有仓库. docker:/r ...