<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.div_zhong').each(function(){
$(this).find('.cover').css('bottom', -$(this).height());
$(this).hover(function(){
$(this).find('.cover').animate({
'bottom': '0'
},300);
},function(){
$(this).find('.cover').animate({
'bottom':$(this).height()
},{
duration: 500,
complete:function(){
$(this).css('bottom', -$(this).parent('li').height())
}
});
});
});
$('.div').mouseover(function(){
$('.div_huaguo').slideDown("slow");
})
$('.div').mouseout(function(){
$('.div_huaguo').slideUp("slow");
})
});
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.zt{
width:230px;
margin:100px auto;
}
.div{
width:230px;
height:360px;
float:left;
border:1px solid #7D7D7D;
position:relative;
}
.div_head{
width:230px;
height:40px;
float:left;
border-bottom:1px solid #7D7D7D;
}
.div_zhong{
width:230px;
height:290px;
border-bottom:1px solid #7D7D7D;
top:40px;
left:0;
position:absolute;
}
.div_zhong img{
margin-left:10px;
}
.div_zhong li{
overflow:hidden;
position:absolute;
width: 230px;
height: 290px;
}
.div_zhong span{
background:#00BCF3;
filter:alpha(opacity=70);
left:10px;
color:#fff;
position:absolute;
bottom:0px;
opacity:0.7;
overflow:hidden;
width:210px;
height:195px;
}
.div_foot{
width:230px;
height:40px;
position:absolute;
top:330px;
left:0;
}
.div_huaguo{
width: 230px;
height: 200px;
position: absolute;
display:none;
top: 330px;
left:0;
background: #00BCF3;
z-index:999;
}
</style>
<body>
<div class="zt">
<div class="div">
<div class="div_head">
头部
</div>
<div class="div_zhong">
<ul>
<li>
<img width="210" height="290" src="http://cc1.cache.cdqss.com/photochengdu/attachment/forum/201111/30/0945423rddj0rmduzppjsc.jpg"/>
<span class="cover xz_img_span" href=""></span>
</li>
</ul>
</div>
<div class="div_foot">
底部
</div>
<div class="div_huaguo">
11111111
</div>
</div>
<div class="div">
<div class="div_head">
头部
</div>
<div class="div_zhong">
<ul>
<li>
<img width="210" height="290" src="http://cc1.cache.cdqss.com/photochengdu/attachment/forum/201111/30/0945423rddj0rmduzppjsc.jpg"/>
<span class="cover xz_img_span" href=""></span>
</li>
</ul>
</div>
<div class="div_foot">
底部
</div>
<div class="div_huaguo">
11111111
</div>
</div>
</div>
</body>
</html>1 当我鼠标滑入class="div"的时候 class="div_huaguo"向下滑出 而我想把鼠标也移入 class="div_huaguo"的div里面 可是我这个当鼠标移出的时候 div也消失了
2 请问下 如果我需要两个以上的向下滑动的效果 需要的是效果一个一个的实现 而不是同时实现 应该这么做啊
3 向下滑动的效果的这个div 在ie6 ie7下 会被遮住
大虾帮忙下
http://bbs.csdn.net/topics/390643141
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").mouseover(function(){
$(this).next().slideDown(500);
});
$(".content").mouseleave(function(){
$(this).children().next().slideUp(500);
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
<body>
<div class="content" style="display:block;width:300px;">
<p class="flip">滑过这里</p>
<div class="panel">
<p>11111111111111111</p>
<p>2222222222222222222222</p>
</div>
</div>
<div class="content" style="display:block;width:300px;">
<p class="flip">滑过这里</p>
<div class="panel">
<p>11111111111111111</p>
<p>2222222222222222222222</p>
</div>
</div>
</body>
</html>
这段代码 可以用啊
亲测FF IE6下有效
$(this).next(".div_huaguo").slideDown(500);
});
$(".div").mouseleave(function(){
$(this).children().next(".div_huaguo").slideUp(500);
});
这样写没有效果的 我跟你的布局都不一样的 所以效果是没有的
$(this).next(".div_huaguo").slideDown(500);
});
$(".div").mouseleave(function(){
$(this).children().next(".div_huaguo").slideUp(500);
});
这样写没有效果的 我跟你的布局都不一样的 所以效果是没有的我是说了给你个参照嘛
你要根据你自己的需求改下的啊 比如class的值 还有元素的获取