JavaScript中的canvas 实现一个圆环渐变倒计时效果

目录
  • 前言
  • 1、效果图展示
  • 2、需求分析
  • 3、实现的技术
  • 4、实现的过程
    • 1. HTML 部分
    • 2. SASS部分
    • 3. JavaScript部分
  • 5、全部源码
    • 1.index.html
    • 2. style.scss
    • 3. index.js

前言

内容:

  • 效果图
  • 需求分析
  • 实现技术
  • 实现过程
  • 全部源码

1、效果图展示

随着时间的减少, 圆环的红黄色部分会慢慢的减少,圆环中的数字会变小,一直到0停止.

2、需求分析

  • 可以自定义倒计时结束的时间
  • 圆环的颜色是渐变的
  • 倒计时的动画在视觉上是流畅运行, 而不是一格一格的减少

3、实现的技术

语言 框架
HTML5
CSS3 BootStrap SASS
JavaScript

4、实现的过程

1. HTML 部分

主要用到的是 HTML5 中的画布元素 canvas, 一共4个 canvas 元素拍成一排, 每个元素都是高144px, 宽144px的正方形, 两个圆环中的两个小点部分可以使用伪元素 after 和 before 来实现

源码如下:

<div class="count-down">
 <div class="container">
   <div class="row">
     <div class="days col-lg-3 col-md-3 col-sm-3 col-xs-6">
       <div class="colck">
         <canvas id="days" width="144" height="144"></canvas>
       </div>
     </div>
     <div class="hours col-lg-3 col-md-3 col-sm-3 col-xs-6">
       <div class="colck">
         <canvas id="hours" width="144" height="144"></canvas>
       </div>
     </div>
     <div class="minutes col-lg-3 col-md-3 col-sm-3 col-xs-6">
       <div class="colck">
         <canvas id="minutes" width="144" height="144"></canvas>
       </div>
     </div>
     <div class="seconds col-lg-3 col-md-3 col-sm-3 col-xs-6">
       <div class="colck">
         <canvas id="seconds" width="144" height="144"></canvas>
       </div>
     </div>
   </div>
 </div>
</div>

用 BootStrap 提供的栅格布局快速的把 canvas 元素排成一排 为每个 cnavas 元素设置对应的 id, 方便用 JavaScript 获取到该元素.

2. SASS部分

css 的部分是用 Sass 来写的, Sass 是一个 css 的 扩展语言, html 文件中引用的是写好的 Sass 文件编译生成 css 文件.

源码如下:

.count-down {
  width: 100%;
  .row {
    padding: 0 145px;
  }
  .col-lg-3 {
    padding: 0;
    position: relative;
    .colck {
      width: 144px;
      height: 144px;
      background-color: #fff;
      margin: 0 auto;
    }
  }
  .days, .hours, .minutes {
    &:after, &:before {
      content: "";
      display: block;
      width: 12px;
      height: 12px;
      background-color: #fff;
      position: absolute;
      right: -6px;
    }
    &:after {
      bottom: 45px;
    }
    &:before {
      top: 45px;
    }
  }
}

控制圆环的运动主要靠 JavaScript 代码, 这里 sass 的作用是用来把把元素的位置排列好, 把两个圆环中间的点画出来,

因为背景色是黑色的 为了看的更加直观, 我先把包裹 canvas 的元素背景色设为白色,

此时的效果: 

3. JavaScript部分

最终的运动效果靠 js 代码来实现:

  • 我们先来获取到这4个 canvas 元素
// 获取4个 canvas 元素
var days_canvas = document.getElementById('days');
var hours_canvas = document.getElementById('hours');
var minutes_canvas = document.getElementById('minutes');
var seconds_canvas = document.getElementById('seconds');
  • 为了可以自定义指定倒计时结束时间, 写一个设置结束时间的函数, 返回值为一个 Date 对象.
// 设置倒计时时间:年 月 日 小时 分钟 秒 毫秒
endTime = setEndTime(2020, 11, 30, 15, 0, 0);

// 设置到期时间
function setEndTime(year, month, day, hour, minute, millisecond) {
return new Date(year, month - 1, day, hour, minute, millisecond);
}

