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, 都不是,就只是普通属 ...
随机推荐
- 图解 Spring：HTTP 请求的处理流程与机制【3】
3. HTTP 请求在 Web 应用中的处理流程 在穿越了 Web 容器之后,HTTP 请求将被投送到 Web 应用,我们继续以 Tomcat 为例剖析后续流程.Web 容器与 Web 应用的衔接是通 ...
- 内网环境搭建NTP服务器
说在前面:ntp和ntpdate区别 ①两个服务都是centos自带的(centos7中不自带ntp).ntp的安装包名是ntp:ntpdate的安装包是ntpdate.他们并非由一个安装包提供. ② ...
- linux 相关零碎知识整理
1.启动bash shell 大部分linux系统启动用户命令行接口(cli)环境时使用默认的bash shell,在bash shell启动时,它将自动执行位于用户主目录下的.bashrc中的命令. ...
- selenium webdriver学习--------iframe的处理
有时候我们在定位一个页面元素的时候发现一直定位不了,反复检查自己写的定位器没有任何问题,代 码也没有任何问题.这时你就要看一下这个页面元素是否在一个iframe中,这可能就是找不到的原因之一.如果你在 ...
- 从spring boot发邮件聊到开发的友好性
前些天帮一个朋友做网站,全站都是静态页面,唯一需要用到后端开发的是他需要一个留言板.传统的留言板一般都是提交后保存到数据库,然后提供一个后台的留言列表给管理人员看,我嫌麻烦,就决定留言提交到后台直接发 ...
- kubeadm 1.16+ 初始化后 Unable to update cni config: no valid networks found in /etc/cni/net.d
问题描述: 在使用 kubeadm 工具初始化k8s后,并且安装了 flanneld 网络组建后,/var/log/messages 依旧报错, Unable to update cni config ...
- F#周报2019年第49期
新闻 宣告.NET Core 3.1 新书:Kevin Avignon的F#提升效率 .NET Core 2.2将在2019年12月23日迎来终结 Visual Studio 16.5预览版1中升级了 ...
- 信鸽推送Push API
目录 信鸽推送 push API 0. 基本 push 1. 根据 token list,推送到android和ios 2. 推送到android和ios 所有用户 信鸽推送 push API 参考: ...
- HDU3032 Nim or not Nim?(Lasker’s Nim游戏)
Nim or not Nim? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- 使用 Ocelot 匹配路由的方法匹配路由
使用 Ocelot 匹配路由的方法匹配路由 Intro 之前我们在 Ocelot 网关的基础上自定义了一个认证授权的 Ocelot 中间件,根据请求的路径和 Method 进行匹配,找到对应的权限配置 ...