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, 都不是,就只是普通属 ...
随机推荐
- Matlab查看本机IP地址---xdd
复制粘贴于http://www.matlabsky.com/thread-28597-1-1.html [s, r]=system('ipconfig') % r=regexp(r,'IP Addre ...
- 洛谷P2670-扫雷游戏
文章目录 原题链接 题面简述 输入格式 输出格式 思路 代码 原题链接 题面简述 在n行m列的雷区中有一些格子含有地雷(称之为地雷格),其他格子不含地雷(称之为非地雷格).玩家翻开一个非地雷格时,该格 ...
- 北冥'sfish
北冥咸鱼,其名为鲲.鲲之大,long long存不下.化而为鸟,其名为鹏.鹏之背,高精被卡废.怒而颓,其码若怪诞之吟.是咸鱼,颓废则将遇上cz.cz谁,大佬也.<大佬说>者,志奆者也.&l ...
- cookies与session简介
一.session和cookie 简单来讲cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案. 同时我们也看到,由于采用服务器端保持状态的方案在客户端 ...
- Java字节码深度剖析
Java字节码文件查看 我们有一个类Test01,具体内容如下: package bytecode; public class Test01 { private int i = 0; public i ...
- 【Java基础】字面量相加的类型转换
Java字面量的相加类型转换 1.Java 编译期间(javac),凡是字面量和常量的运算,都会先运算出结果 2.运行期当字符串池中有 String"字面量"时,Java 会直接用 ...
- Git实战指南----跟着haibiscuit学Git(第二篇)
笔名: haibiscuit 博客园: https://www.cnblogs.com/haibiscuit/ Git地址: https://github.com/haibiscuit?tab=re ...
- 【前端】之HTML5基础知识
HTML5 文件格式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 【数据结构】之链表（Java语言描述）
以前写过一篇帖子,记录了链表在C语言中的描述代码.C语言中没有链表的直接实现,因此,我们需要自己编写代码实现.请参考[我的这篇文章]. Java中默认为我们提供了链表的API—— LinkedList ...
- 1、Docker 简介
目录 Docker 起源 Docker 架构 特性 局限 名称空间隔离 原理 Control Groups (cgroups) Docker Docker 啥是docker? Docker 是一个开源 ...