（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 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
随机推荐
- poj 1018 Communication System 枚举 VS 贪心
Communication System Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 21631 Accepted: ...
- clientdataset<---->json
现在,DATASNAP倾向于使用JSON作为统一的数据序列格式,以期达到跨平台的效果.于是使用JSON便成为热点. unit uJSONDB; interface uses SysUtils, C ...
- 简单的ajax获取json
一个DBhelper类,用来操作数据库 using System; using System.Collections.Generic; using System.Linq; using System. ...
- ie 64bit调用activex控件
1,首先,这是可能的.不要被网上一堆ie64调不了activex控件的文章误导了.flash就是一个现成的例子,flash支持ie64. 2,ie64只能调用64bit的activex控件.网上那些说 ...
- iText 文本
iText中用文本块(Chunk).短语(Phrase)和段落(paragraph)处理文本. 文本块(Chunk)是处理文本的最小单位,有一串带格式(包括字体.颜色.大小)的字符串组成.如以下代码就 ...
- 万方数据知识平台 TFHpple +Xpath解析
试了一下.基本上适合全部的检索结果. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loadi ...
- 英特尔的VT-d技术是什么?
VT-d技术: 我们知道对于服务器而言,很重要的一个组成部分就I/O,CPU的计算能力提升虽然可以更快地处理数据,但是前提是数据能够顺畅的到达CPU,因此,无论是存储,还是网络,以及图形卡.内存等,I ...
- Delphi/C#之父首次访华：55岁了 每天都写代码
Delphi.C#之父Anders Hejlsberg 近日首次访华,并在10月24日和27日参加了两场见面会,分享了他目前领导开发的TypeScript项目,并与国内前端开发者近距离交流.本文就为读 ...
- 移动无边框窗体（设置标志位更流畅，或者发送WM_SYSCOMMAND和SC_MOVE + HTCAPTION消息）
移动无边框窗体的代码网上很多,其原理都是一样的,但是是有问题的,我这里只是对其修正一下 网上的代码仅仅实现了两个事件 void EditDialog::mousePressEvent(QMouseEv ...
- 移动App-UI配制篇
杂志app-UI配制篇 背景 现在公司有需求是关于杂志app,里面每个页面可能有不同的展现方式,不同的内容,不同的操作方式.那么这里就有一个需求就是根据用户定制这些不同的展现方式,不同的内容,不同的操 ...