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,可以大 ...
随机推荐
- bat文件调用CMD命令快速显示ip
代码如下: @echo off :main cls ipconfig @pause ipconfig 可改为其他CMD命令
- Java初学者作业——分别计算两个整数加、减、乘、除的结果并显示，要求除法保留两位小数。
返回本章节 返回作业目录 需求说明: 分别计算两个整数加.减.乘.除的结果并显示,要求除法保留两位小数. 实现思路: 接收用户控制台输入的两个整数. 实现两个整数的加.减.乘.除的运算并输出结果. 除 ...
- HTML网页设计基础笔记 • 【目录】
持续更新中- 我的大学笔记>>> 章节 内容 第1章 HTML网页设计基础笔记 • [第1章 HTML5基础] 第2章 HTML网页设计基础笔记 • [第2章 排列页面内容] 第3章 ...
- 编写Java程序，使用 Java 的 I/O 流将 H:\eclipse.zip 文件拷贝至 E 盘下，重新命名为 eclipse 安装 .zip。
查看本章节 查看作业目录 需求说明: 使用 Java 的 I/O 流将 H:\eclipse.zip 文件拷贝至 E 盘下,重新命名为 eclipse 安装 .zip.在拷贝过程中,每隔2000 毫秒 ...
- ORACLE 之 按月循环执行操作
DECLARE i number; BEGIN i:= 201705; WHILE i <202104 LOOP if i=201713 then i:=201801; elsif i=2018 ...
- Go语言系列之知识框架
一.Go基础入门知识 二.变量和基本数据类型 三.流程控制语句 四.数组和切片 五.map的声明和使用 六.函数func方法 七.指针和地址 八.结构体 九.接口interface 十.并发神器gor ...
- POJCrossing River
http://poj.org/problem?id=1700贪心问题 对于一个安排,怎么样是最小的?首先关于花费,对于每次运输,以最节约的方式运输.两种情况,一种最轻的作为往返,另外 一种是每次带一个 ...
- 关于MySQL中group by的一些问题的记录
only full group by问题的解约方案 这个报错的原因是,在SQL语句中,你查询的字段应该是你分组的依据,即select的column应该全部跟在group by之后.这个也和MySQL的 ...
- Docker之Docker Machine已弃用
作为刚开始学习docker的新手,从网上查询文档无疑是最快的学习捷径,但是这次在docker翻车了,困扰了整整三天,特记录一下. 一般我们使用docker for windows安装,一路往下点直至安 ...
- 【Java】Collections
文章目录 Collections reverse(List) shuffle(List) sort(List) sort(List,Comparator) swap(List,int, int) Ob ...