热门关键字:
jquery > jquery插件 > jquery图片滚动 > 分享一款用Aui-core实现带动画效果的图片滚动js特效

分享一款用Aui-core实现带动画效果的图片滚动js特效

9573
所属分类:jquery图片滚动
发布时间:2013/1/8 16:43:08
下载量:1279
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=142

首先非常感谢网友Adam‘的无私分享,此图片滚动js特效是用自己写的一个JS框架Aui-core实现的,代码非常简洁,可支持事件的动态绑定,带滑动动画特效,支持分页显示,效果非常酷。

使用非常简单:

第一步:引入Aui-core库JS文件

第二步:主要Aui-core 代码如下

oBtn.bind("click",function() {
    var _this = Aui(this);
    var idx = _this.index();
    if (bool) return false;
    bool = true;
    var thisBtn = oBtn.eq(idx);
    var oPrevArr = aGroup[g].split(",");
    var pLen = oPrevArr.length;
    var oMoveArr = aGroup[idx].split(",");
    var mLen = oMoveArr.length;
    Aui.each(oPrevArr,function(i, v) { (function(o, i) {
            setTimeout(function() {
                Aui(o).fx({
                    left: o.offsetLeft + (idx - g < 0 ? 1 : -1) * _w
                },
                nSpeed * 0.8, "",
                function() {
                    Aui(this).setStyle("left", _w);
                    if (i === pLen - 1) {
                        setTimeout(function() {
                            Aui.each(oMoveArr,
                            function(i, v) { (function(o, i) {
                                    setTimeout(function() {
                                        Aui(o).fx({
                                            left: aPos[i]
                                        },
                                        nSpeed, "easeOutBounce");

                                        if (i === mLen - 1) bool = false;

                                    },
                                    i * 150);

                                })(oList[Number(v)], i);
                            });
                        },
                        0);
                    };
                });

            },
            i * 100);

        })(oList[Number(v)], i)
    });
    oArrow.fx({
        left: thisBtn.left() + (thisBtn.width() / 2 - arrowHf)
    },
    200, "",
    function() {
        thisBtn.addClass("curr").siblings().removeClass("curr");
    });
    g = idx;
    return false;
});

 

效果如下:

网友Adam‘利用Aui-core实现app ImgScroll图片滚动js特效

 

 





如果您觉得本作品对您的学习有所帮助:支付鼓励



关键字:Aui-core ImgScroll 滑动插件 图片滚动 js特效 图片延迟加载 元素抖动
  • 分享一款用Aui-core实现带动画效果的图片滚动js特效如果你喜欢学院的资源就下载吧,亲,谢谢!
  • 分享一款用Aui-core实现带动画效果的图片滚动js特效
  • 分享一款用Aui-core实现带动画效果的图片滚动js特效
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