是一个不错的图片切换效果，就是可以图片带文字说明的折叠效果，下面我来给大家推荐两个版本的效果，有需要了解的朋友可参考。
图片版的效果
| 代码如下 | 复制代码 |
<div class="menu">
<div class="has_children">
<span>特价包邮卡通三件套哆啦a梦</span>
<a href="" class="aImg" style="display:block" rel="nofollow"><img src="images/T1.1CCXjx3XXXzYd3._111717.jpg_160x160.jpg" width="160" height="157"></a>
</div>
<div class="has_children">
<span>全棉活性卡通三件套纯棉汽车图案</span>
<a href="" class="aImg" rel="nofollow"><img src="images/T1EAWQXjtvXXaaewYa_120947.jpg_160x160.jpg" width="160" height="157"></a>
</div>
<div class="has_children">
<span>特价男学生三件套纯棉</span>
<a href="" class="aImg" rel="nofollow"><img src="images/T1Bo6gXh0eXXbGc7IV_021411.jpg_160x160.jpg" width="160" height="157"></a>
</div>
<div class="has_children">
<span>特价三件套男生格子条纹蓝色</span>
<a href="" class="aImg" rel="nofollow"><img src="images/T171xDXa4wXXXOx1E9_103218.jpg_160x160.jpg" width="160" height="157"></a>
</div>
<div class="has_children">
<span style="border:none">韩版公主四件套纯棉床裙1.8米床包邮特价</span>
<a href="" class="aImg" rel="nofollow"><img src="images/T1VD5WXfRwXXb5yZIU_014143.jpg_160x160.jpg" width="160" height="157"></a>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// $(".has_children").click(function(){
// $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//点击后效果
// })
$(".has_children").mouseover(function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//鼠标移动过去效果
})
})
</script>
|
文字版效果
| 代码如下 | 复制代码 |
<div class="menu">
<div class="has_children">
<span>第一张</span>
<a href="">11111111</a>
<a href="">11111111</a>
<a href="">11111111</a>
<a href="">11111111</a>
<a href="">11111111</a>
<a href="">11111111</a>
</div>
<div class="has_children">
<span>第二张</span>
<a href="">22222222</a>
<a href="">22222222</a>
<a href="">22222222</a>
<a href="">22222222</a>
<a href="">22222222</a>
<a href="">22222222</a>
</div>
<div class="has_children">
<span>第三张</span>
<a href="">33333333</a>
<a href="">33333333</a>
<a href="">33333333</a>
<a href="">33333333</a>
<a href="">33333333</a>
<a href="">33333333</a>
</div>
<div class="has_children">
<span>第四张</span>
<a href="">44444444</a>
<a href="">44444444</a>
<a href="">44444444</a>
<a href="">44444444</a>
<a href="">44444444</a>
<a href="">44444444</a>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// $(".has_children").click(function(){
// $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//点击后效果
// })
$(".has_children").mouseover(function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//鼠标移动过去效果
})
})
</script> |
