原生javascript 基础动画函数封装(一)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{ margin:0;padding: 0;}
div{position: absolute; width: 100px; height: 100px; background: red; left: 0;top: 100px;}
</style>
</head>
<body>
<button id="btn1">向右</button>
<button id="btn2">向左</button>
<div id="box"></div> <script type="text/javascript">
window.onload = function(){
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var box = document.getElementById('box'); btn1.onclick = function(){
move(box,12,600);
} btn2.onclick = function(){
move(box,-12,0);
}
/*
obj:要运动的元素
dir:步长
target:目标点
*/
function move(obj,dir,target){
// 1、清除定时器
clearInterval(obj.timer);
// 2、设置定时器
obj.timer = setInterval(function(){
// 3、获取元素当前位置+步长
var speed = obj.offsetLeft + dir;
console.log(speed)
// 4、如果元素当前位置超过目标点，则把当前位置==目标点
if( speed > target && dir > 0 || speed < target && dir < 0){
speed = target
}
// 5、设置元素位置
obj.style.left = speed + 'px';
// 6、判断是否到达目标点，如果到达则停止定时器
if(speed == target){
clearInterval(obj.timer);
}
},20)
}
}
</script>
</body>
</html>
原生javascript 基础动画函数封装(一)的更多相关文章
- 原生javascript 基础动画函数封装(二)
<!DOCTYPE html> <html> <head> <title></title> <style type="tex ...
- 移动端滑屏全应用【一】cssHandler操作基础动画函数封装
前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速.我们都会使用getComputedStyle来获取结点的最终样 ...
- 原生javascript 基础动画原理
一.实现原理: 1.开定时器前先清除定时器 2.设置定时器 3.当前元素的位置 + 每一步的长度 4.当元素当前位置超过目标点时,把当前位置==目标点 5.设置元素位置,开始运动 6.判断当前位置如果 ...
- 原生JS实现动画函数的封装
封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if ...
- 浅谈原生JavaScript的动画和特效
一.JavaScript中的动画原理 动画效果的实现总的来说可分为两种,一种是利用纯css实现,该方法在css3成熟后广泛应用:另外一种是通过JavaScript(或者一些封装的库如jQuery的an ...
- 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）
移动端 css3 transition 动画 ,requestAnimationFrame 动画 对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...
- 原生JavaScript中动画与特效的实现原理
现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...
- javascript基础(五)函数
原文http://pij.robinqu.me/ 通过call和apply间接调用函数(改变this) call 和 apply带有多个参数,call和apply把当前函数的this指向第一个参数给定 ...
- （Frontend Newbie）JavaScript基础之函数
函数可以说是任何一门编程语言的核心概念.要能熟练掌握JavaScript,对于函数及其相关概念的学习是非常重要的一步.本篇从函数的基本知识.执行环境与作用域.闭包.this关键字等方面简单介绍Java ...
随机推荐
- 读取Flex AIR应用程序设置
说明: 本人之前做过一年的Flex AIR移动跨平台开发,在之前学习过程中,一直是将笔记记在了Evernote上,有的笔记是自己写的,也有的笔记是在网上看到,顺手记下了的. 所以在这里声明下,如果在网 ...
- Koa2 遇到Method Not Allowed 获取不到返回值
https://q.cnblogs.com/q/114462/ 都来找我 Haisen‘s blogs 求求各位大神了,2点多了没解决睡不着啊,我按照网上用的koa2-cors,g ...
- 2019-9-2-win10-uwp-列表模板选择器
title author date CreateTime categories win10 uwp 列表模板选择器 lindexi 2019-09-02 12:57:38 +0800 2018-2-1 ...
- P1013 高精度加法
题目描述 给你两个很大的正整数A和B,你需要计算他们的和. 输入格式 输入一行包含两个正整数A和B,以一个空格分隔(A和B的位数都不超过 \(10^5\)) 输出格式 输出一行包含一个整数,表示A+B ...
- es6笔记 day3---数组新增东西
Array.from()的作用就是把类数组转成数组.所谓类数组,就是有长度的数组 ----------------------------------------------------------- ...
- dotnet 控制台读写 Sqlite 提示 no such table 找不到文件
在使用 dotnet 读写 Sqlite 可以通过 EF Core 的方法,但是在 EF Core 创建的数据库可能和读写的数据库不是相同的文件 在我运行代码的时候发现在通过迁移创建数据库,创建的文件 ...
- 【NOIP数据结构专项】单调队列单调栈
[FZYZ P1280 ][NOIP福建夏令营]矩形覆盖 Description 有N个矩形,矩形的底边边长为1,且均在X轴上,高度给出,第i个矩形的高为h[i],求最少需要几个矩形才能覆盖这个图形. ...
- HDU6578 2019HDU多校训练赛第一场 1001 （dp）
HDU6578 2019HDU多校训练赛第一场 1001 (dp) 传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6578 题意: 你有n个空需要去填,有 ...
- Flask学习-Virtualenv
http://www.pythondoc.com/ VirtualEnv Virtualenv用于同一台机器上创建多个独立的Python虚拟运行环境,多个Python环境相互独立,互不影响,它能够: ...
- 如何抢占云栖大会C位？史上最强强强攻略来了
本文作者:阿里云头条 原文链接 本文为云栖社区原创内容,未经允许不得转载.