（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 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
随机推荐
- JQuery - 点击图片显示大图
效果: 目录结构: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...
- 计算机内存碎片（中）——外部碎片化（内存 & 文件系统 & 数据库系统通杀）
本文原创为freas_1990,转载请标明出处:http://blog.csdn.net/freas_1990/article/details/17252221 外部碎片化 当计算机内存被划分成很细碎 ...
- 页面导出生成pdf，使用wkhtmltopdf第三方工具
把页面导出生成pdf,这里用到第三方的工具,使用方法中文文档没有找到,网上也没找到网友详细的神作.没有深入研究,所以也不赘述了,当然最基本的使用大多数也够用了,详细参数的官网也没介绍,大家使用的时候, ...
- C#分析URL参数获取参数和值得对应列表
原文: C#分析URL参数获取参数和值得对应列表 /// <summary> /// 分析url链接,返回参数集合 /// </summary> /// <param n ...
- HDU4452Running Rabbits(模拟)
HDU4452Running Rabbits(模拟) pid=4452" target="_blank" style="">题目链接 题目大意: ...
- Lucene.Net 2.3.1开发介绍 —— 二、分词（五）
原文:Lucene.Net 2.3.1开发介绍 -- 二.分词(五) 2.1.3 二元分词 上一节通过变换查询表达式满足了需求,但是在实际应用中,如果那样查询,会出现另外一个问题,因为,那样搜索,是只 ...
- INFORMIX 时间函数大全
http://publib.boulder.ibm.com/infocenter/idshelp/v115/index.jsp?topic=/com.ibm.sqls.doc/ids_sqs_0187 ...
- Swift - 类的计算属性（使用get和set来间接获取/改变其他属性的值）
1,Swift中类可以使用计算属性,即使用get和set来间接获取/改变其他属性的值,代码如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 class Calc ...
- 14.4.3.5 Configuring InnoDB Buffer Pool Flushing 配置InnoDB Buffer Pool 刷新:
14.4.3.5 Configuring InnoDB Buffer Pool Flushing 配置InnoDB Buffer Pool 刷新: InnoDB执行某些任务在后台, 包括flush 脏 ...
- MySQL JDBC事务处理、封装JDBC工具类
MySQL数据库学习笔记(十)----JDBC事务处理.封装JDBC工具类 一.JDBC事务处理: 我们已经知道,事务的概念即:所有的操作要么同时成功,要么同时失败.在MySQL中提供了Commit. ...