(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运动之右侧中间悬浮框(对联悬浮框)

时间: 2024-11-05 18:42:29

(41)JS运动之右侧中间悬浮框(对联悬浮框)的相关文章

(40)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> <s

第八节 JS运动基础

运动基础 让Div运动起来 速度--物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS运

带无缝滚动的轮播图(含JS运动框架)

今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框架的代码如下: 1 //获取样式 2 function getStyle(obj,attr){ 3 if(obj.currentStyle){ 4 return obj.currentStyle[attr]; 5 }else{ 6 return getComputedStyle(obj,false)

简单的JS运动封装实例---侧栏分享到

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width: 100px; height: 200px; background: red;

JS运动基础(三) 弹性运动

加减速运动速度不断增加或减少速度减小到负值,会向反方向运动弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前值)/系数;  //6 , 7 , 8速度 *= 摩擦系数;   // 0.7 0.75终止条件距离足够近 并且 速度足够小 缓冲:var 速度 = (目标点 - 当前值)/系数;速度取整 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <me

JS运动库

1 // JavaScript Document 2 3 function startMove(obj,json,endFn){ 4 5 clearInterval(obj.timer); 6 7 obj.timer = setInterval(function(){ 8 9 var bBtn = true; 10 11 for(var attr in json){ 12 13 var iCur = 0; 14 15 if(attr == 'opacity'){ 16 if(Math.round

js运动基础之匀速运动

单个属性匀速运动 1 /** 2 * 单属性匀速运动 3 */ 4 function fnSingleUniformMove(oDom, sAttr, iTarget, fn){ 5 var iSpeed, iCur; 6 clearInterval(oDom.timer); // 开启定时器前先清除定时器,避免动画重复叠加 7 oDom.timer = setInterval(function(){ 8 9 // 计算当前值 10 if(sAttr == 'opacity'){ 11 iCur

JS运动从入门到兴奋1

hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌握了思想,不管需求怎么改变,我们都能把它玩弄于股掌之中...下面我们就由浅入深走进运动的世界吧. 首先来看最基础的运动:单个物体向右匀速运动到某一点停止      例子:一个按钮,一个div,点击按钮,让div向右运动到某一个位置暂停 // 原理: 1 获取物体当前的位置 oDiv.offsetle

关于js运动的一些总结

js运动实现,有两种.一种是速度版,另一种是时间版. 速度版是通过对速度的加减乘除,得出元素的运动数据.时间版是通过对时间进行Tween公式运算,得出元素的运动数据. 速度版运动优点:容易在运动过程中,对运动做一些修改. 时间版运动优点:切换或缩小浏览器页面,浏览器会对网页定时器进行停缓处理.这样会导致一些速度版运动bug.因为时间版运动是通过记录时间变化区间,来对运动进行控制.所以不会有这种bug. 运动形式有:缓冲运动,碰撞运动,重力运动.缓冲运动,是速度自身也在变化的结果.碰撞运动,是碰撞