使⽤jQuery⾼效制作⽹页特效——第三章课后作业1.超链接切换图⽚
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>切换图⽚</title>
6    <style>
7        p a{
8            text-decoration: none;
9        }
10    </style>
11</head>
12    <div>
13        <img id="picture" src="../javaScript操作DOM对象/1.gif">
14        <p>
15        <a href="" onmouseover="a(1)">1</a>
16        <a href="" onmouseover="a(2)">2</a>
17        <a href="" onmouseover="a(3)">3</a>
18        <a href="" onmouseover="a(4)">4</a>
19        <a href="" onmouseover="a(5)">5</a>
20        </p>
21    </div>
22<script>
23    function a(num) {
24        var img;
25        switch (num){
26            case 1:
27                img = "1.gif";
28                break;
29            case 2:
30                img = "2.gif";
31                break;
32            case 3:
33                img = "3.jpg";
34                break;
35            case 4:
36                img = "4.jpg";
37                break;
38            case 5:
39                img = "5.gif";
40                break;
41        }
42        var ne = ateElement("img");
43        var old = ElementById("picture");
44        ne.setAttribute("src","../javaScript操作DOM对象/"+img);
45        placeChild(ne,old);
46    }
47</script>
48</body>
49</html>
2.单击在上传⼀个⽂件，按钮就增减⼀⾏
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6</head>
7<body>
8    <div id="b">
9        <p>⽂件路径：
10        <input type="file" value="选择⽂件">
11        </p>
12    </div>
13    <input type="button" value="再上传⼀个⽂件" onclick="duplicate()">
14    <script>
15        function duplicate() {
16            var app = ElementById("b").firstChild
17            var copy = ElementSibling.cloneNode(true);
18            ElementById("b").appendChild(copy).Sibling
19        }
20    </script>
21</body>
22</html>
3.切换图书内容
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>图书切换</title>
6    <style>
7        #a{
8            font-size: 20px;
9            margin-right: 10px;
10        }
11        ul li{
12            list-style: none;
13            margin-left: -40px;
14        }
15        #total div:nth-of-type(2){
16            position: absolute;
17            left: 730px;
18            top: 35px;
19        }
20        #total div:nth-of-type(3){
21            position: absolute;
22            left: 802px;
23            top: 35px;
24        }
25        #total{
26            width:200px;
27            height: 250px;
28            margin: 0px auto;
29            border: 1px solid #ff7528;
30        }
31        #total div:nth-of-type(2) ul{
32            position: relative;
33            right: 62px;
34        }
35        #total div:nth-of-type(3) ul{
36            position: relative;
37            right: 134px;
38        }
38        }
39    </style>
40</head>
41<body>
42    <div id="total">
43        <span id="a">图书周排⾏榜</span><span id="b">TOP  100</span><br>
44        <div>jquery免费特效下载
45            <input type="button" value="⼩说" onmouseover="a()">
46                <ul id="wen" >
47                    <li>1.时间旅⾏者的妻⼦</li>
48                    <li>2.⼥⼼理师(下)</li>
49                    <li>3.⿁吹灯之惊觉古城</li>
50                    <li>4.⼥⼼理师(上)</li>
51                    <li>5.⼩时候</li>
52                    <li>6.追风的⼈</li>
53                    <li>7.盗墓笔记</li>
54                    <li>8.输赢</li>
55                </ul>
56        </div>
57        <div>
58            <input type="button" value="⾮⼩说" onmouseover="b()">
59                <ul id="wen1" >
60                    <li>1.⼈⽣若只如初见</li>
61                    <li>2.⾼效能⼈⼠的七个</li>
62                    <li>3.求医不如求⼰</li>
63                    <li>4.⼈体使⽤⼿册</li>
64                    <li>5.孩⼦，把你的⼿给我</li>
65                    <li>6.别笑！我是英⽂单词书</li>
66                    <li>7.⼈体经阁使⽤⼿册</li>
67                    <li>8.股市</li>
68                </ul>
69        </div>
70        <div>
71            <input type="button" value="少⼉" onmouseover="c()">
72                <ul id="wen2" >
73                    <li>1.⼈⽣若只如初见</li>
74                    <li>2.⾼效能⼈⼠的七个</li>
75                    <li>3.求医不如求⼰</li>
76                    <li>4.⼈体使⽤⼿册</li>
77                    <li>5.孩⼦，把你的⼿给我</li>
78                    <li>6.别笑！我是英⽂单词书</li>
79                    <li>7.⼈体经阁使⽤⼿册</li>
80                    <li>8.股市</li>
81                </ul>
82        </div>
83    </div>
84<script>
85    function a() {
86        ElementById("wen").style.display = "block"
87        ElementById("wen1").style.display = "none"
88        ElementById("wen2").style.display = "none"
89    }
90    function b() {
91        ElementById("wen1").style.display = "block"
92        ElementById("wen").style.display = "none"
93        ElementById("wen2").style.display = "none"
94    }
95    function c() {
96        ElementById("wen2").style.display = "block"
97        ElementById("wen").style.display = "none"
98        ElementById("wen1").style.display = "none"
99    }
100</script>
101</body>
102</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。