js off 缓动动画
2024-09-26 04:24:52
动画也有很多种,一起来学习,缓动动画吧
缓动动画
1、缓动动画原理=盒子位置+(目标盒子位置-现在盒子位置)/10
2、步长越来越小
3、让步长越来越小的公式
步长=(目标位置-本身位置)/10
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>
最新文章
- 今天无意发现jquery的一个以前的误导
- 【MySQL】编译安装
- ajax请求封装
- java 字节数组转int
- 24Spring_事务管理机制
- [linux] linux下编译安装zlib
- [记录] javascript 对象中使用setTimeout
- libpng causes error concerning pngconf.h
- 小谷的战斗Jquery(三)--水平和垂直菜单
- angular : $eval &; $timeout
- 2015多校联赛 ——HDU5288(数学)
- 使用Ncat反弹Shell
- java的接口
- 网络运维必回的模拟器-GNS软件下载和安装
- 涂抹mysql笔记-mysql管理工具
- Centos7.5安装VirtualBox-5.2
- 学习笔记42—Win7下安装Linux双系统
- caffe 笔记
- mapreduce设置setMapOutputKeyClass与setMapOutputValueClass原因
- 动态规划模板2|LCS最长公共子序列
热门文章
- Java序列化流
- win10 查看本机的激活秘钥
- HTML Marquee跑马灯
- MFC_选择目录对话框_选择文件对话框_指定目录遍历文件
- JavaScript常用数组操作方法,包含ES6方法
- org.springframework.dao.DuplicateKeyException: 问题
- centos7开启80端口及其他端口
- 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS
- javascript_18-Array 数组
- Linux命令——watch