JS-缓冲运动：菜单栏型悬浮框
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>缓冲运动2</title>
<style type="text/css">
body{
height: 2000px;
}
.div {
width: 100px;
height: 100px;
background-color: darkslateblue;
position: absolute;
right: 0;
bottom: 0;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onscroll= function(){
//1,给浏览器的滚动添加事件，onscollTop事件
var oDiv = document.getElementById('div');
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
// oDiv.style.top = document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
//可视区域的高度减掉物体高度再加上向上滚动的高度
starMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop)
};
var timer = null;
function starMove(iTarget){
var oDiv = document.getElementById('div');
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>
<div class="div" id="div"></div> </body> </html>
课程链接：智能社的开发教程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc
JS-缓冲运动：菜单栏型悬浮框的更多相关文章
- JS-缓冲运动-对联型悬浮框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS缓冲运动案例：右侧居中悬浮窗
JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- JS缓冲运动案例：右下角悬浮窗
JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...
- js缓冲运动
缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度＝(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...
- JS缓冲运动案例
点击"向右"按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击"向右"#red区块也不会再运动.点击"向左"按钮 ...
- [Js]缓冲运动
一.运动框架 1.在开始运动时,关闭已有定时器(否则会不断有新的定时器执行) 2.把运动和停止隔开(if/else) 二.缓冲运动 逐渐变慢,最后停止(距离越远速度越大) 速度=(目标值-当前值)/缩 ...
- （40）JS运动之右下角悬浮框
<!DOCTYPE HTML> <!-- --> <html> <head> <meta charset="utf-8"> ...
- JS 缓冲运动 带运动的留言本 小案例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- JavaScript侧边悬浮框
<script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=d ...
随机推荐
- Apache HttpComponents 获取inputStream
package org.apache.http.examples.client; import java.io.IOException; import java.io.InputStream; imp ...
- Android——FileOutputStream与openFileOutput()的区别分析【第一个用于文件存储，第二个用于SD卡存储】【转】
本文实例分析了Android编程中FileOutputStream与openFileOutput()的区别.分享给大家供大家参考,具体如下: openFileOutput() 首先给大家介绍使用文件如 ...
- yum-plugin-priroites这个插件的一个文件。
yum源优先级的一个文件.是yum-plugin-priroites这个插件的一个文件.用来给yum源分优先级的.比如你在centos下有centos,epel,rpmfusion三个yum源.三个y ...
- 防止短连接耗尽你的动态TCP端口
详见TCP协议https://en.wikipedia.org/wiki/Transmission_Control_Protocol但是TIME_WAIT是有时间窗口的,Linux默认是60秒.所以如 ...
- 超多的CSS3圆角渐变网页按钮
<!DOCTYPE html><head><title>超多的CSS3圆角渐变按钮</title><style type="text/c ...
- 用isNaN函数来判断是否只能输入正负数字
isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果, 以判断它们表示的是否是合法的数字.当然也可以用 isNaN() 函数来检测算数错误,比如用 0 作除数的 ...
- 使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序
简介: 对于那些使用 JavaScript 和 jQuery 库从桌面应用程序转向 Web 应用程序的开发人员来说,他们还不习惯去考虑应用程序基本的外观,因为这些以前都是由操作系统来处理的.了解 jQ ...
- 【转】【Linux】Linux 命令行快捷键
Linux 命令行快捷键 涉及在linux命令行下进行快速移动光标.命令编辑.编辑后执行历史命令.Bang(!)命令.控制命令等.让basher更有效率. 常用 ctrl+左右键:在单词之间跳转 ct ...
- MFC 窗体注册 WNDCLASS
//初始化 //初始化包括窗口类的定义.注册.创建窗口实例和显示窗口四部分 { HWND hwnd; MSG Msg; WNDCLASS wndclass; char lpszClassName[]= ...
- 如果不得已需要全局变量，则使全局变量加前缀 g_（表示 global）
如果不得已需要全局变量,则使全局变量加前缀 g_(表示 global). 例如: int g_howManyPeople; // 全局变量 int g_howMuchMoney; // 全局变量 #i ...