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 ...
随机推荐
- [app]温度传感器测试程序
刚开始去读/dev/i2c-1, 但是在设置地址的时候,始终错误,返回-1, 所以最后还是用了sys接口 /******************************************* * ...
- ubuntu 12.04 rails server 时候报错 execjs
新的应用创建好了,使用rails server启动看看,oops!原来是没有javascript运行环境. 1 2 $ rails server /usr/local/lib/ruby/gems/1 ...
- Hash表的表大小
hash表的出现主要是为了对内存中数据的快速.随机的访问.它主要有三个关键点:Hash表的大小.Hash函数.冲突的解决. 这里首先谈谈第一点:Hash表的大小. Hash表的大小一般是定长的,如果太 ...
- 最大割(Maximum cut)
问题描述:把图中点分为两部分V1和V2,使得V1和V2之间的连边值最大.
- opencv3.2 dnn 图像分割
下载 http://dl.caffe.berkeleyvision.org/fcn32s-heavy-pascal.caffemodel 在opencv_contrib-3.2.0/modules/d ...
- qt 窗口控件自动调整大小
/******************************************************************** * qt 窗口控件自动调整大小 * * 在写gui的时候,希 ...
- Spring 4 官方文档学习（十）数据访问之ORM
http://docs.spring.io/spring/docs/current/spring-framework-reference/html/orm.html 占位用,暂略.
- gsoap 学习 1-如何使用
新年伊始,想把onvif和gsoap boa这三个东西学习下,并作下笔记,当然为了省时间,我昨天下午看了一个下午的gsaop官网pdf感触良多,也做了小测试,废话少说,一下也有一些是摘自网友博客,大部 ...
- VMware下Ubuntu与宿主Windows共享文件夹 （转至 http://blog.csdn.net/zz962/article/details/7706755）
概述 1.安装VMware Tool 2.设置共享 步骤 开始安装VMware Tool 显示如下画面(如果宿主无法访问外网,可能会出现一个更新失败,可以无视之) 通过下列命令解压.执行,分别是下面的 ...
- 天线增益英文名称：antenna gain
天线增益是指:在输入功率相等的条件下,实际天线与理想的辐射单元在空间同一点处所产生的信号的功率密度之比.它定量地描述一个天线把输入功率集中辐射的程度.增益显然与天线方向图有密切的关系,方向图主瓣越窄, ...