//动画函数---任意一个元素移动到指定的目标位置
//element为元素 target为位置
function carToon(element, target) {
//设置一个定时器让他循环去增加
element.timeid = setInterval(function () {
//拿到当前的位置(纯数字)
var current = element.offsetLeft;
//每次要移动的像素current
var step = 10;
//注意 这里是判断到底往那边走 如果当前的位置大于目标位置那么就往回走(往左边走 就是负的像素)
//否则 当前位置小于目标地址 就继续往右走(正数的像素)
step = current > target ? -step : step;
//这里是移动之后的位置
current += step;
//判断目标位置-当前的位置是否大于每次走的像素
if (Math.abs(target - current) > Math.abs(step)) {
//继续移动
element.style.left = current + 'px';
} else {
//目标位置-当前的位置小于每次走的像素.清理定时器 然后让它直接移动到目标的位置
clearInterval(element.timeid);
element.style.left = target + 'px';
}
}, 10)
}
js 封装一个均速动画函数的更多相关文章
-
js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
-
JS---案例:手风琴 (利用封装好的动画函数)
案例:手风琴 封装好的动画函数在common.js里面 //function getStyle(element, attr) {...} //function animate( ...
-
封装一个Ajax工具函数
/*封装一个ajax工具函数*/ window.$ = {}; /*通过$定义一个ajax函数*/ /* * 1. type string 请求的方式 默认是get * 2. url ...
-
使用原生JS封装一个动画函数
最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...
-
原生JS封装创建多级菜单函数
手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...
-
使用vue.js封装一个包含图片的跑马灯组件
初衷: 学习完Vuejs后,来准备练习仿写一下老东家的门户页面,主要是为了熟悉一下常用插件的使用,比如video.js,wow.js,swiper等等:而其中涉及到一个包含图片跑马灯组件,大概长这样( ...
-
JS 封装一个显示时间的函数
s(); function s (){ var mydate=new Date(); var y = mydate.getFullYear(); var m = mydate.getMonth(); ...
-
JS 封装一个求数组最大值的函数
var aa = [1,2,3,4,9,2,5]; z(aa); function z(attr){ var b = 0 for(var i =1;i<aa.length;i++){ if(aa ...
-
JS 封装一个求圆面积的函数 传值:半径
y(6) var s = ""; function y (r){ s = Math.PI*r*r; alert(s); }
随机推荐
-
java.lang.OutOfMemory总结分析
OOM浅析 相信有一定java开发经验的人或多或少都会遇到OutOfMemoryError的问题,这个问题曾困扰了我很长时间,随着解决各类问题经验的积累以及对问题根源的探索,终于有了一个比较深入的认识 ...
-
Sql Server之旅——第五站 确实不得不说的DBCC命令
原文:Sql Server之旅--第五站 确实不得不说的DBCC命令 今天研发中心办年会,晚上就是各自部门聚餐了,我个人喜欢喝干红,在干红中你可以体味到那种酸甜苦辣...人生何尝不是这样呢???正好 ...
-
Redis数据类型之Hash(二)
前言: Redis hash是一个String类型的field和value的映射表.添加.删除操作复杂度平均为O(1),为什么是平均呢?因为Hash的内部结构包含zipmap和hash两种.hash特 ...
-
Thrift生成的bean对象,用java内省操作时注意(自己笔记)
项目需要,需要使用内省操作,将数据写入thrift生成的bean里,于是按常理getWritedMethod.invoke 结果发现set方法找不到,结果看了下thrift自己生成的bean里,set ...
-
Java 多线程(二)—— 线程的同步
上文创建多线程买票的例子中注释会出现错票.重票的问题,本文来讲讲如何解决此问题.本文例子:利用多线程模拟 3 个窗口卖票 实现Runnable接口 public class TestThread2 ...
-
JavaSE基础知识(7)—常用类
一.包装类 1.理解 java为八大基本数据类型一一对应提供了引用类型,方便使用里面的属性和方法 2.包装类型 byte——>Byteshort——>Shortint——>Integ ...
-
第四百一十四节,python常用算法学习
本节内容 算法定义 时间复杂度 空间复杂度 常用算法实例 1.算法定义 算法(Algorithm)是指解题方案的准确而完整的描述,是一系列解决问题的清晰指令,算法代表着用系统的方法描述解决问题的策略机 ...
-
MFC:Tab控件嵌入对话框
1.先建立一个对话框MFC应用程序,然后在工具箱里面把Tab Control控件放到对话框中的合适位置上. 再在对话框类中,声明一个CTabCtrl变量: CTabCtrl m_tab; 变量m_ta ...
-
java把类似a=1&;b=2&;c=3的String类型数据转成map集合
public static Map<String, Object> transStringToMap(String mapString, String separator, String ...
-
spring boot 修改Tomcat端口
package com.tsou.Controller; import org.springframework.boot.*; import org.springframework.boot.auto ...