3-2 折翼的天使

折翼的天使

折翼的天使

任务

老师视频里的不同布局写法，不是习题！！不是习题！！！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>折翼的天使</title>
<style>
input[type=button] {
    height: 32px;
    font-size: 100%;    
}
</style>
</head>

<body>
<img src="http://img.mukewang.com/54447b06000171a002560191.jpg">
<img src="http://img.mukewang.com/54447f4a0001eb7d01910256.jpg">
<img src="http://img.mukewang.com/54447f550001ccb002560191.jpg">
<p><input type="button" id="button" value="点击第2张图片应用position:absolute变天使"></p>
<script>
var button = document.getElementById("button"),
    image2 = document.getElementsByTagName("img")[1];
if (button && image2) {
    var value_init = button.value;
    button.onclick = function() {
        if (this.value == value_init) {
            image2.style.position = "absolute";
            this.value = "撤销";
        } else {
            image2.style.position = "";
            this.value = value_init;
        }
    };
}
</script>
</body>
</html>

 

posted @ 2017-11-22 08:45  罪恩徒斯  阅读(86)  评论(0)    收藏  举报