Skip to content

Commit c69139f

Browse files
coderpwh1024coderpwh1024
committed
update node project
1 parent 426b78f commit c69139f

File tree

3 files changed

+222
-21
lines changed

3 files changed

+222
-21
lines changed

‎jquery/.idea/workspace.xml

Lines changed: 40 additions & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jquery/ch3/3-13案例研究-超链接提示和图片提示效果/2-1-图片提示-第一步.html

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

‎jquery/ch3/3-13案例研究-超链接提示和图片提示效果/2-2-图片提示-第二步.html

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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+
<!-- 引入jQuery -->
7+
<script src="../../scripts/jquery.js" type="text/javascript"></script>
8+
<style type="text/css">
9+
body{
10+
margin:0;
11+
padding:40px;
12+
background:#fff;
13+
font:80% Arial, Helvetica, sans-serif;
14+
color:#555;
15+
line-height:180%;
16+
}
17+
img{border:none;}
18+
ul,li{
19+
margin:0;
20+
padding:0;
21+
}
22+
li{
23+
list-style:none;
24+
float:left;
25+
display:inline;
26+
margin-right:10px;
27+
border:1px solid #AAAAAA;
28+
}
29+
30+
/* tooltip */
31+
#tooltip{
32+
position:absolute;
33+
border:1px solid #ccc;
34+
background:#333;
35+
padding:2px;
36+
display:none;
37+
color:#fff;
38+
}
39+
</style>
40+
<script type="text/javascript">
41+
//<![CDATA[
42+
$(function(){
43+
var x = 10;
44+
var y = 20;
45+
$("a.tooltip").mouseover(function(e){
46+
this.myTitle = this.title;
47+
this.title = "";
48+
var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
49+
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
50+
$("body").append(tooltip); //把它追加到文档中
51+
$("#tooltip")
52+
.css({
53+
"top": (e.pageY+y) + "px",
54+
"left": (e.pageX+x) + "px"
55+
}).show("fast"); //设置x坐标和y坐标，并且显示
56+
}).mouseout(function(){
57+
this.title = this.myTitle;
58+
$("#tooltip").remove(); //移除
59+
}).mousemove(function(e){
60+
$("#tooltip")
61+
.css({
62+
"top": (e.pageY+y) + "px",
63+
"left": (e.pageX+x) + "px"
64+
});
65+
});
66+
})
67+
//]]>
68+
</script>
69+
70+
</head>
71+
<body>
72+
<h3>有效果：</h3>
73+
<ul>
74+
<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
75+
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
76+
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
77+
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
78+
</ul>
79+
80+
81+
<br/><br/><br/><br/>
82+
<br/><br/><br/><br/>
83+
84+
85+
<h3>无效果：</h3>
86+
<ul>
87+
<li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
88+
<li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
89+
<li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
90+
<li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
91+
</ul>
92+
</body>
93+
</html>

0 commit comments

Comments
 (0)