js定时器+简单的动画效果实例


Posted in Javascript onNovember 10, 2017

1.向下滑动

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>向下滑动</title>
 <style>
  body {
   margin: 0px;
  }
  #show {
   width: 200px;
   /* 高度为 0 */
   height: 100px;
   background-color: lightcoral;
   margin: 0 auto;
   /* 设置为隐藏 */
   /*display: none;*/
  }

 </style>
</head>
<body>
<div id="show"></div>
<script>
 var show = document.getElementById('show');
 /*show.style.display = 'block';

 var t = setInterval(function(){
  var style = window.getComputedStyle(show,null);
  var height = parseInt(style.height);
  // 判断当前的高度是否为 400
  if (height >= 400){
   clearInterval(t);
  } else {
   height++;
   show.style.height = height + 'px';
  }
 },50);*/

 slideDown(show,400);

 /*
  将上述实现的向下滑动效果,封装在一个固定的函数中
  * 设计当前实现向下滑动效果函数的形参
   * elem - 表示实现向下滑动效果的元素
   * maxHeight - 表示元素向下滑动的最大高度值
  * 函数的逻辑与默认设置CSS样式属性的值无关
  */
 function slideDown(elem, maxHeight){
  // 操作的元素默认的display值为none
  elem.style.display = 'block';
  elem.style.height = '0px';

  var t = setInterval(function(){
   var style = window.getComputedStyle(elem,null);
   var height = parseInt(style.height);
   // 判断当前的高度是否为 400
   if (height >= maxHeight){
    clearInterval(t);
   } else {
    height++;
    elem.style.height = height + 'px';
   }
  },50);
 }


</script>
</body>
</html>

2.移动效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>移动效果</title>
  <style>
    body {
      margin: 0px;
    }
    #box {
      width: 100px;
      height: 100px;
      background-color: lightcoral;

      position: absolute;
      left: 100px;
      top: 100px;
    }
  </style>
</head>
<body>
<div id="box"></div>
<script>
  var box = document.getElementById('box');
  box.onclick = function(){
    clearInterval(t);
  }
  /*
    * 向右移动
     * 当前元素移动到页面的最右边时 -> 向左移动
    * 向左移动
     * 当前元素移动到页面的最左边时 -> 向右移动
   */
  var flag = false;// 默认表示向右
  var speed = 1;// 表示每次变化的值
  t = setInterval(function(){
    //speed += 0.01;
    // 获取当前页面的宽度
    var WIDTH = window.innerWidth;
    var style = window.getComputedStyle(box,null);
    var left = parseInt(style.left);
    var width = parseInt(style.width);
    // 判断当前元素移动的方向
    if (flag){// 向左移动
      left -= speed;
    } else {// 向右移动
      left += speed;
    }
    // 判断什么情况下,向左移动;判断什么情况下,向右移动
    if ((left + width) >= WIDTH){// 向左移动
      flag = true;
    } else if (left <= 0){// 向右移动
      flag = false;
    }
    box.style.left = left + 'px';
  },10);

</script>
</body>
</html>

3.事件与动画结合

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件与动画结合</title>
  <style>
    body {
      margin: 0px;
    }
  </style>
</head>
<body>
<script>
  // 获取<body>元素
  var body = document.body;
  // 当页面加载完毕后,设置当前<body>元素的高度为当前浏览器窗口的高度
  window.onload = function(){
    setHeight(body);
  };
  // 当用户改变浏览器窗口的大小时,重新设置<body>元素的高度(等于当前窗口的高度)
  window.onresize = function(){
    setHeight(body);
  };
  // 定义函数 - 设置<body>元素的高度等于当前窗口的高度
  function setHeight(elem){
    elem.style.height = window.innerHeight + 'px';
  }

  var width = 100,height = 100;
  // 为<body>元素绑定click事件
  body.onclick = function(event){
    var x = event.clientX;
    var y = event.clientY;
    // 创建<div>元素,显示的位置在鼠标当前的坐标值
    var div = document.createElement('div');
    div.setAttribute('class','circle');
    body.appendChild(div);
    // rgb(0,0,0)格式 -> 颜色随机
    var r = parseInt(Math.random()*255);
    var g = parseInt(Math.random()*255);
    var b = parseInt(Math.random()*255);

    div.style.width = width + 'px';
    div.style.height = height + 'px';
    div.style.backgroundColor = 'rgb('+r+','+g+','+b+')';
    div.style.borderRadius = '50%';
    div.style.opacity = 1;
    div.style.position = 'absolute';
    div.style.left = x - width/2 + 'px';
    div.style.top = y - height/2 + 'px';

    animate(div);
  }
  // 定义函数 -> 实现动画效果
  function animate(elem){
    var style = window.getComputedStyle(elem,null);
    /*var width = parseInt(style.width);
    var height = parseInt(style.height);
    var left = parseInt(style.left);
    var top = parseInt(style.top);
    width++;
    height++;
    elem.style.width = width + 'px';
    elem.style.height = height + 'px';
    elem.style.left = (left - 0.5) + 'px';
    elem.style.top = (top - 0.5) +'px';*/

    var opacity = style.opacity;

    if (opacity <= 0){
      clearTimeout(t);
      // 删除当前元素
    }

    opacity -= 0.01;
    elem.style.opacity = opacity;

    // 设定定时器
    var t = setTimeout(function(){
      animate(elem);
    },50);
  }

</script>
</body>
</html>

以上这篇js定时器+简单的动画效果实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
js canvas实现擦除动画
Jul 16 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 #Javascript
angular之ng-template模板加载
Nov 09 #Javascript
深入理解Vue 单向数据流的原理
Nov 09 #Javascript
node.js基于express使用websocket的方法
Nov 09 #Javascript
angular2系列之路由转场动画的示例代码
Nov 09 #Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 #Javascript
基于vue配置axios的方法步骤
Nov 09 #Javascript
You might like
php中的三元运算符使用说明
2011/07/03 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
laravel请求参数校验方法
2019/10/10 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
python实现查询IP地址所在地
2015/03/29 Python
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
Python切片索引用法示例
2018/05/15 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
python实现定时发送qq消息
2019/01/18 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
临床医学专业学生的自我评价分享
2013/11/21 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
打架检讨书2000字
2014/02/22 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
实习报告评语
2014/04/26 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
Go gorilla/sessions库安装使用
2022/08/14 Golang