js 封装一个均速动画函数
//动画函数---任意一个元素移动到指定的目标位置
//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); }
随机推荐
- EOFException异常的处理
TOmcat启动后报:IOException while loading persisted sessions: Java.io.EOFException错误 - IOException while ...
- Gym-101128D:Dice Cup
题意 给你两个骰子,一个有n面,一个有m面,分别仍一次,求和的概率最大的值 分析 签到题 模拟就行 凑数才把这个题也发到博客上···· #include <cstdio> #include ...
- noip2010 关押罪犯 (vijos1776)
题目 S城现有两座监狱,一共关押着N名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨气值”(一个正整数值)来表示某两名罪 ...
- 如何在局域网架设FTP(特别简单方便)
https://files.cnblogs.com/files/wlphp/FTPserver.zip 在我上传的博客园文件下载下来 启动服务,设置账号密码(注意一定要关闭防火墙)
- 内存cache使用的场景
Q.业务场景内为什么要使用内存cache? A.为了利用内存cache的优点, 解决业务场景内的缺陷 Q.内存cache的优点和缺点 A.优点: 内存读写速度比磁盘块 缺点: 内存空间有限, 内存单价 ...
- Python学习笔记_一个Tkinter示例,使用FileDialog
为了使用Python进行数据分析,编写一个图形界面,选择一个Excel文件(或CSV),然后进行后续处理. 一.本示例涵盖如下知识点: 1.FileDialog的使用 2.退出程序 3.消息提示框的示 ...
- SQL 数据库 学习 002 如何启动 SQL Server 软件
如何启动 SQL Server 软件 我的电脑系统: Windows 10 64位 使用的SQL Server软件: SQL Server 2014 Express 如果你还没有下载 SQL Serv ...
- Django框架 之 form组件的钩子
Django框架 之 form组件的钩子 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 3 ...
- jqgrid常用操作
.jqgrid控件列在需要的地方加上edittable=true <asp:JQGrid runat=" DataUrl="/ccr/CcrCompanyPromoterMa ...
- 【原创测试】MongoDB千万级插入数据测试(MMO在线游戏应用场合)
一.筹备 我们要做一次千万级的MONGODB测试,操作系统选用CentOS 5.5 64位版,基本模拟实际的使用环境,采用单机集群模型(测试单机多CPU情况下的实际效果). 测试基准数据: 服务器配置 ...