js off 缓动动画
动画也有很多种,一起来学习,缓动动画吧
缓动动画
var but=document.getElementsByTagName("button")[];
var box=document.getElementsByTagName("div")[];
but.onclick=function(){
setInterval(function(){
//缓动效果,如果缓动,步子越来越小
// 步长的公式=盒子现在的位置+(盒子目标位置-现在的位置)/10;
var target=;
var step=(target-box.offsetLeft)/;
//动画原理:盒子未来的位置 = 盒子当前的位置+步长
box.style.left=box.offsetLeft+step+"px"
//清除定时器,当目标值减去盒子的位置 小于步子 清除
if(box.offsetLeft-<(-box.offsetLeft)/){
clearInterval(strme)
}
},)
}
<script>
var but=document.getElementsByTagName("button")[];
var div=document.getElementsByTagName("div")[];
var timer=null;
but.onclick=function(){
//要用定时器先请定时器
clearInterval(timer);
timer=setInterval(function() {
//缓动效果,如果缓动,步子越来越小
// 步长的公式=盒子现在的位置+(盒子目标位置-现在的位置)/10;
var step=(-div.offsetLeft)/;
//最后10像素的时候都是1像素1像素的向目标位置移动,就能够到达指定位置
//拓展,目标值 - 现在值 差值大于0时向上曲整,小于0的时候,向小取整
// step=(0-div.offsetLeft)<0 ? Math.floor(step) : Math.ceil(step); //对的结果在前面
//step=0<div.offsetLeft ? Math.floor(step) : Math.ceil(step);
step= step> ? Math.ceil(step) : Math.floor(step);
div.style.left=div.offsetLeft+ step + "px";
console.log();
//跳出条件 目标值-当前位置绝对值<步长绝对值,因为与可能是
if( Math.abs(-div.offsetLeft)< Math.abs(step)){
div.style.left =+"px";
clearInterval(timer)
}
},)
}
<script>
var but=document.getElementsByTagName("button");
var box=document.getElementsByTagName("div");
var timer=null;
//调用函数
but[].onclick=function () {
animate(box[],)
};
but[].onclick=function () {
animate(box[],)
};
//分装代码
function animate(ele,target){
//用定时器先清除定时器
clearInterval(ele.timer);
//定义定时器
ele.timer=setInterval(function(){
//定义缓动 动画步长 越来越慢
// 步长=(目标值-现在值)/10
var step=(target-ele.offsetLeft )/;
//对步长二次加工(小于步长相下去值 大于)
step=step> ? Math.ceil(step):Math.floor(step);
//赋值给left
console.log();
ele.style.left=ele.offsetLeft+step+"px";
//清除定时器
if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
//处理小数赋值
ele.style.left=target+"px";
clearInterval(ele.timer)
}
},)
}
</script>
<style>
*{margin:; padding:; }
body{background:rgba(,,,0.8)}
.box{width:800px; height:42px; border-radius: 8px; background: #fff url("../image/wifi.png") no-repeat right center ; margin:200px auto; position: relative;}
.box ul{position: relative;}
.box li{float:left; list-style: none; width:83px; height:42px; text-align: center; font: 16px/42px "simsun"; cursor: pointer;}
.box span{width:83px; height:42px; background: url("../image/cloud.gif") no-repeat ; position: absolute; left:; }
</style>
<script>
//需求1:属于移到哪个li上,span就停在那个li上,离开后,span会到原点
//需求2;鼠标点击哪个li就记录li标签,移开的时候,span就会到记录的li上
window.onload=function () {
//获取元素
var liArr=document.getElementsByTagName("li");
var span=document.getElementsByTagName("span")[];
var liWidth=liArr[].offsetWidth;
var coun=;
//绑定事件
for(var i=; i<liArr.length; i++){
//绑定属性index
liArr[i].index=i;
liArr[i].onmouseover=function () {
animate(span,this.index*liWidth)
}
liArr[i].onmouseout=function () {
animate(span,coun*liWidth)
}
liArr[i].onclick=function () {
coun=this.index;
animate(span,coun*liWidth)
}
}
}
//分装代码
function animate(ele,target){
clearInterval(ele.timer);
ele.timer=setInterval(function(){
var step=(target-ele.offsetLeft )/;
step=step> ? Math.ceil(step):Math.floor(step);
console.log();
ele.style.left=ele.offsetLeft+step+"px";
if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
ele.style.left=target+"px";
clearInterval(ele.timer)
}
},)
}
</script>
</head>
<body>
<div class="box">
<span></span>
<ul>
<li>首页新闻</li>
<li>搜狐新闻</li>
<li>腾讯新闻</li>
<li>河北新闻</li>
<li>北京新闻</li>
<li>湖南新闻</li>
<li>山东新闻</li>
<li>湖北新闻</li>
</ul>
</div>
<style>
*{margin:; padding:; }
body{background:rgba(,,,0.8)}
.box{width:800px; height:42px; border-radius: 8px; background: #fff url("../image/wifi.png") no-repeat right center ; margin:200px auto; position: relative;}
.box ul{position: relative;}
.box li{float:left; list-style: none; width:83px; height:42px; text-align: center; font: 16px/42px "simsun"; cursor: pointer;}
.box span{width:83px; height:42px; background: url("../image/cloud.gif") no-repeat ; position: absolute; left:; }
</style>
<script>
//需求1:属于移到哪个li上,span就停在那个li上,离开后,span会到原点
//需求2;鼠标点击哪个li就记录li标签,移开的时候,span就会到记录的li上
window.onload=function () {
//获取元素
var liArr=document.getElementsByTagName("li");
var span=document.getElementsByTagName("span")[];
var liWidth=liArr[].offsetWidth;
var coun=;
//绑定事件
for(var i=; i<liArr.length; i++){
//绑定属性index
liArr[i].index=i;
liArr[i].onmouseover=function () {
animate(span,this.index*liWidth)
}
liArr[i].onmouseout=function () {
animate(span,coun*liWidth)
}
liArr[i].onclick=function () {
coun=this.index;
animate(span,coun*liWidth)
}
}
}
//分装代码
function animate(ele,target){
clearInterval(ele.timer);
ele.timer=setInterval(function(){
var step=(target-ele.offsetLeft )/;
step=step> ? Math.ceil(step):Math.floor(step);
console.log();
ele.style.left=ele.offsetLeft+step+"px";
if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
ele.style.left=target+"px";
clearInterval(ele.timer)
}
},)
}
</script>
</head>
<body>
<div class="box">
<span></span>
<ul>
<li>首页新闻</li>
<li>搜狐新闻</li>
<li>腾讯新闻</li>
<li>河北新闻</li>
<li>北京新闻</li>
<li>湖南新闻</li>
<li>山东新闻</li>
<li>湖北新闻</li>
</ul>
</div>
js off 缓动动画的更多相关文章
- JS实现缓动动画效果
原理如下: 假设要从数值A变化到数值B,如果是线性运动,则每次移动距离是一样:如果是缓动,每次移动距离不一样.那如何才能不一样呢?很简单,按比例移动就可以. 例如:每次移动剩余距离的一半. 对吧,超容 ...
- JS基础知识——缓动动画
基于距离的缓动动画 原理:设定起始位置 start 和终止位置 end,变化会越来越慢. 公式:start=start+(end-start)/10; 这个10不是固定的,想分成多少份就分成 ...
- js简单动画:匀速动画、缓动动画、多物体动画以及透明度动画
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...
- JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- jQuery-1.9.1源码分析系列(十五) 动画处理——缓动动画核心Tween
在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. ...
- 背水一战 Windows 10 (15) - 动画: 缓动动画
[源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing ...
- WPF界面设计技巧(7)—模拟电梯升降的缓动动画
原文:WPF界面设计技巧(7)-模拟电梯升降的缓动动画 如同Flash一样,WPF的亮点之一也在于其擅于表现平滑的动画效果,但以移动动画来说,仅凭简单的起始位置.目标位置,所产生的动画仍会非常生硬,这 ...
- Windows Phone开发(42):缓动动画
原文:Windows Phone开发(42):缓动动画 前面在讨论关键帧动画的时候,我有意把几个带缓动动画的关键帧动画忽略掉,如EasingColorKeyFrame.EasingDoubleKeyF ...
- 重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画
原文:重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 [源码下载] 重新想象 Windows 8 Store Apps (19) - 动画 ...
随机推荐
- Java隐式类型转换和强制类型转换
一.强制类型转换 char 和 整型之间的类型转换 char a7 = 'a'; System.out.println(a7); System.out.println( (int)a7 ); Syst ...
- CMake配置VTK时Qt5_DIR-NOTFOUND的解决方法
直接给解决方法了,不废话. Qt5的路径,请参考:C:\Program\IDE\Qt\Qt5.13.0\5.13.0\msvc2017_64\lib\cmake\Qt5 参考文章 CMake配置VTK ...
- 在angular 8中使用 less
在angular 6中使用 less 新项目 ng new [appname] --style less 已有的项目 修改 *.css 文件及引用处后缀名为 less并在 angular.json 文 ...
- go语言实现分布式锁
本文:https://chai2010.cn/advanced-go-programming-book/ch6-cloud/ch6-02-lock.html 分布式锁 在单机程序并发或并行修改全局变量 ...
- 解决问题 inner element must either be a resource reference or empty.
-Q: 错误<item>内部元素必须是资源引用或空 升级Andriod Studio之后编译发现如下错误 Android resource compilation failed ***\a ...
- Go数据类型之复合数据类型--Slice
3.2 Slice 一个slice是一个轻量级的数据结构,提供了访问数组子序列(或者全部)元素的功能,而且slice的底层确实引用一个数组对象. 一个slice由三个部分构成:指针.长度和容量.指针指 ...
- WebSocket使用中Stomp Client连接报ERROR CODE 200的解决办法
[转] https://www.cnblogs.com/chrischeng/p/10237523.html 最近在做一个WebSocket项目,后台使用了Stomp协议的WebSocketConfi ...
- LeetCode - 82、删除排序链表中的重复元素 II
给定一个排序链表,删除所有含有重复数字的节点,只保留原始链表中 没有重复出现 的数字. 示例 1: 输入: 1->2->3->3->4->4->5 输出: 1 ...
- K-D树详解
K-D树最近邻算法https://blog.csdn.net/image_fzx/article/details/80624968 一般说来,索引结构中相似性查询有两种基本的方式: 一种是范围查询,范 ...
- 使用CIFAR-10样本数据集测试卷积神经网络(ConvolutionalNeuralNetwork,CNN)
第一次将例程跑起来了,有些兴趣. 参考的是如下URL: http://www.yidianzixun.com/article/0KNz7OX1 本来是比较Keras和Tensorflow的,我现在的水 ...