jquery仿凡客诚品图片切换的效果实例代码

清远大学城网（http://www.qydxc.com）

是一个不错的图片切换效果，就是可以图片带文字说明的折叠效果，下面我来给大家推荐两个版本的效果，有需要了解的朋友可参考。 


图片版的效果



 代码如下

复制代码




<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>
 

 

转载于:https://www.cnblogs.com/wenson/p/3322411.html