一个简单的旋转文字效果

于 2012-05-20 08:19:14 发布 · 163 阅读

文章标签：

#javascript #ViewUI

javascript 专栏收录该内容

13 篇文章

订阅专栏


<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
<div id="msg"></div>
<script type="text/javascript">
var word = '这是一个不好说的故事，但还是要说';
var wordArr = word.split("");
var locateWord = function(x,y,r,i){
  var length = wordArr.length;
  var html = "";
  var everyAngle = 1;
  var allLength = Math.PI / everyAngle;
  for(var j = 0;j < length;j ++){
    var angle = 2 * Math.PI / length * j + (i % allLength * everyAngle);
    var left = x + r * Math.cos(angle);
    var top = y + r * Math.sin(angle);
    html += ("<div style='position:absolute;left:" + left + "px;top:" + top + "px;'>" + wordArr[j] + "</div>");
  }
  document.getElementById("msg").innerHTML = html;
}
var i = 0;
var x,y;
window.onmousemove = function(event){
  x = event.clientX;
  y = event.clientY;
}
function s(){
  locateWord(x,y,200,i += (Math.PI / 360));
}
setInterval(s, 20);
</script>	
</body>
</html>