<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font-size: 14px;font-family: "microsoft yahei";line-height: 30px;color: #000;padding: 0px 30px;}
.box{width: 960px;overflow: hidden;margin: 50px auto;position: relative;background: #ededed;}
.box li{
width: 300px;height: 300px;margin: 10px;background: rgba(0,190,190,0.7);list-style: none;float: left;
font-size: 100px;text-align: center;line-height: 300px;font-weight: bold;color: #007373;
}
.box span{
position: absolute;top: 10px;left: 10px;display: inline-block;width: 300px;height: 300px;
background: rgba(0,0,0,0.3);
}
.box b{
position: absolute;top: 10px;left: 10px;display: inline-block;width: 300px;height: 300px;
font-size: 100px;text-align: center;line-height: 300px;font-weight: bold;color: #000;
opacity: 0;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="box">
<ul>
<li>梅</li>
<li>兰</li>
<li>竹</li>
<li>菊</li>
<li>松</li>
<li>柏</li>
</ul>
<span class="mban"></span>
<b class="bwen"></b>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".box li").bind('mouseover',function(){
var $oposition = $(this).position();
var $oli = $(this);
$(".mban").stop(true,true).animate({
top:$oposition.top+10,
left:$oposition.left+10
},300,function(){
$(".bwen").html($oli.html(),700);
$(".bwen").stop(true,true).animate({
opacity:1,
top:$oposition.top+10,
left:$oposition.left+10
},300);
}).delay(300);
});
});
</script>
</body>
</html>
830
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
