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)/2+scrollTop+'px';
//可视区域的高度减掉物体高度再加上向上滚动的高度
starMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
//除以2以后就一直抖,就用parseInt取整
};
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{
document.title = iTarget;
document.getElementById('btn').value=oDiv.offsetTop;
oDiv.style.top = oDiv.offsetTop+speed+'px';
}
},30)
} </script>
</head> <body>
<div class="div" id="div"></div>
<input type="text" value="" id="btn" style="top: 0;
right: 0;
position: fixed;"/>
</body> </html>
课程链接：智能社的开发教程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc
JS-缓冲运动-对联型悬浮框的更多相关文章
- JS缓冲运动案例：右侧居中悬浮窗
JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- JS缓冲运动案例：右下角悬浮窗
JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...
- JS-缓冲运动：菜单栏型悬浮框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 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 ...
随机推荐
- [DNS]部署局域网DNS服务器
This is a step by step tutorial on how to install and configure DNS server for your LAN using bind9. ...
- Android——网格视图 GridView
activity_activitygrid.xml <?xml version="1.0" encoding="utf-8"?> <GridV ...
- 补充下.net知识
问题1: public int getvalue(int a) { try { a = a + ; ; } catch (Exception) { throw; } finally { a = a + ...
- DataGridView使用技巧二：设置单元格只读
一.修改ReadOnly属性 1.设置整个DataGridView只读: DataGridView.ReadOnly=true; 此时用户的新增行和删除行操作也被屏蔽了. 2.设置DataGridVi ...
- 字符串移位：如“abcdefghi”右移2位后变成“cdefghiab”
函数头: //pStr 是指向以'\0'结尾的字符串指针 //steps 是要求移动的步数 void LoopMove(char *pStr, int steps) { //...... } 使用库函 ...
- 关于Cocos2d-x中坐标系的种类和转换
注意: 当一个节点有一个子节点的时候,如果移动父节点,子节点也会跟着做相应的移动变化,只要被添加到父节点中,子节点就被绑定了,所以子节点的位置,坐标就会被动地变化. 当一个节点有一个子节点的时候,如果 ...
- am335x 10.1"电容touch 不能识别
/**************************************************************** * am335x 10.1"电容touch 不能识别 * ...
- Spring 4 官方文档学习（十一）Web MVC 框架之Flash Attributes
接上一篇中的重定向. http://docs.spring.io/spring/docs/current/spring-framework-reference/html/mvc.html#mvc-fl ...
- 第二百九十节，MySQL数据库-MySQL命令行导出导入数据库，数据库备份还原
MySQL命令行导出导入数据库,数据库备份还原 MySQL命令行导出数据库:1,进入MySQL目录下的bin文件夹:cd MySQL中到bin文件夹的目录如我输入的命令行:cd C:\Program ...
- 初识EseNt
转自:http://www.cnblogs.com/goosao/archive/2011/09/23/2186412.html 一.什么是EseNtEseNt(Extensible Storage ...