javascript简易的动画效果

JavaScript做一个简易的动画效果，主要还是要注意的是js部分

还是和往常一样创建一个HTML，如下图（开始操作）：

首先写一个div做成一个正方形盒子，内名为“box”，也可以给它写其他名，自由创作

再写两个div做成竖线，各自给一个不同的内名，在script用来做检测判断用的

还有再加两个input标签或者button标签，各给一个id名如下图：

给这些div标签和input标签做好css属性样式，以及定好位置，如下图代码：

这就是在浏览器的一个样貌，颜色可以自己随意去改，大小也可以随意去更改，但要一致同等的高度，不然看起来很不完整

接下来的是重点，script标签，可以使用代入，也可以直接在script标签里编程，如下图的代码及一些分析，简单的没有过多的分析
源代码，下面可复制：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#box {width: 100px;height: 100px;background-color: pink;position: absolute;top: 100px;left: 0px;}.line400 {width: 1px;height: 100px;background-color: red;position: absolute;left: 400px;top: 100px;}.line800 {width: 1px;height: 100px;background-color: red;position: absolute;left: 800px;top: 100px;}
</style>
<body><div id="box"></div><div class="line400"></div><div class="line800"></div><input type="button" value="右移400" id="r1"><input type="button" value="右移800" id="r2"><script>var box = document.getElementById("box");//获取‘box’的id名var btnR1 = document.getElementById("r1");//获取‘按钮1’的id名var btnR2 = document.getElementById("r2");//获取‘按钮2’的id名btnR1.onclick = function () {Animation(box, 400);};btnR2.onclick = function () {Animation(box, 800);};// 封装动画函数function Animation(ele, target) {// 先清除动画clearInterval(ele.tid);// 获取当前位置var currentLeft = ele.offsetLeft;// 判断左移右移var isLeft = (currentLeft < target);// 开启定时器ele.tid = setInterval(function () {// 移动currentLeft = isLeft ? currentLeft + 10 : currentLeft - 10;ele.style.left = currentLeft + "px";// 边界检测if (isLeft ? currentLeft >= target : currentLeft <= target) {// 停止运动clearInterval(ele.tid);// 元素复位ele.style.left = target + "px";}}, 50)}</script>
</body>
</html>

javascript简易的动画效果相关推荐

简易的动画效果进度条（C++）
闲来无事就想写一个进度条的代码,写了多次,效果一直不是很好,不过今天终于完善了,自我感觉效果还可以.下面是效果图: 图1 代码执行中图2 代码执行完成附上进度条函数源代码: //x是当前运行的次数 ...
html动画效果结束返回,javascript判断css3动画结束 css3动画结束的回调函数
本文主要给大家介绍的是如何使用javascript判断CSS3动画效果结束,主要是使用了javascript的回调函数,其思路是一旦动画或变换结束,回调函数就会触发.不再需要大型类库支持,非常的简单实 ...
html5 鼠标滑动页面动画效果,鼠标滑动到当前页面触发动画效果
近年来,关于鼠标滑动到当前页面从而触发动画效果十分的火热,今天我们就来学习下这一效果. 一.首先,我们先来了解一下这一效果实现的原理 1.一个网页离不开基本的布局,所以首先就是要先用html将所需要的 ...
Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
【BOOM】一款有趣的Javascript动画效果
实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下. boomJS 缘起前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...
JavaScript——仿键盘打字输入动画效果DEMO
功能介绍 jQuery仿键盘打字输入动画效果,支持设置字体为红色.设置背景色.暂停.开始.码字.退格功能. 源代码 <!DOCTYPE html> <html lang=" ...
javascript实现汉诺塔动画效果
javascript实现汉诺塔动画效果当初以为不用html5也很简单,踩了javascript单线程的大坑后终于做出来了,没事可以研究下,对理解javascript的执行过程还是很有帮助的,代码很烂 ...
自定义动画属性java_创建酷炫动画效果的10个JavaScript库
原标题:创建酷炫动画效果的10个JavaScript库 1) Dynamics.jsDynamics.js是设计基于物理规律的动画的重要Java库.它可以赋予生命给所有包含CSS 和SVG属性的DOM ...
html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% 代码如下: ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...

javascript简易的动画效果

javascript简易的动画效果相关推荐

最新文章

热门文章