使⽤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小时内删除。
发表评论