图片''推拉门''动效实现

作者: 是阿详 | 来源:发表于2017-08-24 13:45 被阅读493次
''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换。
收缩状态.png 展开状态.png

实现方法一:改变图片宽度

html+css代码
<body>
    <div class="box">
        <ul>
            <!-- <li>![](images/slidepic2.jpg)</li> -->
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

<style>
        *{
            padding: 0;
            margin: 0;

        }
        .box{
            /*收缩状态:缩放时每个图片的大小240px 所以总大小1200px*/
            /*展开状态:当前图片宽度800px 其他图片宽度100px*/
            width: 1200px;
            height: 500px;
            border:1px solid red;
            margin: 50px auto;
        }
        .box ul{
            list-style: none;
            width: 1210px;
        }
        /*设置每一张图片的大小和float: left*/
        .box ul li{
            width: 240px;
            height: 500px;
            /*background: url(images/slidepic2.jpg);*/
            float: left;
        }
    </style>
jQuery实现
<script src = 'jquery-3.2.1.js'></script>
<script>
    $(function(){
        //1遍历每一张li  获取每个元素设置对应的图片
        var lis = $('li');
        lis.each(function(index, element){
            //通过设置背景图片名称改变图片的显示
            var imgName = "images/slidepic" + (index + 2) +".jpg ";
            $(element).css('background', "url('"+ imgName +"')")
        });
        //2.展开状态
        //鼠标滑入改变对应图片宽度800 其他图片(兄弟)改为100
        lis.mouseenter(function(){
            // console.log(this);  当前的li DOM元素
            //当前的图片的宽度变为800
            $(this).stop().animate({width: 800});
            //其他图片的宽度变为100
            $(this).siblings('li').stop().animate({width: 100});
        });
        //3鼠标滑出是全部显示为收缩状态
        lis.mouseout(function(){
            lis.stop().animate({width: 240});
        });
    })
</script>
jQuery精简后代码
//精简代码
$(function(){
    $('li').each(function(index, element){
        $(element).css('backgroud',"url('images/slidepic"+(index + 2)+.jpg')");
    }).mouseenter(function(){
        $(this).stop().animate({width: 800}).siblings().stop().aniamte(width: 100});
    }).mouseout(function(){
        $('li').stop().animate({width: 240});
    });
})

实现方法二:改变图片的偏移值

html+css代码
<body>
    <div class="picList">
        <ul>
            <li>![](images/slidepic8.jpg)</li>
            <li>![](images/slidepic3.jpg)</li>
            <li>![](images/slidepic4.jpg)</li>
            <li>![](images/slidepic5.jpg)</li>
            <li>![](images/slidepic7.jpg)</li>
        </ul>
    </div>
</body>

<style>
        *{
            background-color: #aaa;
            padding: 0;
            margin: 0;
        }
        ul{list-style: none;}

        .picList{
            width: 1000px;
            height: 400px;
            /*border:1px solid #eee;*/
            margin:100px auto;
            position: relative;
            overflow: hidden;
        }
        /*设置定位属性 所有图片覆盖在起始位置*/
        .picList ul li{
            position: absolute;
            width: 1000px;
            height: 400px;
            top: 0;
        }
        img{
            width: 100%;
            height: 400px;
            cursor: pointer;

        }
</style>
jQuery实现
<script src = 'jquery-3.2.1.js'></script>
<script >
    $(function(){
        //1获取所有的图片  设置初始的收缩状态left:i*200
        var lis = $('li');
        for(var i = 0; i < lis.length; i++){
            lis.eq(i).css({left:i*200 + 'px' });
        }
        //2.设置hover内置函数,实现鼠标滑入展开滑出收缩效果
        lis.hover(function(){
            var index = $(this).index(); //DOM对象转换jQuery对象
            //2.1鼠标滑入后,当前图片的前面图片偏移位置减小到 j*100位置
            for(var j = 0; j <= index; j++){
                lis.eq(j).stop().animate({left: j*100 + 'px'},300);
            }
            //2.2鼠标滑入后,当前图片的后面图片偏移位置扩大到 500+j*100位置
            for(var j = index + 1; j < lis.length; j++){
                lis.eq(j).stop().animate({left: 500+j*100 + 'px'},300);
            }
        },function(){ //2.3鼠标滑出后,所有图片恢复到原来的位置 i*200
            for(var i = 0; i < lis.length; i++){
                lis.eq(i).stop().animate({left: i*200 + 'px'},300);
            }
        });
    })
</script>

注意:方法一在实现的过程中,注意宽度和图片命名的设置。

提示:这里使用的是jQuery代码实现,javaScript代码也是一样的可以实现,只是修改下遍历过程和内置函数方法,另外再重写动画函数(前面的笔记有封装好的animate函数,可以直接引入使用)。

相关文章

网友评论

  • 随波_逐流:是不是可以纯CSS可以实现
    是阿详:是的,使用css3也可以实现滑动效果。但是css一般是用来样式的,而且在支持性上还不是很好。

本文标题:图片''推拉门''动效实现

本文链接:https://www.haomeiwen.com/subject/lszsdxtx.html