javascript - 如何制作检测转换 : translate3d style 的 If

Question

我想写一个条件语句来检测一个 div 是否少于“transform”:“translate3d(-650px,0,0)”。 div 是这样的:

<div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: 0.25s; width: 1055px; padding-left: 40px; padding-right: 40px;"></div>

我找不到正确的写法。这不起作用:

if ($(".owl-stage").css("transform") <= "translate3d(-650px, 0px, 0px)"){
   console.log("hello");
 }

Answer 1

如果你想检查 abscissa两个值中的较小者，则尝试

function getAbcissa(translate3dValue) {
  var value = translate3dValue.indexOf("matrix") != -1 ? parseInt(translate3dValue.split(",")[4]) : Number(translate3dValue.match(/((-?)\d+(?=px))/g)[0]);
  return value;
}

if ( getAbcissa($(".owl-stage").css("transform")) <= getAbcissa("translate3d(-650px, 0px, 0px)")){
   console.log("hello");
 }

tx

Is a representing the abscissa of the translating vector.

演示

function getAbcissa(translate3dValue) {
  var value = translate3dValue.indexOf("matrix") != -1 ? parseInt(translate3dValue.split(",")[4]) : Number(translate3dValue.match(/((-?)\d+(?=px))/g)[0]);
  return value;
}

if (getAbcissa($(".owl-stage").css("transform")) <= getAbcissa("translate3d(-650px, 0px, 0px)")) {
  console.log("hello");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="owl-stage" style="transform: translate3d(-800px, 0px, 0px); transition: 0.25s; width: 1055px; padding-left: 40px; padding-right: 40px;"></div>