javascript实现悬浮跟随框缓动效果
悬浮跟随框是我们在网页中经常见到的效果，我们还是使用上一实例中的运动框架去实现。
1、定义一个运动函数，当触发时调用，并且传递一个目标位置作为参数
2、运动函数内部，调用定时函数，在定时函数内部，先求出元素位置与目标位置的距离差，然后除以一个数值作为速度（由于距离差一直在缩小，所以速度值也一直在变小，从而达到缓动效果）
3、由于网页上位置设置最小单位是1px，所以在步骤二中的运算可能会出现小数的情况，我们需要对小数进行处理，否则元素到达的位置总是和目标位置有1px的差距。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style>
#div1{
width:100px;
height:150px;
background: red;
border:1px solid #008000;
right:0px;
position: absolute;
}
#div2{
width:1920px;
height:1px;
background:red;
position: absolute;
}
</style>
<script>
window.οnlοad=function(){
var oDiv=document.getElementById('div1');
var oDiv1=document.getElementById('div2');
var timer=null;
oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+document.documentElement.scrollTop+'px';
window.οnscrοll=function(){
var scrolltop=document.documentElement.scrollTop || document.body.scrollTop;
var iTarget=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrolltop;
iTarget=Math.floor(iTarget);
oDiv1.style.top=iTarget+'px';
startMove(iTarget);
};
function startMove(itarget){
clearInterval(timer);
timer=setInterval(function(){
var iDis=itarget-oDiv.offsetTop;
var speed=iDis/5;
if(iDis>=0){
speed=Math.ceil(speed);//当speed为小于1的数时，将它变为1，从而使元素位置移动一个像素，因为小于1的像素会被近似为0
}
else{
speed=Math.floor(speed);
}
if(oDiv.offsetTop==itarget)
{
clearInterval(timer);
}
else
{
oDiv.style.top=oDiv.offsetTop+speed+'px';
}
document.title=oDiv.offsetTop;
},30);
}
};
</script>
</head>
<body style="height:2000px;">
<div id="div1">
</div>
</body>
</html>
运行结果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现跟随滚动缓冲运动广告框
当我们浏览一些网页时我们会发现页面的的边上会有广告图片,当滚动滚动条的时候这些广告图片会跟随性的随页面一起运动(这里我叫它为广告框).一些网页的广告框是固定在浏览器上的用background:fixed:便可实现.这里我用JavaScript简单的制作了一个随滚动缓冲运动的广告框. 制作的原理比较简单,大家都有一个完美的js运动框架,这里的缓冲运动需要用到.这里的广告框设定的是跟随滚动条缓冲运动并运动到浏览器的中间位置.需要理解的是运动距离的计算和一些细节上的处理(一些BUG的预防) 这是我在这
-
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta nam
-
JS实现跟随鼠标的链接文字提示框效果
本文实例讲述了JS实现跟随鼠标的链接文字提示框效果.分享给大家供大家参考.具体如下: 这里使用JavaScript与CSS实现链接提示效果,不会改变你原来的链接结构,使用链接原有的title标签来实现,如果之前你使用有title标签,那你几乎只需把JS代码拷贝到你的网页中即可.你会发现,运行本效果后,鼠标在链接上移动的话,文字提示框会跟随鼠标而移动位置. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran
-
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
用JS写出遮罩层登陆框和对联广告并自动跟随滚动条滚动保持让用户一直可以看到 好了,天色已晚废话不多说,代码特别详细 有注释,请看代码. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://
-
JS实现提示框跟随鼠标移动
分享实例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .box{width:500px;margin: 300px auto;border: solid 1px black;posit
-
javascript实现悬浮跟随框缓动效果
悬浮跟随框是我们在网页中经常见到的效果,我们还是使用上一实例中的运动框架去实现. 1.定义一个运动函数,当触发时调用,并且传递一个目标位置作为参数2.运动函数内部,调用定时函数,在定时函数内部,先求出元素位置与目标位置的距离差,然后除以一个数值作为速度(由于距离差一直在缩小,所以速度值也一直在变小,从而达到缓动效果)3.由于网页上位置设置最小单位是1px,所以在步骤二中的运算可能会出现小数的情况,我们需要对小数进行处理,否则元素到达的位置总是和目标位置有1px的差距. <!DOCTYPE HTM
-
JavaScript Tween算法及缓动效果第1/2页
我这里要教大家的是怎么利用flash的Tween类的算法,来做js的Tween算法,并利用它做一些简单的缓动效果. Tween Tween类型: Linear Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular Elastic Back Bounce ease类型: easeIn easeOut easeInOut /* 算法来源:http://www.robertpenner.com/easing/ */ var Tw
-
javascript 45种缓动效果 非常酷
参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 duration number 可选,缓动效果持续时间,默认是500ms.建议取300~1000ms. field string 必需,要发生变化的样式属性.请在top,left,bottom,right,width与height中选择. ftp number 可选,每秒进行多少帧动画,默认50帧,保证流畅播放.一些参考资料,日本动画1秒36帧,中
-
让div运动起来 js实现缓动效果
本文实例为大家分享了js实现缓动效果的具体代码,供大家参考,具体内容如下 var tween = { linear:function(t,b,c,d){ return c*t/d + b; }, easeIn:function(t,b,c,d){ return c * ( t /= d ) * t + b; }, strongEaseIn:function(t,b,c,d){ return c * ( t /= d ) * t * t * t * t + b; }, strongEaseOut:
-
javascript中的缓动效果实现程序
常见的动画有四种类型,介绍一下: linear:线性动画,即匀速 easeIn:速度从小到大,即淡入 easeOut :速度从大到小,即淡出 easeInOut:开始时速度从小到大,结束时速度从大到小,即淡入淡出 其实说到缓动,就不得不提Robert Penner,他发明了N多缓动公式,举个例子 我还是解释一下吧: 设当前变化量为X,则 t / d = X / c,所以X = c * t / d,然后X + b就可以获得当前属性值 再看一个稍复杂的: 这个有淡入效果,也就是说动画开始时,值的变化
-
js实现拖动缓动效果
话不多说,先上效果,一个体验非常好的拖拽缓动的效果,让页面提升一个档次. 这个效果看似很简单,到也困惑了很长时间,为什么别人写出来的拖拽体验为什么这么好? 直到我自己实现了以后,才发现,原来我想的实现方式不对.接下来,我通过简短的几句话,来提供这个功能的实现思路. 首先,我们要明白,我们鼠标拖拽是在一个2d平面上拖拽 2d平面只有x轴和y轴,而且获取的拖拽值也是基于平面的像素获取的.所以,我们第一步,先通过鼠标事件来获取到当前的拖拽的长度像素. 首先,绑定鼠标按下事件,来获取到鼠标基于浏览器窗口
-
JavaScript实现缓动动画
JavaScript原生定时器实现动画的缓动效果,供大家参考,具体内容如下 原理很简单通过定时器修改边距达到移动动画效果 实现速度的变化 缓动必然移动速度会有变化,这里需要用到一个小公式或者说算法? 移动单位 = (指定移动位置边距 - obj.offsetLeft) / 10; var step = (ydpx - obj.offsetLeft) / 10; 有一个细节需要注意下: 移动的步数应该去掉小数,否者因为除法的原因无法移动到指定位置,会有一些差距 当step小于0对应的是向左移动舍去
-
JavaScript 详解缓动动画的封装与使用
实现过程分析 (1)如何重复调用? 答:封装一个函数,用一次调用一次 代码分析: function animate(obj, target, callback) { //详细实现步骤 }; animate :(动画函数) obj(动画对象):给谁添加动画效果 target(目标值):移动到什么距离 callback(回调函数):同时要执行什么功能 (2)如何实现缓动效果?(缓动动画核心算法) 答:移动距离 =(目标值 - 现在盒子位置)/ 10,移动距离会慢慢变小,直至停下,就实现了缓动原理 代
-
tween.js缓动补间动画算法示例
一.理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了,首先b.c.d三个参数(即初始值,变化量,持续时间)在缓动开始前,是需要先确定好的. 首先引入一个概念就补间动画 Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动.弹簧等等. tween.js在Flash中可以解释为补间动画. 那么问题来了,什么是补间动画呢? 相信学过Flash的都知道补间动画是flash主要的非常重要的表现手段之一
-
CSS3使用过度动画和缓动效果案例讲解
transition过渡: 四个小属性 属性 意义 transition-property 哪些属性要过渡 transition-duration 动画时间 transition-timing-function 动画变化曲线(缓动效果) transition-delay 延迟时间 transition过度属性是CSS3浓墨重彩的特性,过度可以为一个元素在不同样式之间变化自动添加"补间动画" 兼容性IE10开始兼容,移动端兼容良好 曾几何时,网页上的动画特效基本都是由JavaScript