当前位置:JS特效 » 图片效果 » 基于Jquery实现图片筛选和banner特效排版
基于Jquery实现图片筛选和banner特效排版
如果您觉得内容不错,请分享:

插件介绍

基于Jquery实现图片筛选和banner特效排版,本实例可以实现,banner图片特效展示如下图。还有图片分类tab,以及通过顶部分类 点击主动筛选等功能。需要的小伙伴可以下载进行测试使用。本实例已经经过实例吧测试banner特效效果 图片搜索Slick.prototype.removeSlide = Slick.prototype.slickRemove = function { var _

浏览器兼容性

浏览器兼容性
时间:2021-09-07 阅读:115
简要教程

【案例简介】

基于Jquery实现图片筛选和banner特效排版,本实例可以实现,banner图片特效展示如下图。还有图片分类tab,以及通过顶部分类 点击主动筛选等功能。需要的小伙伴可以下载进行测试使用。本实例已经经过实例吧测试

【案例截图】

banner特效效果【动态】


图片搜索【动态】

【核心代码】


Slick.prototype.removeSlide = Slick.prototype.slickRemove = function(index, removeBefore, removeAll) {

        var _ = this;

        if (typeof(index) === 'boolean') {
            removeBefore = index;
            index = removeBefore === true ? 0 : _.slideCount - 1;
        } else {
            index = removeBefore === true ? --index : index;
        }

        if (_.slideCount < 1 || index < 0 || index > _.slideCount - 1) {
            return false;
        }

        _.unload();

        if (removeAll === true) {
            _.$slideTrack.children().remove();
        } else {
            _.$slideTrack.children(this.options.slide).eq(index).remove();
        }

        _.$slides = _.$slideTrack.children(this.options.slide);

        _.$slideTrack.children(this.options.slide).detach();

        _.$slideTrack.append(_.$slides);

        _.$slidesCache = _.$slides;

        _.reinit();

    };

    Slick.prototype.setCSS = function(position) {

        var _ = this,
            positionProps = {},
            x, y;

        if (_.options.rtl === true) {
            position = -position;
        }
        x = _.positionProp == 'left' ? Math.ceil(position) + 'px' : '0px';
        y = _.positionProp == 'top' ? Math.ceil(position) + 'px' : '0px';

        positionProps[_.positionProp] = position;

        if (_.transformsEnabled === false) {
            _.$slideTrack.css(positionProps);
        } else {
            positionProps = {};
            if (_.cssTransitions === false) {
                positionProps[_.animType] = 'translate(' + x + ', ' + y + ')';
                _.$slideTrack.css(positionProps);
            } else {
                positionProps[_.animType] = 'translate3d(' + x + ', ' + y + ', 0px)';
                _.$slideTrack.css(positionProps);
            }
        }

    };


Top