实现图片的显示
实例如下：
<style type=
"
text/css
">
body{
margin: 0;
padding:40px;
background:#fff;
font: 80% Arial, Helvetica, sans-serif;
color:# 555;
line-height: 180%;
}
img{border:none;}
ul,li{
margin: 0;
padding: 0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:# 333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script language= " javascript ">
/* $(document).ready(function(){
var x=10;
var y=20;
$("a .tooltip").mouseover(function(e){
this.myTitle=this.title;
this.title="";
var tooltip="<div id='tooltip'>"+this.title+"</div>";
$("body").append(tooltip);
$("#tooltip").css({
"top" : (e.pageY+y) + "px",
"left" : (e.pageX+x) + "px"
}).show("fast");
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();
});
});
*/
$(function(){
var x = 10;
var y = 20;
$( " a.tooltip ").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle? " <br/> " + this.myTitle : "";
var tooltip = " <div id='tooltip'><img src=' "+ this.href + " ' alt='产品预览图'/> "+imgTitle+ " <\/div> "; // 创建 div 元素
$( " body ").append(tooltip); // 把它追加到文档中
$( " #tooltip ")
.css({
" top ": (e.pageY+y) + " px ",
" left ": (e.pageX+x) + " px "
}).show( " fast "); // 设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title = this.myTitle;
$( " #tooltip ").remove(); // 移除
}).mousemove(function(e){
$( " #tooltip ")
.css({
" top ": (e.pageY+y) + " px ",
" left ": (e.pageX+x) + " px "
});
});
})
</script>
</head>
<body>
<div style= " display:none ">
<p><a href= " # " class= " tooltip " title= " 这是我的超链接提示1 ">提示1</a></p>
<p><a href= " # " class= " tooltip " title= " 这是我的超链接提示2 ">提示2</a></p>
<p><a href= " # " title= " 自带提示1 ">自带提示1</a></p>
<p><a href= " # " title= " 自带提示2 ">自带提示2</a></p>
</div>
<h3>有效果：</h3>
<ul>
<li><a href= " images/apple_1_bigger.jpg " class= " tooltip " title= " 苹果 iPod "><img src= " images/apple_1.jpg " alt= " 苹果 iPod " /></a></li>
<li><a href= " images/apple_2_bigger.jpg " class= " tooltip " title= " 苹果 iPod nano "><img src= " images/apple_2.jpg " alt= " 苹果 iPod nano "/></a></li>
<li><a href= " images/apple_3_bigger.jpg " class= " tooltip " title= " 苹果 iPhone "><img src= " images/apple_3.jpg " alt= " 苹果 iPhone "/></a></li>
<li><a href= " images/apple_4_bigger.jpg " class= " tooltip " title= " 苹果 Mac "><img src= " images/apple_4.jpg " alt= " 苹果 Mac "/></a></li>
</ul>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<h3>无效果：</h3>
<ul>
<li><a href= " images/apple_1_bigger.jpg " title= " 苹果 iPod "><img src= " images/apple_1.jpg " alt= " 苹果 iPod " /></a></li>
<li><a href= " images/apple_2_bigger.jpg " title= " 苹果 iPod nano "><img src= " images/apple_2.jpg " alt= " 苹果 iPod nano "/></a></li>
<li><a href= " images/apple_3_bigger.jpg " title= " 苹果 iPhone "><img src= " images/apple_3.jpg " alt= " 苹果 iPhone "/></a></li>
<li><a href= " images/apple_4_bigger.jpg " title= " 苹果 Mac "><img src= " images/apple_4.jpg " alt= " 苹果 Mac "/></a></li>
</ul>
</body>
body{
margin: 0;
padding:40px;
background:#fff;
font: 80% Arial, Helvetica, sans-serif;
color:# 555;
line-height: 180%;
}
img{border:none;}
ul,li{
margin: 0;
padding: 0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:# 333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script language= " javascript ">
/* $(document).ready(function(){
var x=10;
var y=20;
$("a .tooltip").mouseover(function(e){
this.myTitle=this.title;
this.title="";
var tooltip="<div id='tooltip'>"+this.title+"</div>";
$("body").append(tooltip);
$("#tooltip").css({
"top" : (e.pageY+y) + "px",
"left" : (e.pageX+x) + "px"
}).show("fast");
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();
});
});
*/
$(function(){
var x = 10;
var y = 20;
$( " a.tooltip ").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle? " <br/> " + this.myTitle : "";
var tooltip = " <div id='tooltip'><img src=' "+ this.href + " ' alt='产品预览图'/> "+imgTitle+ " <\/div> "; // 创建 div 元素
$( " body ").append(tooltip); // 把它追加到文档中
$( " #tooltip ")
.css({
" top ": (e.pageY+y) + " px ",
" left ": (e.pageX+x) + " px "
}).show( " fast "); // 设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title = this.myTitle;
$( " #tooltip ").remove(); // 移除
}).mousemove(function(e){
$( " #tooltip ")
.css({
" top ": (e.pageY+y) + " px ",
" left ": (e.pageX+x) + " px "
});
});
})
</script>
</head>
<body>
<div style= " display:none ">
<p><a href= " # " class= " tooltip " title= " 这是我的超链接提示1 ">提示1</a></p>
<p><a href= " # " class= " tooltip " title= " 这是我的超链接提示2 ">提示2</a></p>
<p><a href= " # " title= " 自带提示1 ">自带提示1</a></p>
<p><a href= " # " title= " 自带提示2 ">自带提示2</a></p>
</div>
<h3>有效果：</h3>
<ul>
<li><a href= " images/apple_1_bigger.jpg " class= " tooltip " title= " 苹果 iPod "><img src= " images/apple_1.jpg " alt= " 苹果 iPod " /></a></li>
<li><a href= " images/apple_2_bigger.jpg " class= " tooltip " title= " 苹果 iPod nano "><img src= " images/apple_2.jpg " alt= " 苹果 iPod nano "/></a></li>
<li><a href= " images/apple_3_bigger.jpg " class= " tooltip " title= " 苹果 iPhone "><img src= " images/apple_3.jpg " alt= " 苹果 iPhone "/></a></li>
<li><a href= " images/apple_4_bigger.jpg " class= " tooltip " title= " 苹果 Mac "><img src= " images/apple_4.jpg " alt= " 苹果 Mac "/></a></li>
</ul>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<h3>无效果：</h3>
<ul>
<li><a href= " images/apple_1_bigger.jpg " title= " 苹果 iPod "><img src= " images/apple_1.jpg " alt= " 苹果 iPod " /></a></li>
<li><a href= " images/apple_2_bigger.jpg " title= " 苹果 iPod nano "><img src= " images/apple_2.jpg " alt= " 苹果 iPod nano "/></a></li>
<li><a href= " images/apple_3_bigger.jpg " title= " 苹果 iPhone "><img src= " images/apple_3.jpg " alt= " 苹果 iPhone "/></a></li>
<li><a href= " images/apple_4_bigger.jpg " title= " 苹果 Mac "><img src= " images/apple_4.jpg " alt= " 苹果 Mac "/></a></li>
</ul>
</body>
结果：
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
