游客
标题:分享原生js仿win8等待提示圆圈进度条
正文:
一、序言
一直很中意win8等待提示圆圈进度条。win8刚出来那会，感觉好神奇!苦于当时没思路，没去研究。通过最近网上找找资料，终于给搞出来了！先上Demo,献丑了！预览请看：win8进度条。
二、简单介绍
原生javascript编写，需要理解js基于面向对象编程和圆形坐标计算！
实现原理：把每个圆点抽象成一个对象（ProgressBarWin8类型），将每个圆点对象存在数组中（progressArray），延迟执行每个圆点对象的run方法，至于圆点运行速度越来越快，是通过改变定时器延迟毫秒数实现的。预览效果：代码如下:
// 判断元素x与圆心x坐标大小，设置定时器延迟时间
if (this.position.left < this.fixed.left) {
this.delay += .5;
} else {
this.delay -= .5;
}
还是上源码吧！表达能力实在不怎么好（代码中注释更详细，会看得更明白）。代码如下:<!DOCTYPE html>
<html xmlns="1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>仿win8等待进度条</title>
<style>
body {
margin: 0;
padding: 0;
background: green
}
</style>
</head>
<body>
<script>
//********准备条件********
// 弧度角度转换公式：弧度=Math.PI*角度/180; js中Math.sin(),Math.cos()等函数，是根据弧度计算
// 圆x轴坐标计算公式:Math.cos(Math.PI
[<<][[1]][2][3][>>]
查看评论(0)
发表评论
首页