<!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>
一个简单的旋转文字效果
最新推荐文章于 2024-09-30 15:23:15 发布