折翼天使表現(xiàn)特性二:位置跟隨
任務(wù)
老師視頻里的不同布局寫(xiě)法,不是習(xí)題!!不是習(xí)題!?。?/p>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>折翼天使表現(xiàn)特性二:位置跟隨</title>
<style>
input[type=button] {
height: 32px;
font-size: 100%;
}
p { margin-left: 260px; }
img + p { margin-top: 60px; }
</style>
</head>
<body>
<img src="http://img1.sycdn.imooc.com//54447b06000171a002560191.jpg">
<div><img src="http://img1.sycdn.imooc.com//54447f4a0001eb7d01910256.jpg"></div>
<img src="http://img1.sycdn.imooc.com//54447f550001ccb002560191.jpg">
<p><input type="button" id="block" value="點(diǎn)擊第2張圖片應(yīng)用display:block"></p>
<p><input type="button" id="button" value="點(diǎn)擊第2張圖片應(yīng)用position:absolute變天使"></p>
<script>
var block = document.getElementById("block"),
button = document.getElementById("button"),
image2 = document.getElementsByTagName("img")[1];
if (block && button && image2) {
var value_init_button = button.value;
button.onclick = function() {
if (this.value == value_init_button) {
image2.style.position = "absolute";
this.value = "撤銷(xiāo)";
} else {
image2.style.position = "";
this.value = value_init_button;
}
};
var value_init_block = block.value;
block.onclick = function() {
if (this.value == value_init_block) {
image2.style.display = "block";
this.value = "撤銷(xiāo)";
} else {
image2.style.display = "";
this.value = value_init_block;
}
};
}
</script>
</body>
</html>
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求