图片的展开与收起

最新推荐文章于 2024-04-03 15:09:44 发布

丨小确幸丨

最新推荐文章于 2024-04-03 15:09:44 发布

阅读量1.6k

点赞数

分类专栏： jQuery bootstrap 文章标签： jQuery bootstrap

本文链接：https://blog.csdn.net/Small_Wchen/article/details/74452143

版权

jQuery 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

bootstrap

3 篇文章 0 订阅

订阅专栏

在完成小demo的过程中，默默的发现小菜鸡的自己好像对JavaScript真的是不会运用，找了半天也没有成功把自己想要的效果显示出来。后来用了最简单的jQuery动画来完成效果：鼠标移动到图片上时，向右滑动展开显示完成图片；鼠标离开时，向左收起显示图标图片。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>图片的展开与收起</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        .download {
            margin-top: 25px;
        }
        .download a{
            display: inline-block;
            width: 50px;
            height: 50px;
            border-radius: 8px;
            overflow: hidden;
        }
        .download img {
            height: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class=" col-lg-1 col-xs-1"></div>
        <div class="col-lg-5 col-xs-5">
            <div class="  download">
                <a class="and"><img src="images/download-android.png" alt="安卓下载"></a>
            </div>
        </div>
        <div class="col-lg-5 col-xs-5 download">
            <a class="ios"><img src="images/download-ios.png" alt="苹果下载"></a>
        </div>
    </div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
       $(".download .and").mouseover (function () {
           $(".download .and").animate({
              width: '+=150px',
           },"slow");
       });
       $(".download .and").mouseout( function () {
          $(".download .and").animate({
               width: '-=150px'
           },"slow");
       });
        $(".download .ios").mouseover (function () {
            $(".download .ios").animate({
                width: '+=150px',

            },"slow");
        });
        $(".download .ios").mouseout( function () {
            $(".download .ios").animate({
                width: '-=150px'
            },"slow");
        });
    });
</script>