js 中创建 Date 对象的5种方式 new Date("month dd,yyyy hh:mm:ss"); new Date("month dd,yyyy"); new Date(yyyy,mth,dd,hh,mm,ss); new Date(yyyy,mth,dd); new Date(ms);

注意: Date 对象中的月份取值是 0 - 11, 0 就表示 1 月, 用变量 endTime 保存这个设置好的 Date 对象

  • 根据现在的时间和设置好的到期时间计算现在到到期时间还有多少秒,多少分钟, 多少小时, 多少天.
// 计算距离到期时间还剩下多少 days, hours, minutes
 function getLeftTimeObj() {
   var date = new Date();
   var millisecond = date.getTime()
   var end_millisecond = endTime.getTime();

   if (end_millisecond < millisecond) {
     return {
       days: 0,
       hours: 0,
       minutes: 0,
       seconds: 0
     }
   }
   // 距离结束时间的秒数
   var left_seconds = (( end_millisecond - millisecond ) / 1000);
   var seconds = (left_seconds % 60);
   var left_minutes = (left_seconds - seconds) / 60;
   var minutes = (left_minutes % 60);
   var left_hours = (left_minutes - minutes) / 60;
   var hours = (left_hours % 24);
   var left_days = ((left_hours - hours) / 24);

   return {
     days: left_days,
     hours: hours,
     minutes: minutes,
     seconds: seconds
   }
 }
 var dateObj = getLeftTimeObj();

思路:

  • Date 对象中有一个方法 getTime(), 返回值是从 1970 年 1 月 1 日至今的毫秒数。
  • 用两个 Date 对象的 getTime() 返回值相减值再 ÷ 1000 获得两者相差的秒数
  • 用两者相差的秒数换算出两者相差多少天,多少小时,多少分钟,多少秒
  • 最后返回一个对象 { days: 还有多少天, hours: 还有多少个小时, minutes: 还有多少分钟, secondsL: 还有多少秒 }

我们定义一个变量 dateObj 保存这个对象, 然后根据这个对象去在相应的 canvas 元素上画图

  • 绘图

我们先不考虑怎么让圆环动起来, 而是先考虑怎么把图画出来

观察单个图形的样子如下图所示:

可以把这个图形分成4个部分:

  • 灰色的整个圆环
  • 红黄渐变的不完整圆环
  • 中间的数字 54
  • 下面的字符串 Seconds

我们可以为写四个方法分别完成每一个步骤:

 // 画整个圆
function drawCricle(canvas) {
  // 获取 context 对象
  var context = canvas.getContext('2d');
  // 获取 canvas 的中心点的 x 坐标
  var centerX = canvas.width / 2;
  // 获取 canvas 的中心点的 y 坐标
  var centerY = canvas.height / 2;
  context.save();
  context.beginPath();
  context.lineWidth = 7;
  context.strokeStyle = "#636363";
  // 圆环的宽度为 7, canvas 元素的长和宽是 144, 所以圆半径应为 (144 - 7) / 2, 也就是 canvas.width / 2 - 3.5
  context.arc(centerX, centerY, canvas.width / 2 - 3.5 , 0, Math.PI*2, false);
  context.stroke();
  context.closePath();
  context.restore();
}

// 画数字下的字符
function drawStr(canvas, str) {
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;

  context.save();
  context.fillStyle = '#fff';
  context.font = "14px Arial"; //设置字体大小和字体
  context.textAlign = 'center';
  context.fillText(str, centerX, centerY+54);
  context.restore();
}

