<!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运动之右側中间悬浮框（对联悬浮框）的更多相关文章

  1. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  2. JS运动从入门到兴奋1

    hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...

  3. 解析JS运动

    解析JS运动 物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法:      1.运动的物体使用绝对定位 ...

  4. move.js运动插件

    move.js 运动插件是一款针对元素动画效果的插件.可以运用此插件制作出各类元素效果. 插件GitHub地址:https://github.com/visionmedia/move.js 下面整理学 ...

  5. js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  6. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  7. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  8. 关于js运动的一些总结

    js运动实现,有两种.一种是速度版,另一种是时间版. 速度版是通过对速度的加减乘除,得出元素的运动数据.时间版是通过对时间进行Tween公式运算,得出元素的运动数据. 速度版运动优点:容易在运动过程中 ...

  9. JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. BZOJ 4032: [HEOI2015]最短不公共子串 后缀自动机 暴力

    4032: [HEOI2015]最短不公共子串 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=4032 Description 在虐各种最 ...

  2. PHP5.3配置文件php.ini-development和php.ini-production的区别

    PHP5.3版本中出现了php.ini-developmen和php.ini-production PHP配置文件与PHP5.2版本相比,命名发生了变化: php.ini-production 对应于 ...

  3. ocx控件打印之基础篇

      Visual C++6.0是开发Windows应用程序的强大工具,但是要通过它实现程序的打印功能,一直是初学者的一个难点,经常有朋友询问如何在VC中实现打印功能,他们往往感到在MFC提供的框架内实 ...

  4. 支持向量机SVM 简要推导过程

    SVM 是一块很大的内容,网上有写得非常精彩的博客.这篇博客目的不是详细阐述每一个理论和细节,而在于在不丢失重要推导步骤的条件下从宏观上把握 SVM 的思路. 1. 问题由来 SVM (支持向量机) ...

  5. maven本地仓库地址的设置

    对于大公司的jenkins来说,仓库是很大的,那么存储仓库的目录空间一定要足够大才可以. 可以对linux进行外挂,实现磁盘扩容,把仓库挂在外挂上. 默认情况下,mvn的配置文件在~/.m2/sett ...

  6. IDEA/Pycharm/Webstorm项目目录中的 Scratches and Consoles作用

    临时的文件编辑环境,通过临时的编辑环境,你可以写一些文本内容或者一些代码片段. 参考:https://segmentfault.com/a/1190000014202363 https://www.w ...

  7. 七.使用fastJson解析器

    1.到入jar包 <!-- 添加fastjson 依赖包. --> <dependency> <groupId>com.alibaba</groupId> ...

  8. 对象的当前状态使该操作无效 说明: 执行当前 Web 请求期间，出现未处理的异常。

    这个异常在页面数据量小的时候并不会触发,只在页面数据量大的情况下才会出现, 异常信息如下: 对象的当前状态使该操作无效.  说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以 ...

  9. [转]SSIS数据转换组件_派生列、审核、字符映射转换和条件性拆分转换

    本文转自:http://www.cnblogs.com/gudujianxiao/archive/2012/04/14/2446925.html 一 派生列 派生列转换通过对输入列进行类型转换或应用表 ...

  10. XML-RPC 实现C++和C#交互

    我们通常会面对这样的问题:整合不同平台或不同类库,这些类库可能来自不同的语言,甚至不同的操作系统. 如何解决这类棘手的问题呢? 一.方案介绍 解决不同语言交互的方法有不少,对我了解的windows系统 ...