2

Добрый день! Скрипт обрабатывает атрибут со свойством translate. Как изменить его на margin?

$(function() {

var $win = $(window),
    $rev = $('[data-tr]'),
    winH2 = 0,
    winSt = 0;

function reveal() {

  winSt = $win.scrollTop();
  winH2 = $win.height()/2;

  $rev.each(function(i, el){
    var y = el.getBoundingClientRect().top,
        toMiddleMax = Math.max(0, y-winH2),
        idealMarg   = Math.min(+el.dataset.val, toMiddleMax),
        margMin     = Math.min(idealMarg, idealMarg * (toMiddleMax/winH2));
    $(this).css({transform: el.dataset.tr+"("+ margMin +"px)"});
  });

}
$win.on({
  "load resize scroll" : reveal
});

});

<div class="block" data-tr="translateX" data-val="300"></div>
3
  • приведенный скрипт не обрабатывает атрибут со свойством translate
    – Grundy
    26 сен 2016 в 6:53
  • но в коде data-tr="margin-left" - поэтому вопрос абсолютно непонятен
    – Grundy
    26 сен 2016 в 6:59
  • То есть у тебя был код, работающий с margin, ты его сейчас меняешь под translate и спрашиваешь как его поменять под margin?
    – Grundy
    26 сен 2016 в 7:08

1 ответ 1

2

Разница, заключается в установке нужного свойства.

Для этого надо изменить следующую строчку

$(this).css({transform: el.dataset.tr+"("+ margMin +"px)"});

margin-left является непосредственным свойством, поэтому должно указываться вместо transform, и значение соответственно без использования el.dataset.tr

В итоге, для жесткого использования margin-left нужно его и указать

$(this).css({"margin-left": margMin +"px"});

Можно сделать более общее решение, если брать название свойства непосредственно из атрибута

$(this).css({[el.dataset.tr]: margMin +"px"});
4
  • 1
    @LADYX, например то, что IE пока не может в ES6, и в вычисляемые свойства. Просто собирай этот объект отдельно, а потом просто передавай в метод css
    – Grundy
    26 сен 2016 в 10:27
  • 1
    @LADYX, var obj = {[name]: value} <=> var obj={}; obj[name]=value;
    – Grundy
    26 сен 2016 в 12:21
  • 1
    @LADYX, смотри пример в комментарии выше и найди что именно отличается от твоего
    – Grundy
    26 сен 2016 в 15:27
  • 1
    @LADYX, ну если ты посмотришь на мой предыдущий комментарий, ты как раз это и увидишь var obj={}; obj[name]=value;
    – Grundy
    26 сен 2016 в 16:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.