<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>jste</title>
</head>
<body>
<!-- 头部 -->
<link rel="stylesheet" href="http://a.tbcdn.cn/apps/dts/th3/css/??public.css" />
<script src="http://a.tbcdn.cn/apps/dts/th3/js/??jquery.js,th_select.js"></script>
<script>
$(function(){
/* $(".show").animate({"height":"40px"},1000)
.click(function(){
$(this).hide("1000")
})*/
/* $("ul li").hover(function(){
$(this).siblings().addClass("t");
},function()
{ $(this).siblings().removeClass("t");
})*/
/*
$(".ul li img").hover(
function(){
var offset=$(this).offset();
$(".showbox")
.css({"left":offset.left-50+"px","top":offset.top-50+"px"})
.stop(true,true).show(500);
$(".showbox img").attr("src",this.src);
},function(){
$(".showbox").hide(100);
}
)
*/
})
$(function(){
var timer = null;
$('.show .ul img').mousemove(function(){
var src = this.src,
offset = $(this).offset();
if (timer) { clearTimeout(timer); }
timer = setTimeout(function(){
$('.show .showbox').find('img').attr({'src':src,"title":this.title}).end().fadeIn(500).offset({left:offset.left - 50,top:offset.top - 50});
},500);
})
$('.show .showbox').mouseleave(function(e){
$(this).hide();
})
})
</script>
<style>
.show{height:0;800px;;background:#990;margin:100px auto;}
.cur{border:1px solid #ccc}
.t{background:#000000; opacity:0.7}
li{ float:left; position:relative;}
li img{100px;height:100px; display:block; cursor:pointer}
.showbox{200px;height:300px; display:none; left:10px; top:10px; position:absolute; border:2px solid #C90}
.showbox img{200px;height:150px;}
</style>
<div class="show">
<ul class="ul">
<li><img src="http://himg2.huanqiu.com/ad/0166090.jpg" title="这是一个问题"></li>
<li><img src="http://himg2.huanqiu.com/ad/0366090.jpg" title="这是34个问题"></li>
<li><img src="http://himg2.huanqiu.com/ad/0566090.jpg" title="这是2个问题"></li>
<li><img src="http://www.huanqiu.com/www/v/2011/10/27/20111027181016.jpg" title="这是22个问题"></li>
<li><img src="http://img02.taobaocdn.com/tps/i2/T1ef9lXoNqXXXXXXXX-195-149.jpg" title="22222"></li>
</ul>
<div class="showbox">
<img src="http://img02.taobaocdn.com/tps/i2/T1ef9lXoNqXXXXXXXX-195-149.jpg">
<p>info</p>
</div>
</div>
</body>
</html>