Мышь зависла с ванильным JS вместо jQuery - PullRequest
Новая
       17

Мышь зависла с ванильным JS вместо jQuery

0 голосов
/ 11 февраля 2019

Я обычно привык к jQuery, но я пытаюсь написать более низкий скрипт как классический ванильный JS.Предполагается увеличить элемент при наведении курсора.Похоже, я делаю что-то не так, потому что это не работает, когда я использую мышь для наведения элемента.Помогите разобраться, где я совершаю ошибку. 

<script>
window.onload = function() {
var calcal = document.getElementById("calcal");
TweenMax.to(".slvun, .slvanj, .rndbtn", 8, {opacity:1, delay:6});
TweenMax.to(".slvun", 32, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
TweenMax.to(".slvanj", 22, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
var ttt = new TimelineMax({repeat:-1});
ttt.to(".rndbtn", 2, {fill: '#F15D2E'})
ttt.to(".rndbtn", 2, {fill: '#EEBC27'}, "+=1")
ttt.to(".rndbtn", 2, {fill: '#8DC641'}, "+=1")
ttt.to(".rndbtn", 2, {fill: '#F15D2E'}, "+=1")

const buttonTL = new TimelineMax({paused: true, reversed: true})
  buttonTL.to('.rndbtn', .2, {scale: 5.0, transformOrigin:"50% 50%", opacity: 1, ease: Back.easeOut.config(1.7)})


calcal.onMouseOver = function(){
  buttonTL.reversed() ? buttonTL.restart() : buttonTL.reverse();
};
}
</script>

Ответы [ 3 ]

0 голосов
/ 11 февраля 2019

Попробуйте добавить addEventListener.Это должно сделать свое дело.Вам нужно добавить указатель мыши и указатель мыши. 

var hover = false;
document.getElementById("clickmebtn").addEventListener("mouseover", function( event ) {
 console.log('called on hover'); //just to make sure the function is getting called   
  if(!hover) {
    buttonTL.reversed() ? buttonTL.restart() : buttonTL.reverse();
  }
  hover = true;

  }, false);
document.getElementById("clickmebtn").addEventListener("mouseleave", function( event ) {
 console.log('called on dhjhhhjs'); //just to make sure the function is getting called   
  hover = false;
  buttonTL.reversed() ? buttonTL.restart() : buttonTL.reverse();

  }, false);

Вот пример https://codepen.io/anon/pen/omqmNx

Для получения дополнительной ссылки https://developer.mozilla.org/en-US/docs/Web/Events/mouseover

0 голосов
/ 11 февраля 2019

Вот решение.Но проблема в том, что это рывки, если вы перемещаете мышь на clickmebtn, так как есть промежутки между текстом «щелкни здесь», «напомни мне» и цветным кружком.Вы должны это исправить (например, положить целое clickmebtn внутри div и div s hover run function mouseOver).Но вы можете начать с этого кода ниже: 

// TweenMax.to(".innerletters, .outerletters, .roundbutton", 8, {opacity:1, delay:0});
// TweenMax.to(".innerletters", 32, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
// TweenMax.to(".outerletters", 22, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
// var ttt = new TimelineMax({repeat:-1});
// ttt.to(".roundbutton", 2, {fill: '#F15D2E'})
// ttt.to(".roundbutton", 2, {fill: '#EEBC27'}, "+=1")
// ttt.to(".roundbutton", 2, {fill: '#8DC641'}, "+=1")
// ttt.to(".roundbutton", 2, {fill: '#F15D2E'}, "+=1")

// const buttonTL = new TimelineMax({paused: true, reversed: true})
// buttonTL.to('.roundbutton', .2, {scale: 4.8, transformOrigin:"50% 50%", opacity: 1, ease: Back.easeOut.config(1.7)});

// $('#clickmebtn').hover(function () {
//   buttonTL.reversed() ? buttonTL.restart() : buttonTL.reverse();
// });

window.onload = function() {
    document.getElementById("clickmebtn").addEventListener("mouseover", mouseOver);
    TweenMax.to(".innerletters, .outerletters, .roundbutton", 8, {opacity:1, delay:0});
    TweenMax.to(".innerletters", 32, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
    TweenMax.to(".outerletters", 22, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
    var ttt = new TimelineMax({repeat:-1});
    ttt.to(".roundbutton", 2, {fill: '#F15D2E'})
    ttt.to(".roundbutton", 2, {fill: '#EEBC27'}, "+=1")
    ttt.to(".roundbutton", 2, {fill: '#8DC641'}, "+=1")
    ttt.to(".roundbutton", 2, {fill: '#F15D2E'}, "+=1")

    const buttonTL = new TimelineMax({paused: true, reversed: true})
      buttonTL.to('.roundbutton', .2, {scale: 4.8, transformOrigin:"50% 50%", opacity: 1, ease: Back.easeOut.config(1.7)})

    function mouseOver(){
      buttonTL.reversed() ? buttonTL.restart() : buttonTL.reverse();
    };
}
#clickmebtn {
  width:10%;
  overflow:visible;
}
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="clickmebtn" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 82.98 84.77" style="enable-background:new 0 0 82.98 84.77;" xml:space="preserve">
<style type="text/css">
    .roundbutton{fill:#F15D2E;opacity:0;}
  .innerletters{fill:#000000; opacity:0;}
  .outerletters{fill:#000000; opacity:0;}
  #clickmebtn { overflow: visible !important;}
</style>
  <circle class="roundbutton" cx="41.9" cy="41.59" r="9.76"/>
<g class="innerletters">
    <path d="M36.28,23.82l-1.25-6.77l2.86-0.53c0.29-0.05,0.57-0.04,0.84,0.04c0.27,0.08,0.51,0.2,0.72,0.37
        c0.21,0.17,0.4,0.37,0.54,0.6c0.15,0.24,0.24,0.48,0.29,0.75c0.05,0.25,0.05,0.49,0.02,0.73c-0.03,0.24-0.1,0.46-0.19,0.67
        c-0.1,0.21-0.23,0.39-0.39,0.54c-0.16,0.16-0.35,0.28-0.57,0.37l2.14,2.31l-0.75,0.14l-2.06-2.2l-2,0.37l0.46,2.5L36.28,23.82z
         M36.37,20.61l2.21-0.41c0.2-0.04,0.37-0.11,0.52-0.23c0.15-0.12,0.26-0.26,0.35-0.42S39.6,19.2,39.63,19
        c0.03-0.2,0.03-0.4-0.01-0.6c-0.04-0.2-0.11-0.39-0.22-0.57c-0.11-0.17-0.24-0.32-0.39-0.44c-0.15-0.12-0.32-0.2-0.5-0.25
        c-0.18-0.05-0.37-0.06-0.55-0.03l-2.16,0.4L36.37,20.61z"/>
    <path d="M46.76,22.94l-0.07,0.6l-4.59-0.55l0.83-6.84l4.51,0.54l-0.07,0.6l-3.83-0.46l-0.3,2.47l3.34,0.4l-0.07,0.57l-3.34-0.4
        l-0.32,2.61L46.76,22.94z"/>
    <path d="M52.85,26.42l2.61-5.02l-4.25,2.72l-0.35-0.18l-0.21-5.04l-2.61,5.02l-0.6-0.31l3.18-6.11l0.62,0.32l0.21,5.42l4.58-2.93
        l0.61,0.32l-3.18,6.11L52.85,26.42z"/>
    <path d="M54.3,27.84L59,22.8l0.5,0.46l-4.7,5.03L54.3,27.84z"/>
    <path d="M60.99,26.64l-4.72,3.06l-0.37-0.57l5.78-3.74l0.28,0.44l-2.33,6.94l4.8-3.11l0.37,0.57l-5.77,3.74l-0.32-0.5L60.99,26.64z
        "/>
    <path d="M59.44,35.09l6.73-1.47l0.5,2.28c0.12,0.54,0.13,1.03,0.04,1.47c-0.09,0.44-0.26,0.83-0.5,1.16
        c-0.24,0.33-0.56,0.61-0.93,0.84c-0.38,0.22-0.8,0.39-1.26,0.49c-0.51,0.11-0.99,0.14-1.44,0.07s-0.85-0.2-1.2-0.42
        c-0.35-0.22-0.66-0.51-0.9-0.87s-0.42-0.79-0.53-1.28L59.44,35.09z M63.87,39.2c0.4-0.09,0.76-0.23,1.08-0.41
        c0.31-0.19,0.57-0.42,0.77-0.69c0.2-0.27,0.33-0.58,0.4-0.93c0.07-0.35,0.06-0.72-0.03-1.13l-0.35-1.62l-5.55,1.21l0.35,1.62
        c0.09,0.42,0.24,0.77,0.45,1.06s0.47,0.51,0.76,0.67c0.3,0.16,0.63,0.26,0.99,0.3C63.09,39.31,63.48,39.29,63.87,39.2z"/>
    <path d="M58.86,49.52l5.42,1.63l-3.46-3.67l0.11-0.38l4.91-1.15l-5.42-1.63l0.2-0.65l6.59,1.98l-0.2,0.67l-5.29,1.21l3.73,3.95
        l-0.2,0.66l-6.6-1.98L58.86,49.52z"/>
    <path d="M55.59,55.17l-0.48-0.36l2.8-3.68l5.48,4.17l-2.75,3.61l-0.48-0.36l2.34-3.07l-1.98-1.5l-2.04,2.68l-0.46-0.35l2.04-2.68
        l-2.09-1.59L55.59,55.17z"/>
    <path d="M52.89,60.51c-0.13-0.21-0.17-0.43-0.12-0.66c0.05-0.23,0.18-0.41,0.38-0.54c0.2-0.13,0.42-0.17,0.66-0.12
        c0.23,0.05,0.42,0.18,0.55,0.39c0.06,0.1,0.1,0.2,0.12,0.31c0.02,0.11,0.01,0.22-0.01,0.33c-0.02,0.11-0.07,0.21-0.14,0.31
        c-0.07,0.1-0.15,0.17-0.25,0.24c-0.1,0.06-0.2,0.1-0.32,0.12s-0.23,0.02-0.33-0.01c-0.11-0.03-0.21-0.07-0.3-0.13
        C53.03,60.69,52.95,60.61,52.89,60.51z"/>
    <path d="M47.86,59.26l1.36,6.75l-2.85,0.57c-0.29,0.06-0.57,0.05-0.84-0.02c-0.27-0.07-0.51-0.19-0.73-0.36s-0.4-0.36-0.55-0.6
        s-0.25-0.48-0.3-0.74c-0.05-0.25-0.06-0.49-0.03-0.73c0.03-0.24,0.09-0.46,0.18-0.67c0.09-0.21,0.22-0.39,0.38-0.55
        s0.35-0.29,0.57-0.38l-2.18-2.27l0.75-0.15l2.09,2.17l2-0.4l-0.5-2.49L47.86,59.26z M47.81,62.48l-2.21,0.44
        c-0.2,0.04-0.37,0.12-0.51,0.24s-0.26,0.26-0.34,0.43c-0.08,0.17-0.14,0.35-0.17,0.55c-0.03,0.2-0.02,0.4,0.02,0.6
        c0.04,0.2,0.12,0.39,0.23,0.56c0.11,0.17,0.24,0.32,0.39,0.43c0.15,0.11,0.32,0.2,0.5,0.25c0.18,0.05,0.37,0.05,0.55,0.02
        l2.15-0.43L47.81,62.48z"/>
    <path d="M37.39,60.31l0.06-0.6l4.6,0.48l-0.72,6.85l-4.51-0.47l0.06-0.6l3.84,0.4l0.26-2.47l-3.35-0.35l0.06-0.57l3.35,0.35
        l0.27-2.61L37.39,60.31z"/>
    <path d="M31.24,56.92l-2.53,5.06l4.21-2.79l0.36,0.18l0.29,5.04l2.53-5.06l0.61,0.3l-3.08,6.16l-0.62-0.31l-0.29-5.42l-4.53,3
        l-0.62-0.31l3.08-6.16L31.24,56.92z"/>
    <path d="M29.79,55.54l-4.62,5.11l-0.5-0.46l4.62-5.11L29.79,55.54z"/>
    <path d="M23.12,56.84l4.67-3.14l0.38,0.56l-5.72,3.84l-0.29-0.44l2.22-6.98l-4.75,3.19l-0.38-0.56l5.71-3.83l0.33,0.49L23.12,56.84
        z"/>
    <path d="M24.52,48.36l-6.71,1.57l-0.53-2.28c-0.13-0.54-0.15-1.02-0.06-1.46c0.08-0.44,0.24-0.83,0.48-1.17
        c0.24-0.34,0.55-0.62,0.92-0.85s0.79-0.4,1.25-0.51c0.51-0.12,0.99-0.15,1.44-0.1c0.45,0.05,0.85,0.19,1.21,0.4
        c0.36,0.21,0.66,0.5,0.92,0.85c0.25,0.36,0.44,0.78,0.55,1.27L24.52,48.36z M20.02,44.32c-0.4,0.09-0.76,0.24-1.07,0.43
        c-0.31,0.19-0.56,0.43-0.76,0.7c-0.19,0.27-0.32,0.59-0.38,0.93c-0.06,0.35-0.04,0.72,0.05,1.13l0.38,1.62l5.53-1.3l-0.38-1.61
        c-0.1-0.42-0.25-0.77-0.47-1.05c-0.22-0.28-0.47-0.5-0.77-0.66c-0.3-0.16-0.63-0.25-0.99-0.28C20.8,44.19,20.42,44.22,20.02,44.32z
        "/>
    <path d="M24.87,33.94l-5.44-1.54l3.53,3.61l-0.11,0.38l-4.89,1.23l5.44,1.54l-0.18,0.65l-6.63-1.87l0.19-0.67l5.27-1.31l-3.8-3.89
        l0.19-0.66l6.63,1.87L24.87,33.94z"/>
    <path d="M28.07,28.21l0.48,0.36l-2.75,3.72l-5.54-4.09l2.7-3.65l0.48,0.36l-2.29,3.11l2,1.48l2-2.71l0.46,0.34l-2,2.71l2.11,1.56
        L28.07,28.21z"/>
    <path d="M30.65,22.85c0.14,0.21,0.18,0.42,0.13,0.66c-0.05,0.23-0.17,0.42-0.37,0.55c-0.2,0.13-0.42,0.17-0.65,0.13
        c-0.24-0.05-0.42-0.17-0.56-0.38c-0.06-0.1-0.11-0.2-0.12-0.31s-0.02-0.22,0.01-0.33s0.07-0.22,0.13-0.31
        c0.06-0.1,0.15-0.18,0.24-0.24c0.1-0.06,0.2-0.11,0.32-0.13c0.11-0.02,0.23-0.02,0.33,0.01s0.21,0.07,0.31,0.13
        S30.59,22.75,30.65,22.85z"/>
</g>
<g class="outerletters">
    <path d="M30.44,6.85c-0.1-0.4-0.13-0.82-0.09-1.25s0.16-0.84,0.35-1.22c0.19-0.38,0.46-0.72,0.81-1.02
        c0.35-0.3,0.77-0.51,1.27-0.63c0.6-0.15,1.14-0.14,1.63,0.02c0.49,0.16,0.89,0.44,1.2,0.82l-0.44,0.45
        c-0.16-0.19-0.34-0.35-0.53-0.46c-0.19-0.11-0.39-0.19-0.59-0.24c-0.2-0.05-0.4-0.07-0.6-0.07c-0.2,0.01-0.39,0.03-0.57,0.08
        c-0.4,0.1-0.74,0.27-1,0.51c-0.27,0.24-0.47,0.52-0.62,0.83c-0.14,0.32-0.23,0.65-0.25,1.01s0.01,0.7,0.09,1.04
        c0.09,0.37,0.25,0.71,0.46,1.02c0.21,0.31,0.46,0.56,0.75,0.77c0.29,0.2,0.6,0.35,0.95,0.42C33.61,9,33.96,9,34.32,8.91
        c0.19-0.05,0.38-0.12,0.56-0.21c0.19-0.1,0.36-0.22,0.52-0.37c0.16-0.15,0.3-0.32,0.42-0.51s0.2-0.41,0.26-0.66l0.62,0.15
        c-0.04,0.28-0.14,0.54-0.29,0.78c-0.15,0.24-0.32,0.46-0.53,0.65c-0.21,0.19-0.43,0.35-0.68,0.49c-0.25,0.14-0.5,0.24-0.76,0.3
        c-0.46,0.11-0.9,0.12-1.34,0.01c-0.43-0.1-0.83-0.28-1.18-0.54c-0.36-0.25-0.66-0.57-0.92-0.94C30.73,7.67,30.55,7.27,30.44,6.85z"
        />
    <path d="M38.64,8.67l-0.32-6.88L39,1.76l0.29,6.28l3.97-0.18l0.03,0.6L38.64,8.67z"/>
    <path d="M44.75,8.65l0.61-6.86l0.68,0.06l-0.61,6.86L44.75,8.65z"/>
    <path d="M48.03,5.41c0.1-0.4,0.27-0.78,0.51-1.15s0.53-0.67,0.88-0.92s0.74-0.42,1.19-0.52c0.44-0.1,0.92-0.09,1.42,0.03
        c0.6,0.15,1.07,0.41,1.43,0.78s0.58,0.8,0.68,1.29l-0.6,0.19c-0.05-0.25-0.14-0.46-0.25-0.65c-0.12-0.19-0.25-0.35-0.4-0.49
        c-0.15-0.14-0.32-0.25-0.5-0.34c-0.18-0.09-0.36-0.15-0.54-0.2c-0.4-0.1-0.78-0.1-1.12-0.02c-0.35,0.09-0.66,0.24-0.93,0.45
        c-0.28,0.21-0.51,0.47-0.69,0.77c-0.19,0.3-0.32,0.62-0.41,0.96c-0.09,0.37-0.11,0.74-0.07,1.11s0.15,0.71,0.31,1.03
        c0.16,0.32,0.37,0.59,0.64,0.82c0.27,0.23,0.58,0.39,0.94,0.48c0.19,0.05,0.39,0.07,0.6,0.07c0.21,0,0.42-0.03,0.63-0.08
        c0.21-0.06,0.41-0.15,0.61-0.26S52.7,8.5,52.86,8.3l0.48,0.42c-0.17,0.23-0.37,0.41-0.62,0.55c-0.24,0.14-0.5,0.25-0.77,0.33
        s-0.55,0.11-0.83,0.12c-0.28,0-0.55-0.03-0.81-0.09c-0.46-0.11-0.85-0.32-1.19-0.61s-0.6-0.64-0.8-1.03
        c-0.2-0.39-0.32-0.81-0.37-1.26C47.9,6.27,47.92,5.84,48.03,5.41z"/>
    <path d="M54.4,10.82l2.99-6.2l0.61,0.29l-1.73,3.6l5.16-1.96l0.67,0.32l-3.85,1.5l0.99,4.76l-0.67-0.32l-0.87-4.26l-1.76,0.65
        l-0.92,1.9L54.4,10.82z"/>
    <path d="M71.33,14.25l-4.7,5.03l-0.49-0.46l2.2-2.35l-2.98-2.79l-2.2,2.35l-0.5-0.46l4.7-5.03l0.5,0.46l-2.09,2.24l2.98,2.79
        l2.09-2.24L71.33,14.25z"/>
    <path d="M71.11,24.36l-0.49,0.34l-2.65-3.79l5.64-3.95l2.6,3.72l-0.49,0.34l-2.21-3.16l-2.03,1.42l1.93,2.76l-0.47,0.33L71,19.62
        l-2.15,1.51L71.11,24.36z"/>
    <path d="M71.43,26.2l6.31-2.76l1.17,2.67c0.12,0.27,0.17,0.55,0.16,0.83s-0.08,0.54-0.19,0.79c-0.11,0.25-0.27,0.47-0.47,0.66
        c-0.2,0.2-0.42,0.35-0.66,0.45c-0.23,0.1-0.47,0.16-0.71,0.19s-0.47,0.01-0.69-0.04c-0.22-0.05-0.43-0.13-0.62-0.25
        c-0.19-0.12-0.35-0.28-0.49-0.47l-1.76,2.61l-0.31-0.7l1.68-2.5l-0.82-1.87l-2.33,1.02L71.43,26.2z M74.58,25.56l0.9,2.06
        c0.08,0.18,0.19,0.33,0.34,0.45c0.15,0.12,0.31,0.2,0.49,0.24c0.18,0.05,0.37,0.06,0.57,0.05c0.2-0.02,0.39-0.06,0.58-0.15
        c0.19-0.08,0.36-0.2,0.5-0.34c0.15-0.15,0.26-0.3,0.34-0.48c0.08-0.17,0.12-0.35,0.13-0.54c0.01-0.19-0.02-0.37-0.1-0.54
        l-0.88-2.01L74.58,25.56z"/>
    <path d="M75.48,36.84l-0.59,0.13l-0.98-4.52l6.73-1.46l0.96,4.44l-0.59,0.13l-0.82-3.77l-2.43,0.53l0.71,3.29l-0.56,0.12
        l-0.71-3.29l-2.57,0.56L75.48,36.84z"/>
    <path d="M78.41,43.54c-0.25-0.01-0.45-0.1-0.61-0.27c-0.16-0.17-0.24-0.38-0.23-0.62c0.01-0.24,0.1-0.44,0.27-0.61
        c0.17-0.17,0.38-0.25,0.63-0.24c0.12,0,0.23,0.03,0.33,0.08c0.1,0.05,0.19,0.11,0.27,0.2c0.08,0.08,0.14,0.18,0.18,0.29
        c0.04,0.11,0.06,0.22,0.06,0.34c0,0.12-0.03,0.23-0.08,0.33c-0.05,0.1-0.11,0.2-0.2,0.27c-0.08,0.08-0.18,0.13-0.28,0.18
        C78.64,43.53,78.53,43.55,78.41,43.54z"/>
    <path d="M77.91,49.15c0.4,0.12,0.77,0.31,1.12,0.56s0.64,0.56,0.87,0.92c0.23,0.36,0.38,0.76,0.46,1.21
        c0.08,0.45,0.04,0.92-0.1,1.42c-0.18,0.59-0.46,1.05-0.85,1.39s-0.83,0.54-1.32,0.61l-0.16-0.61c0.25-0.04,0.47-0.11,0.66-0.22
        c0.19-0.11,0.36-0.23,0.51-0.38c0.14-0.15,0.26-0.31,0.36-0.48s0.17-0.35,0.22-0.53c0.12-0.4,0.14-0.77,0.07-1.12
        c-0.07-0.35-0.21-0.67-0.4-0.96s-0.44-0.53-0.74-0.73c-0.29-0.2-0.61-0.35-0.94-0.45c-0.37-0.11-0.73-0.15-1.11-0.12
        c-0.37,0.03-0.72,0.11-1.04,0.26c-0.32,0.14-0.6,0.34-0.85,0.6c-0.24,0.26-0.42,0.56-0.52,0.91c-0.06,0.19-0.09,0.38-0.1,0.59
        s0.01,0.42,0.05,0.63c0.05,0.21,0.12,0.42,0.23,0.62c0.11,0.2,0.25,0.39,0.44,0.56l-0.44,0.46c-0.22-0.18-0.39-0.39-0.52-0.64
        c-0.13-0.25-0.23-0.51-0.29-0.78c-0.06-0.27-0.08-0.55-0.07-0.84c0.01-0.28,0.05-0.55,0.13-0.81c0.13-0.45,0.36-0.84,0.67-1.16
        s0.67-0.57,1.07-0.74c0.4-0.18,0.83-0.28,1.28-0.31S77.49,49.02,77.91,49.15z"/>
    <path d="M72.16,55.27l6.08,3.24l-0.32,0.6l-5.55-2.96l-1.87,3.51l-0.53-0.28L72.16,55.27z"/>
    <path d="M69.04,60.56l5.58,4.04l-0.4,0.55l-5.58-4.04L69.04,60.56z"/>
    <path d="M70.16,65.01c0.29,0.29,0.54,0.63,0.73,1.02c0.19,0.39,0.3,0.8,0.34,1.23c0.04,0.42-0.02,0.85-0.16,1.29
        c-0.14,0.43-0.39,0.83-0.76,1.2c-0.43,0.44-0.9,0.71-1.4,0.83c-0.5,0.12-0.99,0.09-1.45-0.07l0.14-0.61
        c0.24,0.08,0.47,0.12,0.69,0.12c0.22,0,0.43-0.04,0.63-0.1c0.2-0.06,0.38-0.15,0.54-0.25c0.17-0.11,0.31-0.23,0.45-0.36
        c0.29-0.29,0.49-0.61,0.59-0.96c0.1-0.34,0.13-0.69,0.09-1.03c-0.04-0.35-0.14-0.68-0.31-0.99c-0.16-0.32-0.37-0.6-0.62-0.84
        c-0.27-0.27-0.58-0.48-0.92-0.63c-0.34-0.15-0.69-0.24-1.04-0.26c-0.35-0.02-0.69,0.02-1.03,0.13s-0.63,0.3-0.89,0.56
        c-0.14,0.14-0.26,0.3-0.37,0.48s-0.19,0.37-0.25,0.58c-0.06,0.21-0.09,0.43-0.09,0.66c0,0.23,0.04,0.46,0.13,0.7l-0.6,0.2
        c-0.11-0.26-0.16-0.53-0.16-0.81c0-0.28,0.04-0.56,0.11-0.83s0.18-0.53,0.33-0.77c0.14-0.25,0.31-0.46,0.49-0.65
        c0.33-0.34,0.71-0.57,1.13-0.71c0.42-0.14,0.85-0.19,1.29-0.16c0.44,0.03,0.86,0.14,1.27,0.32C69.48,64.46,69.84,64.7,70.16,65.01z
        "/>
    <path d="M62.24,67.73l3.81,5.73l-0.57,0.38l-2.21-3.33l-0.94,5.44l-0.62,0.41l0.67-4.08l-4.6-1.58l0.62-0.41l4.11,1.42l0.34-1.84
        l-1.17-1.76L62.24,67.73z"/>
    <path d="M50.67,80.54l-1.92-6.61l0.64-0.19l0.9,3.09l3.92-1.14l-0.9-3.09l0.65-0.19l1.92,6.61l-0.65,0.19l-0.86-2.94l-3.92,1.14
        l0.86,2.94L50.67,80.54z"/>
    <path d="M42.08,75.17l-0.04-0.6l4.61-0.34l0.5,6.87l-4.53,0.33l-0.04-0.6l3.85-0.28l-0.18-2.48l-3.36,0.25l-0.04-0.57l3.36-0.24
        l-0.19-2.62L42.08,75.17z"/>
    <path d="M40.35,74.5l-0.84,6.83l-2.89-0.36c-0.3-0.04-0.56-0.13-0.79-0.29c-0.23-0.16-0.42-0.35-0.58-0.57s-0.27-0.47-0.33-0.74
        c-0.07-0.27-0.09-0.54-0.05-0.8c0.03-0.25,0.1-0.49,0.2-0.7c0.1-0.22,0.23-0.41,0.38-0.58c0.15-0.17,0.33-0.3,0.53-0.4
        s0.42-0.16,0.66-0.18l-1.35-2.84l0.76,0.09l1.3,2.72l2.02,0.25l0.31-2.52L40.35,74.5z M39.3,77.54l-2.23-0.27
        c-0.2-0.03-0.39,0-0.56,0.06c-0.17,0.07-0.33,0.17-0.46,0.3c-0.13,0.13-0.24,0.29-0.33,0.47c-0.09,0.18-0.14,0.37-0.17,0.57
        c-0.03,0.21-0.01,0.41,0.04,0.61c0.05,0.2,0.13,0.38,0.24,0.53c0.11,0.16,0.24,0.29,0.4,0.39c0.16,0.11,0.33,0.17,0.52,0.19
        l2.18,0.27L39.3,77.54z"/>
    <path d="M29.14,72.57l0.19-0.57l4.39,1.46l-2.17,6.54l-4.31-1.43l0.19-0.57l3.66,1.22l0.78-2.36l-3.19-1.06l0.18-0.54l3.19,1.06
        l0.83-2.5L29.14,72.57z"/>
    <path d="M21.85,71.65c0.13-0.21,0.31-0.34,0.55-0.39c0.23-0.05,0.45-0.01,0.65,0.12c0.2,0.13,0.33,0.31,0.38,0.54
        c0.05,0.23,0.01,0.45-0.12,0.66c-0.06,0.1-0.14,0.18-0.24,0.24c-0.09,0.06-0.2,0.11-0.31,0.13s-0.22,0.03-0.34,0.01
        c-0.11-0.02-0.22-0.06-0.32-0.12c-0.1-0.06-0.18-0.14-0.25-0.24s-0.11-0.2-0.13-0.31c-0.02-0.11-0.02-0.22-0.01-0.33
        S21.79,71.75,21.85,71.65z"/>
    <path d="M17.3,68.35c-0.3,0.28-0.66,0.51-1.06,0.68c-0.4,0.17-0.81,0.26-1.24,0.28s-0.85-0.06-1.28-0.22
        c-0.43-0.16-0.81-0.43-1.16-0.81c-0.42-0.45-0.67-0.93-0.76-1.44c-0.09-0.51-0.04-0.99,0.15-1.45l0.6,0.17
        c-0.09,0.23-0.14,0.46-0.15,0.68c-0.01,0.22,0.02,0.43,0.07,0.63s0.13,0.38,0.23,0.56c0.1,0.17,0.21,0.33,0.34,0.46
        c0.28,0.3,0.59,0.52,0.93,0.64s0.68,0.17,1.03,0.14c0.35-0.02,0.68-0.11,1.01-0.26c0.32-0.15,0.61-0.34,0.87-0.58
        c0.28-0.26,0.5-0.55,0.67-0.89s0.27-0.68,0.31-1.03s0.01-0.69-0.08-1.03c-0.1-0.34-0.27-0.64-0.52-0.91
        c-0.13-0.14-0.28-0.27-0.46-0.39c-0.17-0.12-0.36-0.21-0.57-0.28c-0.21-0.07-0.42-0.11-0.65-0.12s-0.46,0.02-0.7,0.09l-0.17-0.61
        c0.26-0.09,0.54-0.13,0.82-0.12c0.28,0.01,0.55,0.07,0.82,0.15c0.27,0.09,0.52,0.21,0.76,0.36c0.24,0.15,0.45,0.33,0.63,0.52
        c0.32,0.35,0.54,0.74,0.65,1.17c0.12,0.43,0.15,0.86,0.09,1.3c-0.05,0.44-0.18,0.85-0.38,1.26S17.62,68.05,17.3,68.35z"/>
    <path d="M14.98,60.3L9.1,63.88L8.75,63.3l5.37-3.27l-2.07-3.4l0.51-0.31L14.98,60.3z"/>
    <path d="M12.02,54.93L5.7,57.67l-0.27-0.62l6.32-2.74L12.02,54.93z"/>
    <path d="M7.62,53.6c-0.4,0.1-0.82,0.14-1.25,0.1c-0.43-0.04-0.84-0.15-1.23-0.34s-0.73-0.45-1.03-0.79s-0.52-0.76-0.65-1.26
        c-0.16-0.59-0.15-1.14,0-1.63c0.16-0.49,0.43-0.9,0.81-1.21l0.45,0.43c-0.19,0.16-0.34,0.34-0.45,0.53
        c-0.11,0.19-0.19,0.39-0.24,0.59s-0.07,0.4-0.06,0.6c0.01,0.2,0.04,0.39,0.08,0.57c0.1,0.4,0.28,0.73,0.52,1
        c0.24,0.26,0.52,0.47,0.84,0.61c0.32,0.14,0.65,0.22,1.01,0.24c0.36,0.02,0.7-0.01,1.04-0.1c0.37-0.1,0.71-0.25,1.01-0.47
        S9.05,52,9.25,51.71c0.2-0.29,0.34-0.61,0.41-0.95c0.07-0.34,0.06-0.69-0.03-1.05c-0.05-0.19-0.12-0.37-0.22-0.56
        c-0.1-0.19-0.22-0.36-0.38-0.51c-0.15-0.16-0.32-0.29-0.52-0.41c-0.19-0.12-0.41-0.2-0.66-0.25l0.14-0.62
        c0.28,0.04,0.54,0.13,0.78,0.28c0.24,0.14,0.46,0.32,0.65,0.52c0.19,0.2,0.36,0.43,0.5,0.68c0.14,0.25,0.24,0.5,0.31,0.76
        c0.12,0.46,0.13,0.9,0.03,1.34s-0.27,0.83-0.53,1.19c-0.25,0.36-0.56,0.67-0.93,0.93C8.44,53.31,8.04,53.49,7.62,53.6z"/>
    <path d="M9.33,45.4l-6.87,0.34l-0.03-0.68l3.99-0.2l-4.19-3.59l-0.04-0.75l3.16,2.66l3.71-3.14l0.04,0.75L5.77,43.6l1.41,1.23
        l2.11-0.1L9.33,45.4z"/>
    <path d="M4.22,28.92l6.67,1.72l-0.17,0.65l-3.12-0.8l-1.02,3.96l3.12,0.8L9.54,35.9l-6.67-1.72l0.17-0.66L6,34.29l1.02-3.96
        l-2.97-0.76L4.22,28.92z"/>
    <path d="M13.22,24.28l0.54,0.27l-2.07,4.14l-6.16-3.07l2.03-4.06l0.54,0.27l-1.72,3.45l2.22,1.11l1.5-3.01l0.51,0.26l-1.5,3.01
        l2.35,1.17L13.22,24.28z"/>
    <path d="M14.67,23.13l-5.44-4.22l1.78-2.3c0.18-0.23,0.4-0.41,0.65-0.53c0.25-0.12,0.51-0.19,0.79-0.21s0.54,0.01,0.81,0.09
        c0.27,0.08,0.5,0.2,0.71,0.36c0.2,0.15,0.37,0.33,0.5,0.53s0.24,0.41,0.3,0.63c0.06,0.22,0.09,0.44,0.07,0.66
        c-0.02,0.23-0.08,0.44-0.18,0.66l3.13,0.3l-0.47,0.61l-3-0.28l-1.25,1.61l2.01,1.56L14.67,23.13z M12.61,20.67l1.38-1.78
        c0.12-0.16,0.2-0.33,0.23-0.51c0.03-0.18,0.03-0.37-0.02-0.55c-0.05-0.18-0.12-0.36-0.23-0.52c-0.11-0.17-0.24-0.31-0.41-0.44
        c-0.16-0.13-0.34-0.22-0.54-0.28s-0.39-0.08-0.58-0.07c-0.19,0.01-0.37,0.06-0.54,0.14c-0.17,0.08-0.31,0.2-0.43,0.35l-1.34,1.73
        L12.61,20.67z"/>
    <path d="M22.09,14.47l0.39,0.45l-3.5,3.03l-4.51-5.21l3.43-2.97l0.39,0.45l-2.92,2.53l1.63,1.88l2.54-2.2l0.37,0.43l-2.54,2.2
        l1.72,1.99L22.09,14.47z"/>
    <path d="M26.57,8.67c0.11,0.22,0.13,0.44,0.05,0.67c-0.07,0.23-0.22,0.39-0.43,0.5c-0.21,0.11-0.43,0.13-0.66,0.05
        c-0.23-0.07-0.4-0.22-0.51-0.44c-0.05-0.1-0.08-0.21-0.09-0.33c-0.01-0.11,0.01-0.22,0.04-0.33c0.04-0.11,0.09-0.21,0.17-0.3
        c0.08-0.09,0.16-0.16,0.27-0.21c0.1-0.05,0.21-0.08,0.33-0.09c0.12-0.01,0.23,0.01,0.33,0.04s0.2,0.09,0.29,0.16
        C26.45,8.48,26.52,8.57,26.57,8.67z"/>
</g>
</svg>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
0 голосов
/ 11 февраля 2019

Для этого вам не нужен js, только CSS.

Скажем, у вас есть элемент с id = “elem”

CSS будет: 

#elem:hover {
    transform: scale (1.2);
}

Коэффициент масштабирования можно регулировать, пока он не увеличится по вашему вкусу

...