来自 澳门金莎娱乐手机版 2019-09-14 02:50 的文章
当前位置: 金沙澳门官网网址 > 澳门金莎娱乐手机版 > 正文

通过JQuery实现win8一样酷炫的动态磁贴效果

此地的参数能够依照要求开展退换,这里大家让放大计时器每3秒实行三遍go函数。
源码基本都贴出来了,有亟待源文件的童鞋能够碰撞这里下载

#outside
{
    height:180px;
    overflow:hidden;
}
#inside
{
    position:relative;
}
#text
{
    width:160px;
    height:160px;
    background:#0000ff;
    padding:10px;
    color:#fff;
}

剩下来的正是JQuery的职业了。首先先知道一下以此“动态磁贴”的动作:一起初显示一张图片,然后向上海滑稽剧团动突显文字,停留一会,再向下滑动展现图片,如此循环。大家先定义三个函数:

废话少说,步入正题。主干观念是:概念一个外层div,固定中度(比方本例中的180px)并设置属性overflow:hidden(遮盖高出边框的有的),然后在那一个div里面定义二个内层div,并安装属性position:relative(选择相对布局)。在这么些内层div里面,大家定义一张图纸,注意要安装它的冲天跟外层div中度一致(如本例中的180px),再定义贰个div放文字,该div的中度也和外围div中度同样(如本例中的180px,若是您给了三个padding,则中度相应减小,以高达总体div是180px的可观)。布局代码如下所示
澳门金莎娱乐手机版 ,html:

自个儿个人代表十分欣赏微软新一代的成品,先不管它出品的多谋善算者与否,不过它推动的是斩新的产品。所谓全新,是指在客商体验上,苹果近来的打响使得全体产品都在模仿它的分界面,包含安卓在内,不清楚大家的感到什么,反正自身是对那么些圆角矩形爆发了审美疲劳(苹果以及安卓的听众勿喷,这里唯有是从分界面上批评,事实上从全体上的话,微软照旧有距离的),当年wp的推出让作者别开生面,霎时喜欢上了Metro风格的产品,直于今日wp8以及win8开头更加的成熟。

此地有7个参数,id是内层div也正是要滑动的div的id,d1是内层div滑上去现在停留的日子,px1是内层div要向上海滑稽剧团动的相持地方,暗中认可当前职责为0px,val1是内层div的变成向上海滑稽剧团动动作所急需的年华,d2是向下滑动div后停留的大运,px2是向下滑动的相持地方,这里依旧是以本来的岗位为0px,val2是达成向下滑动所需的小时。

<div id="outside">
    <div id="inside">
        <img width="180px" height="180px" src="" />
        <div id="text">
            <span>通过JQuery达成win8同样璀璨的动态磁贴效果</span>
            <p>林宇</p>
            <p>笔者个人代表特别欣赏微软新一代的出品……</p>
        </div>
    </div>
</div>

复制代码 代码如下:

写的不得了,接待各位看官指正商量,不迎接无故猛喷。大神请绕道。

$(function () {
    timer1 = setInterval(function () {
        go("#inside", 1500, "180px", 1200, 1000, "0px", 2000);
    }, 3000);
});

复制代码 代码如下:

css:

接下来大家在页面加载成功的时候设置一个电火花计时器,来试行我们定义的go函数:

复制代码 代码如下:

复制代码 代码如下:

function go(id, d1, px1, val1, d2, px2, val2) {
    $(id).delay(d1);
    $(id).animate({ bottom: px1 }, val1, function () {
        $(id).delay(d2);
        $(id).animate({ bottom: px2 }, val2);
    });
}

本文由金沙澳门官网网址发布于澳门金莎娱乐手机版,转载请注明出处:通过JQuery实现win8一样酷炫的动态磁贴效果

关键词: