国产亚洲欧美在线观看三区,99亚洲精品自拍av成人软件,亚洲精品成人网久久久久久

首頁 > 博客列表 > JS--蛇形文字特效

博主信息

博文 250

粉絲 3

評(píng)論 0

訪問量 381093

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

實(shí)例

<!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 = '這幾個(gè)字動(dòng)起來啊';
		//通過循環(huán)將字符串變?yōu)镠tml標(biāo)簽
		for(var i= 0;i<msg.length;i++){
			document.write('<span id="snake'+i+'" class="snake">')
			document.write(msg[i]);
			document.write('</span>')
		}
		//自定義一個(gè)函數(shù)
		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(){
				//如果超出數(shù)字則清零
				if(i>=msg.length-1){
					clearInterval(timmer);
				}
				//調(diào)取函數(shù)，把x軸y軸和i的數(shù)字都調(diào)取進(jìn)去
				snake(e.clientX,e.clientY,i);
				i++;
			},50)
		}
</script>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例