bom-简单动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}
#box {
position: relative;
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<input type="button" value="开始" id="btn">
<div id="box"></div>
<script>
// 1 点击按钮，让盒子能够向右移动
var btn = document.getElementById('btn');
var box = document.getElementById('box');
btn.onclick = function () {
// // style.left 获取的是标签中的style属性设置的样式属性的值
// // 如果标签中的style没有设置该样式属性，我们获取到的是空字符串
// console.log(box.style.left);
// // 10px10px 当我们给样式属性设置非法的值，浏览器会帮我们过滤掉
// console.log(box.style.left + 10 + 'px');
// box.style.left = box.style.left + 10 + 'px';
//
//
// 获取盒子当前的位置 offsetLeft offsetTop
// box.style.left = box.offsetLeft + 10 + 'px';
//
// box.offsetLeft 只读属性
//
// 2 让盒子不停的向右移动
// 循环的速度非常非常非常快，瞬间循环100次
// for (var i = 0; i < 100; i++) {
// box.style.left = box.offsetLeft + 5 + 'px';
// } var timerId = setInterval(function () {
// 让盒子停在500px的位置
// 判断盒子当前的位置是否到达500
//
// 最终盒子停止的位置
var target = 600;
// 步进
var step = 6;
if (box.offsetLeft >= target) {
// 停止定时器
clearInterval(timerId);
// 设置横坐标为500
box.style.left = target + 'px';
console.log(box.style.left);
// 退出函数
return;
}
box.style.left = box.offsetLeft + step + 'px';
console.log(box.style.left);
}, 30);
} </script>
</body>
</html>
bom-简单动画的更多相关文章
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- jquery添加光棒效果的各种方式以及简单动画复杂动画
过滤器.绑定事件.动画 一.基本过滤器 语法 描述 返回值 :first 选取第一个元素 单个元素 :last 选取最后一个元素 单个元素 :not(selector) 选取去除所有与给定选择器匹 ...
- UIView简单动画
UIView动态实现的效果有以下几种: 1.动态改变frame 2.动态改变color 3.动态改变alpha 4.动态改变bounds 首先,我们先看几种BasicView动画 #pragma ma ...
- IOS 简单动画 首尾式动画
首尾式动画 首尾式动画即通过实现控件由初始状态到结束状态的过程.(主要表现在控件的Frame 透明度 ) // // ViewController.m // CX 简单动画 // // Created ...
- jQuery中自定义简单动画的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- canvas制作简单动画
在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1．自定义一个函数,用于图形的移动或其他动作. 2．使用setIn ...
- Cocos2d-x 2.1.5 简单动画
Cocos2d新版本函数更改了一些. 下面的代码可以产生一个简单动画. //第一步:生成动画需要的数据 CCTexture2D *texture=CCTextureCache::sharedTextu ...
- UI设计篇·入门篇·简单动画的实现，透明动画/旋转动画/移动动画/缩放动画，混合动画效果的实现，为动画设置监听事件，自定义动画的方法
基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...
- python实现简单动画——生命游戏
生命游戏 生命游戏的宇宙是一个无限的,其中细胞的二维正交网格,每个细胞处于两种可能的状态之一,即*活着*或*死亡*(分别是*人口稠密*和*无人居住*).每个细胞与它的八个邻居相互作用,这八个邻居是水平 ...
- Blender简单动画:一个小球从一座山上滚下.
简单动画:一个小球从一座山上滚下.注:[key]方括号内是快捷键; {大括号}内是模式,页签名称或选项等. ==== 1. 建模: == 1.1 山[shift A] 建立平面plane,可以大 ...
随机推荐
- MySQL数据库常用命令汇总
-- 查看mysql的当前登陆用户 select user(); -- 列出数据库 show databases; -- 使用数据库 use mysql; describe mysql.user; s ...
- Kylin启动步骤
Kylin本身的启动命令比较简单, 但是由于Kylin依赖的其他组件比较多, 所以把完整的启动步骤整理一下. 1.确保集群时间同步 首先查看集群中的时间是否同步 date 如果时间不一致,需要使用如下 ...
- 算法竞赛——BFS广度优先搜索
BFS 广度优先搜索:一层一层的搜索(类似于树的层次遍历) BFS基本框架 基本步骤: 初始状态(起点)加到队列里 while(队列不为空) 队头弹出 扩展队头元素(邻接节点入队) 最后队为空,结束 ...
- 使用 Docker 部署 Seata Server（分布式事务解决方式）
1.获取镜像 ## 使用下面命令获取最新版本的镜像,此时我的版本是1.3.0 ## 或者可以使用docker pull seataio/seata-server:latest获取最新的镜像 docke ...
- Django_静态资源配置和ajax（九）
一.静态资源配置 静态资源的相关配置都在项目目录下的 settings.py 文件中进行配置.配置参数如下: # 浏览器访问静态资源时的路径 STATIC_URL = '/static2/' # 存放 ...
- git clone 失败 ，提示 fatal: unable to access 'https://github.com/xxx.git/': OpenSSL SSL_read: Connection was reset, errno 10054
怎么解决? 把原来的指令 $ git clone https://github.com/cen-xi/express.git 改成 $ git clone git://github.com/cen-x ...
- python驱动SAP完成数据导出（二）
在上一篇 python驱动SAP完成数据导出(一)中,我们提到了数据导出前,SAP布局的重要性,如何识别当前布局模式,以及如何切换到想要的布局.本篇小爬将着重讲讲数据导出的注意事项. 我们可以通过如下 ...
- 应用层：http请求报文和响应报文
1.http请求报文 请求报文由请求行.报文头.空行.报文体组成. 请求行可分为请求方法.请求URL.HTTP协议及版本. 举例1: GET / HTTP/1.1\nHost: 220.181.38. ...
- 带你自定义实现Spring事件驱动模型
Spring 事件驱动模型概念 Spring 事件驱动模型就是观察者模式很经典的一个应用,我们可以通过Spring 事件驱动模型来完成代码的解耦. 三角色 Spring 事件驱动模型或者说观察者模式需 ...
- sql语句 异常 Err] 1064 - You have an error in your SQL syntax;
在我们开发的工程中,有时候会报[Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds ...