Skip to content

Commit dedd5a9

Browse files
responsibleboyresponsibleboy
committed
18-用动态效果来响应浏览�
1 parent a4be24e commit dedd5a9

14 files changed

Lines changed: 9983 additions & 0 deletions

‎JavaScript/18-用动态效果来响应浏览者/图片预览.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5+
<title>图片预览</title>
6+
<script src="../Scripts/jquery-1.8.2.js"></script>
7+
<style type="text/css">
8+
body {
9+
margin: 0;
10+
padding: 40px;
11+
background: #fff;
12+
font: 80% Arial, Helvetica, sans-serif;
13+
color: #555;
14+
line-height: 180%;
15+
}
16+
ul,li{
17+
margin:0;
18+
padding:0;
19+
}
20+
li{
21+
list-style:none;
22+
float:left;
23+
display:inline;
24+
margin-right:10px;
25+
border:1px solid #AAAAAA;
26+
}
27+
img{
28+
border:none;
29+
}
30+
#tooltip {
31+
position: absolute;
32+
border: 1px solid #ccc;
33+
background: #333;
34+
padding: 2px;
35+
display: none;
36+
color: #fff;
37+
}
38+
</style>
39+
40+
<script type="text/javascript">
41+
$(function () {
42+
var x = 10;
43+
var y = 20;
44+
$("a.tooltip").mouseover(function (e) {
45+
this.myTitle = this.title;
46+
this.title = "";
47+
var imgTitle = this.myTitle ? "<br />" + this.myTitle : "";
48+
var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='预览图' />" + imgTitle + "</div>";
49+
$("body").append(tooltip);
50+
$("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");
51+
}).mouseout(function () {
52+
this.title = this.myTitle;
53+
$("#tooltip").remove();
54+
}).mousemove(function (e) {
55+
$("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });
56+
})
57+
});
58+
</script>
59+
</head>
60+
<body>
61+
<ul>
62+
<li><a href="../images/18/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod">
63+
<img src="../images/18/apple_1.jpg" alt="苹果 iPod" />
64+
</a>
65+
</li>
66+
<li>
67+
<a href="../images/18/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano">
68+
<img src="../images/18/apple_2.jpg" alt="苹果 iPod nano" />
69+
</a>
70+
</li>
71+
<li>
72+
<a href="../images/18/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone">
73+
<img src="../images/18/apple_3.jpg" alt="苹果 iPhone" />
74+
</a>
75+
</li>
76+
<li>
77+
<a href="../images/18/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac">
78+
<img src="../images/18/apple_4.jpg" alt="苹果 Mac" />
79+
</a>
80+
</li>
81+
</ul>
82+
83+
</body>
84+
</html>

‎JavaScript/18-用动态效果来响应浏览者/文本域高度的变化.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5+
<title>文本域高度的变化</title>
6+
<script src="../Scripts/jquery-1.8.2.js"></script>
7+
<script type="text/javascript">
8+
$(function () {
9+
var $comment = $("#comment");
10+
$(".bigger").click(function () {
11+
if (!$comment.is(":animated")) { //是否处于动画状态
12+
if ($comment.height() < 500) {
13+
$comment.animate({ height: "+=50" }, 400);
14+
}
15+
}
16+
});
17+
$(".smaller").click(function () {
18+
if (!$comment.is(":animated")) { //是否处于动画状态
19+
if ($comment.height() > 200) {
20+
$comment.animate({ height: "-=50" }, 400);
21+
}
22+
}
23+
});
24+
});
25+
</script>
26+
</head>
27+
<body>
28+
<form>
29+
<div class="msg">
30+
<div class="msg_caption">
31+
<span class="bigger">增加高度(+)</span>
32+
<span class="smaller">减小高度(+)</span>
33+
</div>
34+
<textarea id="comment" rows="8" cols="25" style="width:650px">
35+
在线文本编辑器，在线文本编辑器，在线文本编辑器，在线文本编辑器。
36+
在线文本编辑器，在线文本编辑器，在线文本编辑器，在线文本编辑器。
37+
在线文本编辑器，在线文本编辑器，在线文本编辑器，在线文本编辑器。
38+
在线文本编辑器，在线文本编辑器，在线文本编辑器，在线文本编辑器。
39+
</textarea>
40+
</div>
41+
</form>
42+
</body>
43+
</html>

‎JavaScript/18-用动态效果来响应浏览者/高级选择器.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5+
<title>高级选择器</title>
6+
<script src="../Scripts/jquery-1.8.2.js"></script>
7+
</head>
8+
<body>
9+
<p>p1</p>
10+
<p>p2</p>
11+
<p>p3</p>
12+
<p>p4</p>
13+
<div id="box">
14+
<p>p5</p>
15+
<p>p6</p>
16+
<p>p7</p>
17+
<p>p8</p>
18+
</div>
19+
<p>p9</p>
20+
<p>10</p>
21+
<div id="box2">
22+
<p>p15</p>
23+
<p>p16</p>
24+
<p>p17</p>
25+
<p>p18</p>
26+
</div>
27+
<p>p19</p>
28+
29+
<input type="button" id="btnChild" value="子选择器" />&nbsp;&nbsp;&nbsp;&nbsp;
30+
<input type="button" id="btnNext" value="next选择器" />&nbsp;&nbsp;&nbsp;&nbsp;
31+
<input type="button" id="btnNextAll" value="nextAll选择器" />&nbsp;&nbsp;&nbsp;&nbsp;
32+
33+
<script type="text/javascript">
34+
$("#btnChild").click(function () {
35+
$("#box>p").css("color", "red");
36+
});
37+
38+
$("#btnNext").click(function () {
39+
$("#box+p").css("color", "red");
40+
});
41+
42+
$("#btnNextAll").click(function () {
43+
$("#box~p").css("color", "red");
44+
});
45+
</script>
46+
</body>
47+
</html>

‎JavaScript/JavaScript.csproj‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,9 @@
6767
<Content Include="05-瀑布流布局\简单固定列宽瀑布流.html" />
6868
<Content Include="05-瀑布流布局\非固定列宽瀑布流.html" />
6969
<Content Include="06-目录树视图\目录树视图.html" />
70+
<Content Include="18-用动态效果来响应浏览者\图片预览.html" />
71+
<Content Include="18-用动态效果来响应浏览者\文本域高度的变化.html" />
72+
<Content Include="18-用动态效果来响应浏览者\高级选择器.html" />
7073
<Content Include="images\03\CSS-Hack.jpg" />
7174
<Content Include="images\03\icon_next.jpg" />
7275
<Content Include="images\03\icon_next2.jpg" />
@@ -154,6 +157,14 @@
154157
<Content Include="images\06\plusbottom.gif" />
155158
<Content Include="images\06\question.gif" />
156159
<Content Include="images\06\trash.gif" />
160+
<Content Include="images\18\apple_1.jpg" />
161+
<Content Include="images\18\apple_1_bigger.jpg" />
162+
<Content Include="images\18\apple_2.jpg" />
163+
<Content Include="images\18\apple_2_bigger.jpg" />
164+
<Content Include="images\18\apple_3.jpg" />
165+
<Content Include="images\18\apple_3_bigger.jpg" />
166+
<Content Include="images\18\apple_4.jpg" />
167+
<Content Include="images\18\apple_4_bigger.jpg" />
157168
<Content Include="JavaScript_jQuery\select.html" />
158169
<Content Include="JavaScript_jQuery\show_hide.html" />
159170
<Content Include="JavaScript_jQuery\this.html" />
@@ -168,6 +179,8 @@
168179
<Content Include="Scripts\guid.js" />
169180
<Content Include="Scripts\jqery.input.emptyText.js" />
170181
<None Include="Scripts\jquery-1.8.2.intellisense.js" />
182+
<Content Include="Scripts\jquery-1.10.2.js" />
183+
<Content Include="Scripts\jquery-1.10.2.min.js" />
171184
<Content Include="Scripts\jquery-1.8.2.js" />
172185
<Content Include="Scripts\jquery-1.8.2.min.js" />
173186
<Content Include="Scripts\jquery-easyui-1.3.2\changelog.txt" />
@@ -695,6 +708,7 @@
695708
<DependentUpon>Web.config</DependentUpon>
696709
</None>
697710
</ItemGroup>
711+
<ItemGroup />
698712
<PropertyGroup>
699713
<VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>
700714
<VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>

0 commit comments

Comments
 (0)