Question

我正在尝试重新创建New York Times Fashion Week页面中使用的笛卡尔失真效果。但是，他们使用D3版本3和D3js的fisheye插件，这与D3版本不兼容。

由于我们所做的整个项目都在D3 V4中，所以我无法降级到D3版本3.

还有其他方法可以使用CSS和jquery来实现这种效果吗？

我已经尝试过这是我到目前为止的地方：preview

window.onload = run;
function run() {
    if ($('.overlayDiv').css('display') != 'none') {
        var container = d3.select('.overlayDiv');
        container.empty();
        var val = parseInt(5);
        var overlayWidth = $(".overlayDiv").width();
        var vwidth = (overlayWidth / (val));
        console.log(vwidth);
        for (i = 0; i < val; ++i) {
            var div = container.append("div").style("width", vwidth + "px")
                .style("height", "100%")
                .style("background", "rgb(75, 123, 175)")
                .style("float", "left")

            var year = div.text(i)
                .attr("class", "summary")
                .style("text-align", "center")
                .style("font-size", "32px")
                .style("font-weight", "bold")
                .style("line-height", "100px").style("color", "white")
                .on('mouseover', function() {
                    d3.select(this)
                        .transition().style('width', $(".overlayDiv").width() / 2 + "px")
                        .style("background", "rgba(90, 90, 90, 0.78)")

                    $('.summary').not(this).each(function() {
                        $(this).css("width", (overlayWidth / 3) / (val));
                    });

                })
                .on('mouseout', function() {
                    d3.select(this)
                        .transition().style('width', vwidth + "px")
                        .style("background", "rgb(75, 123, 175)")
                    $('.summary').not(this).each(function() {
                        $(this).css("width", vwidth);
                    });
                })
        }

        $('.overlayDiv').show();
        //$('.overlayDiv').text(this.firstChild.nextSibling.innerHTML);
        $('.overlayDiv').addClass("overlayActive");
        $('.overlayDiv').removeClass("overlayInactive");
    } else {
        var container = d3.select('.overlayDiv');
        container.empty();
        $('.overlayDiv').hide();
        $('.overlayDiv').text("");
        $('.overlayDiv').removeClass("overlayActive");
        $('.overlayDiv').addClass("overlayInactive");
    }
}

如何改善这一点并达到纽约时报的效果？

Answer 1

您只能使用css来实现此效果。

CodePen：http://codepen.io/hunzaboy/pen/qrRpzZ

body {
  background: #444;
}

.items {
  height: 128px;
  /*change this as per your requirments */
  overflow: hidden;
  display: flex;
}

.item {
  box-shadow: inset 0 0 0 1px #000;
  align-items: center;
  transition: flex 0.2s;
  background-size: cover;
  background-position: center;
  flex: 1;
}

$class-slug: item !default;
@for $i from 1 through 20 {
  .#{$class-slug}-#{$i} {
    background-image: url("https://randomuser.me/api/portraits/women/#{$i}.jpg");
  }
}


/* Flex Items */

.item>* {
  /*   flex: 1 0 auto; */
}

.item:hover {
  flex: 3;
}

.item:hover ~ .item {
  flex: 2;
}

CSS的笛卡尔失真效果

1 个答案: