jquery，scss实现简单的手风琴效果

最新推荐文章于 2022-06-17 12:08:35 发布

Zangxjun

最新推荐文章于 2022-06-17 12:08:35 发布

阅读量725

点赞数 1

分类专栏： web sass 文章标签： jquery css scss 手风琴布局

本文链接：https://blog.csdn.net/ztj771299799/article/details/53259458

版权

web 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

sass

2 篇文章 0 订阅

订阅专栏

jquery，scss实现简单的手风琴效果

首先页面引用jquery，基本的css，之后开始对页面进行整体的布局,首先一个大的div作为容器并且设置容器的大小，之后采用ul li的形式并且要设置为浮动float：left，里面嵌套a标签为了跳转页面；具体如下方：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Title</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="base.css" rel="stylesheet"/>
    <link href="accordion.css" rel="stylesheet"/>
    <script src="jquery.min.js"></script>
</head>
<body>
<div class="accordion-warp">
    <ul class="boxrecommend clearfix">
        <li class="box-item on" style="width: 460px;">
            <div class="box-img" >
                <a href="#" target="_blank"><img class="li-img" src="1.png"></a>
            </div>
        </li>
        <li class="box-item" style="width: 203px;">
            <div class="box-img">
                <a href="#" target="_blank"><img class="li-img" src="2.png"></a>
            </div>
        </li>
        <li class="box-item" style="width: 203px;">
            <div class="box-img">
                <a href="#" target="_blank"><img class="li-img" src="3.png"></a>
            </div>
        </li>
        <li class="box-item last" style="width: 203px;">
            <div class="box-img" >
                <a href="#" target="_blank"><img class="li-img" src="4.png"></a>
            </div>
        </li>
    </ul>
</div> 

</body>

</html>

之后开始写css，要想要里面的图片在还未全部显示的时候怎么办，这个时候就要设置包含图片的容器也就是.box-img要设置为绝对定位，默认都是0，鼠标移动到当前的li上面lef变成该div的四分一，这样就能保证默认图片是剧中的，具体css看下方代码

.clearfix { width: 100%; margin: 0 auto; *zoom: 1; }
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }

.accordion-warp { width: 1200px; margin: 100px auto; }

.boxrecommend { height: 340px; margin-bottom: 20px; overflow: hidden; width: 1100px; }
.boxrecommend li { box-sizing: border-box; cursor: pointer; float: left; height: 340px; margin-right: 10px; overflow: hidden; position: relative; }
.boxrecommend li.last { margin-right: 0; }
.boxrecommend li.box-item { height: 100%; }
.boxrecommend li .box-img { bottom: 0; left: 0; overflow: hidden; position: absolute; top: 0; }
.boxrecommend li .box-img img { height: 340px; width: 460px; }

接下来配合jquery就大功告成啦！

 $(function(){
        var c = $(".boxrecommend").find("li.box-item")
        c.hover(function () {
            var b = $(this);
            //找到不是当前元素的li当宽度达到203时候停止动画效果，并且移除添加的标识css：on，给下方的图片left定位是图片剧中
            c.not(b).stop().animate({width: "203px"}).removeClass("on").children(".box-img").css("left","-115px");
            //鼠标移动到当前位置当宽度达到460时候停止动画效果，并且添加class为on的标识，是图片left为0

            b.stop().animate({width: "460px"}).addClass("on").children(".box-img").css("left",0)
        }), $(window).resize(function () {
            c.filter(".on").mouseenter()
        })
    });

以下为scss

@charset "utf-8";
.clearfix{
  width:100%;margin:0 auto;*zoom:1;
  &:before,&:after{display: table;content:""}
    &:after{clear:both}
}

.accordion-warp{
  width:1200px;
  margin:100px auto;
}


.boxrecommend {
  height: 340px;
  margin-bottom: 20px;
  overflow: hidden;
  width: 1100px;
  & li{

      box-sizing: border-box;
      cursor: pointer;
      float: left;
      height: 340px;
      margin-right: 10px;
      overflow: hidden;
      position: relative;
    &.last {
      margin-right: 0;
    }
    &.box-item {
      height: 100%;
    }
    & .box-img {
      bottom: 0;
      left: 0;
      overflow: hidden;
      position: absolute;
      top: 0;
      & img {
        height: 340px;
        width: 460px;
      }
    }

  }
}

直接下载写好的内容，jquery实现简单的手风琴效果http://download.csdn.net/detail/ztj771299799/9688799

Zangxjun

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery，scss实现简单的手风琴效果

jquery，scss实现简单的手风琴效果首先页面引用jquery，基本的css，之后开始对页面进行整体的布局,首先一个大的div作为容器并且设置容器的大小，之后采用ul li的形式并且要设置为浮动float：left，里面嵌套a标签为了跳转页面；具体如下方：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