我个人表示非常喜欢微软新一代的产品,先不管它产品的成熟与否,但是它带来的是全新的产品。所谓全新,是指在用户体验上,苹果这些年的成功使得所有产品都在模仿它的界面,包括安卓在内,不知道大家的感觉如何,反正我是对这些圆角矩形产生了审美疲劳(苹果以及安卓的粉丝勿喷,这里仅仅是从界面上评价,事实上从整体上来说,微软还是有差距的),当年wp的推出让我眼前一亮,马上喜欢上了Metro风格的产品,直至今天wp8以及win8开始越来越成熟。

最近研究了京东商城用jQuery的实现如下:
就是默认地址赋给img标签的src2属性,显示时赋给src属性值。

虽然 JavaScript
天生就是一副随随便便的样子,但是随着浏览器能够完成的事情越来越多,这门语言也也越来越经常地摆出正襟危坐的架势。在复杂的逻辑下,
JavaScript
需要被模块化,模块需要封装起来,只留下供外界调用的接口。闭包是
JavaScript
中实现模块封装的关键,也是很多初学者难以理解的要点。最初,我也陷入迷惑之中。现在,我自信对这个概念已经有了比较深入的理解。为了便于理解,文中试图封装一个比较简单的对象。

写的不好,欢迎各位看官指正批评,不欢迎无故猛喷。大神请绕道。

复制代码 代码如下:

我们试图在页面上维护一个计数器对象 ticker ,这个对象维护一个数值 n
。随着用户的操作,我们可以增加一次计数(将数值 n 加上 1 ),但不能减少 n
或直接改变 n 。而且,我们需要时不时查询这个数值。

废话少说,进入正题。基本思想是:定义一个外层div,固定高度(例如本例中的180px)并设置属性overflow:hidden(隐藏超出边框的部分),然后在这个div里面定义一个内层div,并设置属性position:relative(采用相对布局)。在这个内层div里面,我们定义一张图片,注意要设置它的高度跟外层div高度一样(如本例中的180px),再定义一个div放文字,该div的高度也和外层div高度一样(如本例中的180px,如果你给了一个padding,则高度相应减小,以达到整个div是180px的高度)。布局代码如下所示
html:

function lazyload(option) {
    var settings = {
defObj: null,
defHeight: 0
    };
    settings = $.extend(settings, option || {});
    var defHeight = settings.defHeight;
    var defObj = (typeof settings.defObj == “object”) ?
settings.defObj.find(“img”) : $(settings.defObj).find(“img”);
    var pageTop = function() {
return document.documentElement.clientHeight +
Math.max(document.documentElement.scrollTop, document.body.scrollTop) –
settings.defHeight;
    };
    var imgLoad = function() {
defObj.each(function() {
    if ($(this).offset().top <= pageTop()) {
        var src2 = $(this).attr(“src2”);
//已显示的不用再显示
if (src2) {
                    //显示后,去掉src2属性
    $(this).attr(“src”, src2).removeAttr(“src2”);
}
            }
});
    };
    imgLoad();
    $(window).bind(“scroll”, function() {
        imgLoad();
    });
}
lazyload({
    defObj:”.w1″
});

门户大开的 JSON 风格模块化

复制代码 代码如下:

就是默认地址赋给img标签的src2属性,显示时赋给src属性值。 复制代码
代码如下: function lazyload(o…

一种门户大开的方式是:

<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>

复制代码 代码如下:

css:

var ticker = {
    n:0,
    tick:function(){
        this.n++;
    },
};

复制代码 代码如下:

这种方式书写自然,而且确实有效,我们需要增加一次计数时,就调用
ticker.tick() 方法,需要查询次数时,就访问 ticker.n
变量。但是其缺点也是显而易见的:模块的使用者被允许自由地改变 n
,比如调用 ticker.n– 或者 ticker.n=-1 。我们并没有对 ticker 进行封装,
n 和 tick() 看上去是 ticker 的“成员”,但是它们的可访问性和 ticker
一样,都是全局性的(如果 ticker
是全局变量的话)。在封装性上,这种模块化的方式比下面这种更加可笑的方式,只好那么一点点(虽然对有些简单的应用来说,这一点点也足够了)。

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

复制代码 代码如下:

剩下来的就是JQuery的事情了。首先先理解一下这个“动态磁贴”的动作:一开始显示一张图片,然后向上滑动显示文字,停留一会,再向下滑动显示图片,如此循环。我们先定义一个函数:

var ticker = {};
var tickerN = 0;
var tickerTick = function(){
    tickerN++;
}

复制代码 代码如下:

tickerTick();

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);
    });
}

值得注意的是,在 tick() 中,我访问的是 this.n ——这并不是因为 n 是 ticker
的成员,而是因为调用 tick() 的是 ticker 。事实上这里写成 ticker.n
会更好,因为如果调用 tick() 的不是 ticker ,而是其他什么东西,比如:

这里有7个参数,id是内层div也就是要滑动的div的id,d1是内层div滑上去以后停留的时间,px1是内层div要向上滑动的相对位置,默认当前位置为0px,val1是内层div的完成向上滑动动作所需要的时间,d2是向下滑动div后停留的时间,px2是向下滑动的相对位置,这里依然是以原来的位置为0px,val2是完成向下滑动所需的时间。

复制代码 代码如下:

然后我们在页面加载完成的时候设置一个定时器,来执行我们定义的go函数:

var func = ticker.tick;
func();

复制代码 代码如下:

这时,调用 tick() 的其实是 window ,而函数执行时会试图访问 window.n
而出错。

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

事实上,这种“门户大开”型的模块化方式,往往用来组织 JSON
风格的数据,而不是程序。比如,我们可以将下面这个 JSON 对象传给 ticker
的某个函数,来确定 ticker 从 100 开始计数,每次递进 2 。

这里的参数可以根据需要进行修改,这里我们让定时器每3秒执行一次go函数。
源码基本都贴出来了,有需要源文件的童鞋可以猛击这里下载

复制代码 代码如下:

var config = {
    nStart:100,
    step:2
}

作用域链和闭包
来看下面的代码,注意我们已经实现了传入 config 对 ticker 进行自定义。

复制代码 代码如下:

发表评论

电子邮件地址不会被公开。 必填项已用*标注