(41)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(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));//使用parseInt是防止可能出现除2之后出现.5情况,导致悬浮框上下抖动。 }; 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
{
document.getElementById('txt1').value=oDiv.offsetTop;
oDiv.style.top=oDiv.offsetTop+speed+'px';
} },30);
} </script>
</head>
<body style="height:2000px;" >
<input type="text" id="txt1" style="position:fixed; right:0; top:0;"/>
<div id="div1"></div> </body>
</html>
效果图:
(41)JS运动之右側中间悬浮框(对联悬浮框)的更多相关文章
- 第八节 JS运动基础
运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
- JS运动从入门到兴奋1
hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...
- 解析JS运动
解析JS运动 物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法: 1.运动的物体使用绝对定位 ...
- move.js运动插件
move.js 运动插件是一款针对元素动画效果的插件.可以运用此插件制作出各类元素效果. 插件GitHub地址:https://github.com/visionmedia/move.js 下面整理学 ...
- js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- 带无缝滚动的轮播图(含JS运动框架)
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- js运动框架之一条乱跑的虫子
克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
- 关于js运动的一些总结
js运动实现,有两种.一种是速度版,另一种是时间版. 速度版是通过对速度的加减乘除,得出元素的运动数据.时间版是通过对时间进行Tween公式运算,得出元素的运动数据. 速度版运动优点:容易在运动过程中 ...
- JS运动学习笔记 -- 任意值的运动框架(高/宽度,背景颜色,文本内容,透明度等)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- C - 壮志难酬
#include<stdio.h> #include<stdlib.h> #include<string.h> int main() { ]= {'}; int i ...
- Atom | 编辑器Atom的使用小结
文章目录 windows环境下 Atom工具使用apm Packages 推荐阅读 常用快捷键 windows环境下 Atom工具使用apm 在 Atom 的安装路径下找到 apm ,复制路径: 将该 ...
- 用asyncio的异步网络连接来获取sina、sohu和163的网站首页
代码如下: import asyncio async def wget(host): print('wget %s...' % host) connect = asyncio.open_connect ...
- [转载]memcached 命令操作详解
转载:http://www.cnblogs.com/azheng007/p/3159345.html 一.存储命令 存储命令的格式: <command name> <key> ...
- Ubuntu 16.04/CentOS 6.9安装Node.js 6.9.5
Ubuntu: CentOS: wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz tar -xvf node-v6.9. ...
- Android进阶笔记:AIDL内部实现详解 (二)
接着上一篇分析的aidl的流程解析.知道了aidl主要就是利用Ibinder来实现跨进程通信的.既然是通过对Binder各种方法的封装,那也可以不使用aidl自己通过Binder来实现跨进程通讯.那么 ...
- 【LaTeX】E喵的LaTeX新手入门教程(1)准备篇
昨天熄灯了真是坑爹.前情回顾[LaTeX]E喵的LaTeX新手入门教程(1)准备篇 [LaTeX]E喵的LaTeX新手入门教程(2)基础排版上一期测试答案1.大家一开始想到的肯定是\LaTeX{}er ...
- Git 学习(一)简介及安装
Git 简介及安装 Git是目前世界上最先进的分布式版本控制系统(没有之一).它的诞生也颇具传奇,Linux创始人Linus花了两周时间自己用C写了一个分布式版本控制系统,这就是Git!有兴趣的话,可 ...
- WAF攻击与防御
背景 对于腾讯的业务来说,有两个方面决定着WAF能否发挥效果,一个是合适处理海量流量的架构,另一个关键因素则是规则系统.架构决定着WAF能否承受住海量流量的挑战,这个在之前的篇章中简单介绍过(详情见主 ...
- MFC【17-1】线程和线程同步化
17.1线程 对于Windows来说所有的线程都是一样的,但MFC却把线程区分为两种类型:User Interface(UI) threads(用户界面(UI)线程)和Worker threads(工 ...