// 画数字
function drawNumber(canvas, num) {
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  num = num.toFixed();
  num = num < 10 ? '0' + num : num;

  context.save();
  context.fillStyle = '#fff';
  context.font = "bolder 60px Arial"; //设置字体大小和字体
  context.textAlign = 'center';
  // context.fontWeight = 'bold';
  context.fillText(num, centerX, centerY+10);
  context.restore();
}
// 画进度条 -0.5为起点
// percentage 为进度条的百分比(0<percentage<1), 1 表示整个圆
function drawProgress(canvas, percentage) {
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;

  var end_cricle = (percentage * 2) - 0.5;
  end_cricle = Number(end_cricle.toFixed(4))

  // 设置垂直渐变
  var linearGrad = context.createLinearGradient(canvas.width / 2, 0, canvas.width / 2, canvas.height);
  linearGrad.addColorStop(0, '#ff0503');
  linearGrad.addColorStop(1, '#ff8200');

  context.save();
  context.strokeStyle = linearGrad; //设置描边样式
  context.lineWidth = 7; //设置线宽
  context.beginPath(); //路径开始
  context.arc(centerX, centerY, canvas.width / 2 -3.5 , -0.5 * Math.PI, end_cricle * Math.PI, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
  context.stroke(); //绘制
  context.closePath(); //路径结束
  context.restore();
}
// 为秒计数的 canvas 绘图, 画图依赖 dateObj.seconds
drawCricle(seconds_canvas);
drawStr(seconds_canvas, 'Seconds');
// 每一分钟有60秒, 用 dateObj.seconds / 60 获得 当前进度
drawProgress(seconds_canvas, (dateObj.seconds / 60).toFixed(4));
drawNumber(seconds_canvas, dateObj.seconds);

写一个绘制 4 个 canvas 的方法 draw(); 然后执行

// 绘图
function draw() {
  drawCricle(days_canvas);
  drawStr(days_canvas, 'Days');
  drawProgress(days_canvas, dateObj.days / 10);
  drawNumber(days_canvas, dateObj.days);

  drawCricle(hours_canvas);
  drawStr(hours_canvas, 'Hours');
  drawProgress(hours_canvas, (dateObj.hours / 24).toFixed(4));
  drawNumber(hours_canvas, dateObj.hours);

  drawCricle(minutes_canvas);
  drawStr(minutes_canvas, 'Minutes');
  drawProgress(minutes_canvas, (dateObj.minutes / 60).toFixed(4));
  drawNumber(minutes_canvas, dateObj.minutes);

  drawCricle(seconds_canvas);
  drawStr(seconds_canvas, 'Seconds');
  drawProgress(seconds_canvas, (dateObj.seconds / 60).toFixed(4));
  drawNumber(seconds_canvas, dateObj.seconds);
}

drwa();

然后先记得把之前设置的白色背景色去掉

执行了 draw() 之后效果如下图: 

但是现在还没有实现让他动起来,

  • 让倒计时动起来

先明白动起来的逻辑:

  • 用定时器每过 16ms 清除一次所有 canvas 画的图像
  • 重新获取所剩下的时间的对象 dateObj
  • 再次绘图 draw();
// 清除 canvas 内容
function clear() {
  var days_ctx = days_canvas.getContext('2d');
  var hours_ctx = hours_canvas.getContext('2d');
  var minutes_ctx = minutes_canvas.getContext('2d');
  var seconds_ctx = seconds_canvas.getContext('2d');

  days_ctx.clearRect(0, 0, days_canvas.width, days_canvas.height);
  hours_ctx.clearRect(0, 0, hours_canvas.width, hours_canvas.height);
  minutes_ctx.clearRect(0, 0, minutes_canvas.width, minutes_canvas.height);
  seconds_ctx.clearRect(0, 0, seconds_canvas.width, seconds_canvas.height);
}
// 让倒计时动起来
// 可以直接用定时器
setInterval(function() {
  clear();
  dateObj = getLeftTimeObj();
  draw();
}, 16)

// 也可以考虑使用 requestAnimationFrame 这个方法
(function count() {
  requestAnimationFrame(count);
  clear();
  dateObj = getLeftTimeObj();
  draw();
})();

到现在为止整个完整的功能全部实现了。

5、全部源码

1.index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.min.css" rel="external nofollow" >
  <link rel="stylesheet" href="./style.css" rel="external nofollow" >
  <style>
    .count-down {
      background: #000;
    }
  </style>
</head>
<body>
  <div class="count-down">
    <div class="container">
      <div class="row">
        <div class="days col-lg-3 col-md-3 col-sm-3 col-xs-6">
          <div class="colck">
            <canvas id="days" width="144" height="144"></canvas>
          </div>
        </div>
        <div class="hours col-lg-3 col-md-3 col-sm-3 col-xs-6">
          <div class="colck">
            <canvas id="hours" width="144" height="144"></canvas>
          </div>
        </div>
        <div class="minutes col-lg-3 col-md-3 col-sm-3 col-xs-6">
          <div class="colck">
            <canvas id="minutes" width="144" height="144"></canvas>
          </div>
        </div>
        <div class="seconds col-lg-3 col-md-3 col-sm-3 col-xs-6">
          <div class="colck">
            <canvas id="seconds" width="144" height="144"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="./index.js"></script>
</body>
</html>

2. style.scss

.count-down {
  position: absolute;
  bottom: 90px;
  left: 0;
  width: 100%;
  .row {
    padding: 0 145px;
  }
  .col-lg-3 {
    padding: 0;
    position: relative;
    .colck {
      width: 144px;
      height: 144px;
      // background-color: #fff;
      margin: 0 auto;
    }
  }
  .days, .hours, .minutes {
    &:after, &:before {
      content: "";
      display: block;
      width: 12px;
      height: 12px;
      background-color: #fff;
      position: absolute;
      right: -6px;
    }
    &:after {
      bottom: 45px;
    }
    &:before {
      top: 45px;
    }
  }
}

3. index.js

// 倒计时
// 到期时间
// 设置倒计时时间:年 月 日 小时 分钟 秒 毫秒
endTime = setEndTime(2020, 11, 30, 15, 0, 0);

// 设置到期时间
function setEndTime(year, month, day, hour, minute, millisecond) {
  return new Date(year, month - 1, day, hour, minute, millisecond);
}

// 获取4个 canvas 元素
var days_canvas = document.getElementById('days');
var hours_canvas = document.getElementById('hours');
var minutes_canvas = document.getElementById('minutes');
var seconds_canvas = document.getElementById('seconds');

// 计算距离到期时间还剩下多少 days, hours, minutes
function getLeftTimeObj() {
  var date = new Date();
  var millisecond = date.getTime()
  var end_millisecond = endTime.getTime();

  if (end_millisecond < millisecond) {
    return {
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0
    }
  }

  // 距离结束时间的秒数
  var left_seconds = (( end_millisecond - millisecond ) / 1000);

  var seconds = (left_seconds % 60);
  var left_minutes = (left_seconds - seconds) / 60;
  var minutes = (left_minutes % 60);
  var left_hours = (left_minutes - minutes) / 60;
  var hours = (left_hours % 24);
  var left_days = ((left_hours - hours) / 24);

  return {
    days: left_days,
    hours: hours,
    minutes: minutes,
    seconds: seconds
  }
}

var dateObj = getLeftTimeObj();

// 画整个圆
function drawCricle(canvas) {
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;

  context.save();
  context.beginPath();
  context.lineWidth = 7;
  context.strokeStyle = "#636363";
  context.arc(centerX, centerY, canvas.width / 2 - 3.5 , 0, Math.PI*2, false);
  context.stroke();
  context.closePath();
  context.restore();
}

// 画数字下的字符
function drawStr(canvas, str) {
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;

  context.save();
  context.fillStyle = '#fff';
  context.font = "14px Arial"; //设置字体大小和字体
  context.textAlign = 'center';
  context.fillText(str, centerX, centerY+54);
  context.restore();
}

// 画数字
function drawNumber(canvas, num) {
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  num = num.toFixed();
  num = num < 10 ? '0' + num : num;

  context.save();
  context.fillStyle = '#fff';
  context.font = "bolder 60px Arial"; //设置字体大小和字体
  context.textAlign = 'center';
  // context.fontWeight = 'bold';
  context.fillText(num, centerX, centerY+10);
  context.restore();
}

// 画进度条 -0.5为起点
// percentage 为进度条的百分比(0<percentage<1), 1 表示整个圆
function drawProgress(canvas, percentage) {
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;

  var end_cricle = (percentage * 2) - 0.5;
  end_cricle = Number(end_cricle.toFixed(4))

  // 设置垂直渐变
  var linearGrad = context.createLinearGradient(canvas.width / 2, 0, canvas.width / 2, canvas.height);
  linearGrad.addColorStop(0, '#ff0503');
  linearGrad.addColorStop(1, '#ff8200');

  context.save();
  context.strokeStyle = linearGrad; //设置描边样式
  context.lineWidth = 7; //设置线宽
  context.beginPath(); //路径开始
  context.arc(centerX, centerY, canvas.width / 2 -3.5 , -0.5 * Math.PI, end_cricle * Math.PI, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
  context.stroke(); //绘制
  context.closePath(); //路径结束
  context.restore();
}

// 清除 canvas 内容
function clear() {
  var days_ctx = days_canvas.getContext('2d');
  var hours_ctx = hours_canvas.getContext('2d');
  var minutes_ctx = minutes_canvas.getContext('2d');
  var seconds_ctx = seconds_canvas.getContext('2d');

  days_ctx.clearRect(0, 0, days_canvas.width, days_canvas.height);
  hours_ctx.clearRect(0, 0, hours_canvas.width, hours_canvas.height);
  minutes_ctx.clearRect(0, 0, minutes_canvas.width, minutes_canvas.height);
  seconds_ctx.clearRect(0, 0, seconds_canvas.width, seconds_canvas.height);
}

// 绘图
function draw() {
  drawCricle(days_canvas);
  drawCricle(hours_canvas);
  drawCricle(minutes_canvas);
  drawCricle(seconds_canvas);
  drawStr(days_canvas, 'Days');
  drawStr(hours_canvas, 'Hours');
  drawStr(minutes_canvas, 'Minutes');
  drawStr(seconds_canvas, 'Seconds');

  drawProgress(days_canvas, dateObj.days / 10 >= 1 ? 1 : dateObj.days / 10);
  drawNumber(days_canvas, dateObj.days);
  drawProgress(hours_canvas, (dateObj.hours / 24).toFixed(4));
  drawNumber(hours_canvas, dateObj.hours);
  drawProgress(minutes_canvas, (dateObj.minutes / 60).toFixed(4));
  drawNumber(minutes_canvas, dateObj.minutes);
  drawProgress(seconds_canvas, (dateObj.seconds / 60).toFixed(4));
  drawNumber(seconds_canvas, dateObj.seconds);
}

draw();

(function count() {
  requestAnimationFrame(count);
  clear();
  dateObj = getLeftTimeObj();
  draw();
})();

到此这篇关于JavaScript中的canvas 实现一个圆环渐变倒计时效果的文章就介绍到这了,更多相关JavaScript canvas 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-09-11

JS实现羊了个羊小游戏实例

目录 引言 rem布局方案 popbox.js使用原理 html代码 样式代码 javascript代码 导入图片素材列表 startHandler函数实现 randomList 工具方法 clickHandler函数内部 createShadow方法 startHandler后续的逻辑 引言 这两天火爆全场的<羊了个羊>游戏,相信大家都玩过了,那么在玩这个游戏的同时,我想大家都会好奇这个游戏的实现,本文就带大家使用css,html,js来实现一个动物版的游戏. 首先我用到了2个插件,第一个插

js&nbsp;实现验证码输入框示例详解

目录 前言 思路 遇到的问题 HTML CSS JS 前言 验证码输入框应该是很常见的需求吧,不知道各位小伙伴在在遇到的时候是选择找一找插件还是自己动手撸一个呢?我花了点时间撸了一个出来,实际体验还不错,分享给大家. 思路 我在实现之前肯定也是上网搜了一下的,网上的方式大多是使用多个input标签来实现,但我觉得不太优雅,就自己想了一个方法.使用了6个div标签和一个input标签.验证码长度一般是4位或6位,我这里用6位做演示. 先将6个div使用flex布局平铺. 再将input使用绝对定位

JavaScript中async与await实现原理与细节

目录 一.回调地狱 二.Promise 三.生成器(generator) 四.使用生成器同步化promise 五.async.await异步代码究极解决方案 一.回调地狱 在es6兴起之后许多人都开始使用promise,promise目的是解决es5中的回调地狱(callback hell),那么什么是回调地狱呢?先来提一个需求,现在需要发送n个request请求,第二个请求参数需要第一个请求的结果,第三个请求的参数需要第二个请求的结果,以此类推... ,在没有promise的条件下,我们不难使

js基于div丝滑实现贝塞尔曲线

目录 引言 分析 实现 布局 如何计算y的偏移量 Math.sin() 和 Math.cos() 正弦曲线 余弦曲线 计算更多信息 完善剩余 完成跑马灯制作 贝塞尔曲线 简单封装一下方法 完整示例 style SCript 引言 今天遇到朋友发来的一个ui图,询问我如何实现下图这样的效果[vue项目],(听说是类似LED灯的展示效果),于是便有了今天的小demo,要实现一个类似下图的动效,上面的灯会一直重复滚动,但是这个并不是什么难点,主要在于如何实现这种平滑的曲线,日常我们的开发的div在我们

JavaScript Canvas实现噪点滤镜回忆童年电视雪花屏

目录 引言 正文 初始化渲染 雪花屏动画 帧动画播放 引言 相信很多人80,90后的同学对童年里电视机的突然出现刺啦刺啦的雪花屏记忆犹新,本期将用 pixi.js 来完成一个电视机播放动漫然后突然出现雪花屏的动画,里面主要讲解了如何使用pixi.js播放帧动画和如何用噪点滤镜制造雪花屏. 正文 初始化渲染 import * as PIXI from "pixi.js" const GAME_WIDTH = 800; const GAME_HEIGHT = 600; export def

js&nbsp;实现Material&nbsp;UI点击涟漪效果示例

目录 正文 HTML CSS JS 实现效果 正文 我个人而言还是挺喜欢Material UI这套设计风格的.一些细节方面做的还不错.就比如今天要给大家分享的点击涟漪效果.Material UI里面叫做Ripples.好了,话不多说,开始吧. HTML <div class="example">Click me</div> CSS .example { position: relative; width: 300px; height: 300px; line-h

JS简单封装的图片无缝滚动效果示例【测试可用】

本文实例讲述了JS简单封装的图片无缝滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="

JS实现物体带缓冲的间歇运动效果示例

本文实例讲述了JS实现物体带缓冲的间歇运动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <titl

JS实现的DIV块来回滚动效果示例

本文实例讲述了JS实现的DIV块来回滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="t

JS实现的邮箱提示补全效果示例

本文实例讲述了JS实现的邮箱提示补全效果.分享给大家供大家参考,具体如下: 现在要实现的是类似网易登录时的邮箱提示框的效果,不过这里我打算稍微改变一下,就是在输入@的时候再出现邮箱提示列表 实现提示的原理是采用正则进行匹配 效果图如下: 代码如下: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>邮箱补全提示</title> <sty

原生JS实现多个小球碰撞反弹效果示例

本文实例讲述了原生JS实现多个小球碰撞反弹效果.分享给大家供大家参考,具体如下: 实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y值增加,以上的思路可以实现小球的碰壁反弹 小球与小球之间的碰撞,要判断小球在被撞小球的哪个方向,从而判断小球该向哪个方向移动,同样的改变小球的坐标值,来实现小球的反弹 实现代码: <!doctype html> &l

JS实现的简单折叠展开动画效果示例

本文实例讲述了JS实现的简单折叠展开动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE = html> <html> <head> <title>www.jb51.net JS折叠展开动画</title> <style> body{ margin: 0px; padding: 0px; } .red{ background-color:red; width:200px; height:200px; position:rel

JS实现的新闻列表自动滚动效果示例

本文实例讲述了JS实现的新闻列表自动滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #box{width:260px;height:100px;margi

JS实现的小火箭发射动画效果示例

本文实例讲述了JS实现的小火箭发射动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小火箭发射</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .big

js实现移动端导航点击自动滑动效果

本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码,供大家参考,具体内容如下 移动端模拟导航可点击自动滑动 0.1.4. 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js]. 废话不多说直接上代码: /* * 移动端模拟导航可点击自动滑动 0.1.4 * Date: 2017-01-11 * by: xiewei * 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js] */ (function ($) { $.

JS实现的缓冲运动效果示例

本文实例讲述了JS实现的缓冲运动效果.分享给大家供大家参考,具体如下: 缓冲需要用到数值取整,向上取整:Math.ceil()  向下取整Math.floor() 移动的速度慢慢减慢的效果,移动速度=(终点位置 - 当前位置) / 一个数 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d