<html>
<head>
<title>test</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$("img").mouseover(function(){
var left = this.offsetLeft;
var top = this.offsetTop + this.height + 10;
$("#big-img").
css("left",left + "px").
css("top",top + "px").
html("<img src='http://blog.bingo929.com/wp-content/uploads/2009/03/38.gif'>").
show();
var url = $(this).attr("rel");
//图片加载完毕后
$('<img src="' + url + '">').load(function(){
$("#big-img").html(this);
});
}).mouseout(function(){
$("#big-img").hide().html("");
});
});
</script>
<style type="text/css">
<!--
#big-img{
display:none;
position:absolute;
border:#39C dotted 1px;
padding:5px;
z-index:1000;
background-color:#FFF;
}
-->
</style>
</head>
<body>
<img src="http://farm4.static.flickr.com/3654/3542438912_ab3574000d_o.jpg" border="0"
rel="http://farm3.static.flickr.com/2057/3541631049_c476237602_o.jpg">
<img src="http://farm3.static.flickr.com/2444/3534307174_109197447f_o.jpg" border="0"
rel="http://farm3.static.flickr.com/2088/3533489073_d4578942bc_o.jpg">
<img src="http://farm4.static.flickr.com/3611/3490943356_a2965e0bec_o.jpg" border="0"
rel="http://farm4.static.flickr.com/3596/3490943572_3d775cc2c9_o.jpg">
<img src="http://farm4.static.flickr.com/3656/3473128741_fe7e73978d_o.jpg" border="0"
rel="http://farm4.static.flickr.com/3391/3473128765_9c844ff2a2_o.jpg">
<img src="http://farm4.static.flickr.com/3360/3512761921_b98cbd2324_o.jpg" border="0"
rel="http://farm4.static.flickr.com/3549/3512761925_e27810cbd2_o.jpg">
<div id="big-img"></div>
</body>
</html>
<head>
<title>test</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$("img").mouseover(function(){
var left = this.offsetLeft;
var top = this.offsetTop + this.height + 10;
$("#big-img").
css("left",left + "px").
css("top",top + "px").
html("<img src='http://blog.bingo929.com/wp-content/uploads/2009/03/38.gif'>").
show();
var url = $(this).attr("rel");
//图片加载完毕后
$('<img src="' + url + '">').load(function(){
$("#big-img").html(this);
});
}).mouseout(function(){
$("#big-img").hide().html("");
});
});
</script>
<style type="text/css">
<!--
#big-img{
display:none;
position:absolute;
border:#39C dotted 1px;
padding:5px;
z-index:1000;
background-color:#FFF;
}
-->
</style>
</head>
<body>
<img src="http://farm4.static.flickr.com/3654/3542438912_ab3574000d_o.jpg" border="0"
rel="http://farm3.static.flickr.com/2057/3541631049_c476237602_o.jpg">
<img src="http://farm3.static.flickr.com/2444/3534307174_109197447f_o.jpg" border="0"
rel="http://farm3.static.flickr.com/2088/3533489073_d4578942bc_o.jpg">
<img src="http://farm4.static.flickr.com/3611/3490943356_a2965e0bec_o.jpg" border="0"
rel="http://farm4.static.flickr.com/3596/3490943572_3d775cc2c9_o.jpg">
<img src="http://farm4.static.flickr.com/3656/3473128741_fe7e73978d_o.jpg" border="0"
rel="http://farm4.static.flickr.com/3391/3473128765_9c844ff2a2_o.jpg">
<img src="http://farm4.static.flickr.com/3360/3512761921_b98cbd2324_o.jpg" border="0"
rel="http://farm4.static.flickr.com/3549/3512761925_e27810cbd2_o.jpg">
<div id="big-img"></div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
