js特效实现半圆形特效动画

js特效实现半圆特效动画
js特效实现半圆形特效动画

这图片是手机path软件的特效，点击左下角的圆圈，出现4分之1圆的的6个应用。
如何用js实现这样的特效。请大神指教。
------解决思路----------------------
这个关键是看CSS中的定位 position
理解这个后就是按下按钮时计算好位置，修改element坐标就可以了。
------解决思路----------------------
给你画了个圆，你改下就OK，倒腾这些三角函数真实废脑细胞

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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

	.centerpoint{width:20px; height:20px; position:absolute;  background-color:#333366}

	.point{width:20px; height:20px; position:absolute;  background-color:#00CC66}

</style>

<script type="text/javascript">	

	var radius = 100;

	function f1() {

		for(var i = 0; i < 12; i++){

			var point = document.createElement("div");

			point.className = "point";

			point.style.left = radius - radius * Math.cos(30 * i * Math.PI / 180) - 2 + "px";

			point.style.top = radius * Math.sin(30 * i * Math.PI / 180) - 2 + 100 + "px";

			document.body.appendChild(point);

		}

	}

</script>

</head>

<body>

	<div class="centerpoint" style="left:95px; top:100px" onclick="f1()"></div>

</body>

</html>

------解决思路----------------------

引用:

Quote: 引用:

这个关键是看CSS中的定位 position
理解这个后就是按下按钮时计算好位置，修改element坐标就可以了。

它有淡入，淡出，显示的各种效果效果，这些如何实现呢？

看看jQuery的动画函数
------解决思路----------------------

引用:

Quote: 引用:

这个关键是看CSS中的定位 position
理解这个后就是按下按钮时计算好位置，修改element坐标就可以了。

它有淡入，淡出，显示的各种效果效果，这些如何实现呢？

都有现成的效果函数，直接用jquery

js特效实现 半圆形特效动画

相关推荐

js特效实现半圆形特效动画