渐入效果实现

来源：互联网发布：农村金融网点数据编辑：程序博客网时间：2024/06/08 03:48

思路

首先我们来幅图解析下渐入效果的原理：
这里写图片描述
由图可以看出，整个渐入的效果分为三层，分别为：最外层、内容包裹层和内容层。其中最外层、内容包裹层和内容层三层的宽高是一致的。
开始状态下，最外层和内容包裹层均将超出的部分隐藏，这样其实最开始的时候只能看见最外层左边的50%和内容包裹层左边的50%，内容是完全看不见的。首先我们将内容包裹层宽度设置为最外层的50%，内容距离右边为最外层的50%，其次将内容包裹层的宽度逐渐加到与最外层的宽度相等，让其和最外层重合，同时将内容向右移动最外层宽度的50%，让三层重合，这样就实现了渐入的效果。
下面我们依旧上代码：

<div class="content-wrap">    <div class="content-inner">        <div class="content"></div>    </div></div>

.content-wrap{    position: relative;    width: 120px;    height: 120px;}.content{    background: #ff3300;}

$(function(){    var time = 600; // 设置渐入速度    easeIn($(".content-wrap"),$(".content-inner"),time);})/* *功能：实现渐入效果 * param1：最外层（content-wrap） * param1：内容包裹层（content-inner） * param1：速度时间控制 * */function easeIn(param1,param2,param3){    var widthWrap,        heightWrap,        bgWrapSon;    widthWrap = param1.width();    heightWrap = param1.height();    bgWrapSon = param2.children();    param2.css({        "position":"absolute",        "top":"0",        "right":"0",        "display":"block",        "width":widthWrap/2,        "height":heightWrap,        "overflow":"hidden"    });    bgWrapSon.css({        "position":"absolute",        "top":"0",        "right":widthWrap/2,        "width":widthWrap,        "height":heightWrap    });    param2.animate({            "width":widthWrap        },        {            duration:param3,            easing:"linear"        }    )    bgWrapSon.animate({            right:"0"        },        {            duration:param3,            easing:"linear"        }    )}

实现效果：
这里实现效果我不截图了，动画的截了也没啥意思，需要看的同学复制代码运行下即可，这个跟PPT里面的渐入效果是一样的，记得引入jQuery文件。

有更好实现方法的同学请留言指教，谢谢!

0 0