Jquery实现360图片导航效果

最新推荐文章于 2022-09-22 15:29:14 发布

zoekitty

最新推荐文章于 2022-09-22 15:29:14 发布

阅读量543

点赞数

分类专栏： jquery 文章标签： 360图片导航效果

本文链接：https://blog.csdn.net/zoekitty/article/details/52608668

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        ul{list-style: none;}
        img{display: block; border:0;}
        .wrapper{width: 752px;  border:1px solid #ccc;
            padding: 10px 0 0 10px;
            font-family: arial;
            overflow: hidden;
            margin:100px auto;

        }
        .wrapper li{
            float: left;
            margin:0 10px 10px 0;
            width: 178px;
            height: 125px;
            overflow: hidden;
            position: relative;
        }
        .wrapper li div,.wrapper li p{
            width:178px;
            height: 25px;
            position: absolute;
            font-size:14px;
            text-align: center;
            line-height: 25px;
            color:white;
            left:0;
            bottom:-25px;
            _bottom:-26px;
        }
        .wrapper li div{
            background-color:#000;
        }
        .wrapper li p{
            background: url(images/bg.png) no-repeat 5px 0;
        }

    </style>
    <script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var div = $("<div></div>"),speed = 388,$p = $(".wrapper p");
            $p.before(div);
            $(".wrapper div").fadeTo(0,0.5);
            $p.each(function(index,ele){
                var y = index * 25;
                $(ele).css("background-position","5px -" + y + "px");
            });

            $(".wrapper li").hover(function(){
                $(this).children("div,p").stop().animate({"bottom":0},speed);
            },function(){
                $(this).children("div,p").stop().animate({"bottom":-26},speed);
            });
        });
    </script>
</head>
<body>
<div class="wrapper">
    <ul>
        <li><a href="###"><img src="images/01.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
        <li><a href="###"><img src="images/02.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
        <li><a href="###"><img src="images/03.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
        <li><a href="###"><img src="images/04.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
        <li><a href="###"><img src="images/05.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
        <li><a href="###"><img src="images/06.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
        <li><a href="###"><img src="images/07.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
        <li><a href="###"><img src="images/08.jpg" alt=""/></a><p>百度一下，你就知道</p></li>
    </ul>
</div>
</body>
</html>

zoekitty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery实现360图片导航效果

*{margin:0;padding:0;} ul{list-style: none;} img{display: block; border:0;} .wrapper{width: 752px; border:1px solid #ccc; padding: 10px 0 0 10px; font-
复制链接

扫一扫

专栏目录