原生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 ...
随机推荐
- jq css()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [转]Win10下安装Linux子系统
工作以来一直DotNet系偏C/S, 接触Web开发的时间也不长, 现在主要偏向Web全栈方向, 一直对Linux系统心生向往, 夜深了娃睡了, 打开老旧的笔记本来折腾一下. 准备工作 控制面板 &g ...
- 2018-8-10-VisualStudio-合并代码文件
title author date CreateTime categories VisualStudio 合并代码文件 lindexi 2018-08-10 19:16:52 +0800 2018-2 ...
- ES6,ES7重点介绍
1. 字符串模板 <!--旧版拼接字符串--> var str = '我是时间:'+new Date(); <!--新版拼接字符串--> let str = `我是时间${ne ...
- ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理(9)之系统登录
前面我们已经做好了一个文章管理功能模块,接下来,我们回头来做登录窗口,登录不仅涉及到登录验证还涉及到登录日志还有缓存时长等. 对于缓存的相关设置,我们已经写好封装在Bobo.Utilities.dll ...
- linux内核指针和错误值
很多内部内核函数返回一个指针值给调用者. 许多这些函数也可能失败. 大部分情况, 失 败由返回一个 NULL 指针值来指示. 这个技术是能用的, 但是它不能通知问题的确切特性. 一些接口确实需要返回一 ...
- vue2.x+elelmentUI@3.5 表格
<template> <section> <el-row> <el-col :span="16"> <!--表单--> ...
- windows添加右键菜单
哔哔 有时候想要用websotrm打开一个项目, 有时候想要用VScode打开,最快的方法就是右键指定打开方式了 这些软件安装的时候会自带,但如果有些软件没有自带右键项,就得去注册表里手动添加 这些东 ...
- Struts2注解详解(转)
一,引入支持Struts2支持注解开发jar包: struts2-convention-plugin-2.1.8.1.jar(支持Struts2框架注解开发的jar包) 二,Struts2使用注解开发 ...
- 亲测可用的优雅的在已经安装了python的Ubuntu上安装python3.5
我的Ubuntu上已经安装了python2.7和3.4. 用以下方法可以方便的顺利的安装python3.5,使用的时候也不会发生冲突. 一条一条输入以下语句 wget https://www.pyth ...