实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style type="text/css">
.snake{
position: absolute;
top: -100px;
}
</style>
<body>
<script type="text/javascript">
var msg = '这几个字动起来啊';
//通过循环将字符串变为Html标签
for(var i= 0;i<msg.length;i++){
document.write('<span id="snake'+i+'" class="snake">')
document.write(msg[i]);
document.write('</span>')
}
//自定义一个函数
function snake(x,y,i){
//拿到snake的值
var span = document.getElementById('snake'+i);
//使得这些文字获取到一定的间隔
span.style.left = x+20*i+20+'px';
//这些文字的高度等于y+'px';
span.style.top = y+'px';
}
window.onmousemove = function(e){
var e = e||event;
document.title = 'X:'+e.clientX+'Y:'+e.clientY;
var i = 0;
var timmer = setInterval(function(){
//如果超出数字则清零
if(i>=msg.length-1){
clearInterval(timmer);
}
//调取函数，把x轴y轴和i的数字都调取进去
snake(e.clientX,e.clientY,i);
i++;
},50)
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
