某次偶然在一本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=utf-8" />
<title>无标题文档</title>
<script language="javascript">
var st="HelloTheWorld";
var lon = st.length;
function change(){
var htm="";
for(var i=1;i<=lon;i++){
var char=st.substr(i-1,1);
var lef=450+120*Math.cos(i/lon*2*3.14);
var tp=300+60*Math.sin(i/lon*2*3.14);
var mount=30*Math.abs(Math.sin(i/lon*2*3.14));
htm+="<div id=" + i+" style='position:absolute;left:"+lef+"px;top:"+tp+"px;font-size:"+mount+"pt'>"+char+ "</div>";
}
return htm;
}
function display(){
st=st.substr(1,lon-1)+st.substr(0,1);
document.getElementById("dv").innerHTML=change();
}
setInterval("display();",1000);
</script>
<style type="text/css">
<!--
#dv {
height: 400px;
width: 600px;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
border: 1px solid #FF0000;
font-weight: bold;
color: #000000;
}
-->
</style>
</head>
<body>
<div id="dv"></div>
</body>
</html>