JS---案例：移动元素，封装动画函数
案例：移动元素，封装动画函数
console.log(my$("dv").offsetLeft);
动画函数animate封装
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
} input {
margin-top: 20px;
} div {
margin-top: 30px;
width: 200px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head> <body>
<input type="button" value="移动到400px" id="btn1" />
<input type="button" value="移动到800px" id="btn2" />
<div id="dv"></div>
<script src="common.js"></script>
<script> //点击第一个按钮，移动到400px
my$("btn1").onclick = function () {
animate(my$("dv"), 400);
};
//点击第二个按钮，移动到800px
my$("btn2").onclick = function () {
animate(my$("dv"), 800);
}; //动画函数animate封装
function animate(element, target) {
//先清理定时器
clearInterval(element.timeId);
//一会要清理定时器 （只产生一个定时器）
element.timeId = setInterval(function () {
//获取div当前位置
var current = element.offsetLeft; //数字类型，没有px
//div每移动多少像素---步数
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";
}
}, 20);
} </script>
</body> </html>
JS---案例：移动元素，封装动画函数的更多相关文章
- 使用原生的javascript封装动画函数(有callback功能)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JS编程练习：封装insertAfter函数(功能类似于系统insertBefor)
那么insertAfter()要实现的功能: 在指定的子节点后面插入新的子节点: 1 <body> 2 <div> 3 <p></p> 4 <sp ...
- js原生实现链式动画效果
// 1. css样式 div { width: 100px; height: 100px; background: olivedrab; position: absolute; left: 0px; ...
- 原生JS实现动画函数的封装
封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if ...
- 使用原生JS封装一个动画函数
最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...
- JS高级---案例贪吃蛇，把封装的函数移动到js文件中
案例贪吃蛇,把封装的函数移动到js文件中 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- js 封装一个均速动画函数
//动画函数---任意一个元素移动到指定的目标位置 //element为元素 target为位置 function carToon(element, target) { //设置一个定时器让他循环去增 ...
- 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）
移动端 css3 transition 动画 ,requestAnimationFrame 动画 对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...
- JS---最终版本--封装缓动（变速）动画函数---增加任意多个属性&回调函数&层级&透明度
封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度 相较之前的,增加了2个判断,第一个判断是不是透明度,第二个判断是不是zindex, 都不是,就只是普通属 ...
随机推荐
- Java中的compareTo()方法，compareToIgnoreCase()方法
1.compareTo(String)方法: Java中String类有一个compareTo方法,该方法返回一个int类型的数据.其比较规则是:拿出字符串的第一个字符与参数的第一个字符进行比较,如果 ...
- 转帖：30多条mysql数据库优化方法,千万级数据库记录查询轻松解决
地址:http://www.ihref.com/read-16422.html
- Vue-Property-Decorator源码分析
概述 vue-property-decorator是基于vue组织里vue-class-component所做的拓展,先来了解一下vue-class-component Vue-Class-Compo ...
- Chapter 06—Basic graphs
三. 柱状图(Histogram) 1. hist():画柱状图 ·breaks(可选项):控制柱状图的小柱子的条数: ·freq=FALSE:基于概率(probability),而非频率(frequ ...
- 2019-2020-11 20199304 《Linux内核原理与分析》 第十一周作业
缓冲区溢出漏洞实验 一.简介 缓冲区溢出是指程序试图向缓冲区写入超出预分配固定长度数据的情况.这一漏洞可以被恶意用户利用来改变程序的流控制,甚至执行代码的任意片段.这一漏洞的出现是由于数据缓冲器和返回 ...
- 3分钟了解ServiceStage 应用智能化运维【华为云分享】
[摘要] 微服务云应用平台(ServiceStage)是面向企业及开发者的一站式DevOps平台服务,支持基于微服务的应用开发.治理.部署及运维监控的全生命周期管理,并提供大规模容器集群管理及中间件服 ...
- Sql增加,删除,修改列
1. 查看约束条件 - MySQL: SELECT * FROM information_schema.`TABLE_CONSTRAINTS` where table_name = 'book'; - ...
- 利用 FC + OSS 快速搭建 Serverless 实时按需图像处理服务
作者:泽尘 简介 随着具有不同屏幕尺寸和分辨率设备的爆炸式增长,开发人员经常需要提供各种尺寸的图像,从而确保良好的用户体验.目前比较常见的做法是预先为一份图像存放多份具有不同尺寸的副本,在前端根据用户 ...
- react-native测试安装
!!!注意!!!:init命令默认会创建最新的版本,而目前最新的0.45及以上版本需要下载boost等几个第三方库编译.这些库在国内即便翻墙也很难下载成功,导致很多人无法运行iOS项目!!!中文网在论 ...
- git 使用详解（4）—— commit -a -m/diff --staged/rm/mv
查看已暂存和未暂存的更新 实际上 git status的显示比较简单,仅仅是 列出了(修改过的.新创建的.已经暂存但未提交的)文件,如果要查看具体修改了什么地方,可以用git diff 命令.稍后我们 ...