近來在網頁制作的過程中，有一種非常有趣且實用的代碼叫做“小人表白代碼”，這種代碼可以使得網頁中的小人，向頁面上的某個對象發起一次表白。
<html>
<head>
<title>小人表白</title>
<style>
.man {
background: url('man.png');
background-repeat: no-repeat;
background-size: 100%;
width: 100px;
height: 120px;
position: absolute;
}
</style>
</head>
<body>
<div id="man" class="man"></div>
<script type="text/javascript">
var man = document.getElementById('man'); //獲取小人
var btn = document.getElementById('btn'); //獲取按鈕
var txt = document.getElementById('text'); //獲取文本框
btn.onclick = function(){
man.style.top = txt.value;
man.style.left = '50%'; //設置小人位置
alert('我喜歡你，能做我女朋友嗎？'); //彈出提示框
}
</script>
<input type="text" id="text" /> //輸入被表白對象的位置
<input type="button" id="btn" value="我要表白" /> //觸發表白事件的按鈕
</body>
</html>通過代碼中的var man = document.getElementById('man')語句，我們可以獲取頁面上的小人；再配合一些JavaScript的代碼，實現小人的動態移動和表白事件的觸發，從而實現這個有趣的效果。
以上就是關于html小人表白代碼的介紹，如果您也感興趣，可以試試親手制作一個屬于自己的小人表白網頁。