JQuery实现图片放大的动态菜单效果

最新推荐文章于 2024-07-18 18:32:44 发布

whisperapart

最新推荐文章于 2024-07-18 18:32:44 发布

阅读量430

点赞数

分类专栏： JQuery/Javascript 文章标签： jquery function scroll border div float

本文链接：https://blog.csdn.net/whisperapart/article/details/6931538

版权

JQuery/Javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

div, img, ul, li {
    margin: 0;
    padding: 0;
}
.head img {
    border: 0 none;
    vertical-align: top;
    position:absolute;
    width:100px;
    height:75px;
}
ul, li {
    list-style: none outside none;
}
.head {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 300px;
    margin: 30px 50px 50px 50px;
    padding-top:50px;
    padding-bottom:50px;
    width: 600px;
}

.head li {
    display: block;
    float: left;
    height: 100px;
    margin: 1 0 0 1px;
    position: relative;
    width: 100px;
}
.zin {
    z-index: 999;
}

<script type="text/javascript">
jQuery().ready(function(){
    
    //jQuery("li").photoFrame({direction:'bottomRight'});  
    jQuery(".head img").hover(function(){
        jQuery(this).stop(true)
        .parents("li").addClass("zin").end()
        .animate({left:-40,top:-30,width:180,height:135},200);
    },function(){
        jQuery(this).stop(true)
        .parents("li").removeClass("zin")
        .end().animate({left:0,top:0,width:100,height:75},200);
    });  
});
</script>

 <div>
        <ul class="head">
            <li><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
        </ul>
    </div>