mouse over droop on item item

Хорошо, пожалуйста, несите меня, поскольку это путает меня, чтобы объяснить, как это может быть для вас, ребята, чтобы понять ... но!mouse over droop on item item

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

example И свисать должен следовать курсор при наведении курсора на области ИТС.

У меня есть jsfiddle из очень и очень сырой идеей. ..

jsfiddle codesnippet:

$(document) 
.mousemove(function(e){ 
    $(".image").css({left:e.pageX-75, top:e.pageY-31}); 
});

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

Надежды люди могут помочь!

Энди

источник

2015-03-06 Andrew Gordon

СММ Я хотел бы попробовать, что с SVG: D вот это мило [Учебник] (HTTP://tutorials.jenkov.com/svg/path-element.html), надеюсь, это поможет – ZetCoby

awwwww человек ... это означает, что идее нужно научиться анимировать точки svg при перемещении мыши ... хотя я могу видеть, что только действительно нужно анимировать одну точку ... может дать понять, как я нахожусь. Ive получил некоторое время, чтобы убить lol –

удачи :) Да, я знаю, что это займет ua пока, но в конце это будет гладко и безупречно, также в будущем вы будете знать svg, ну, по крайней мере, есть идеи о том, как используйте его: D – ZetCoby

Я сделал это CodePen он не является совершенным, но это должно дать вам общее представление о том, я своего рода сделал в спешке, извините за это

var divPos = {}; 
$("svg").mousemove(function(e){ 
    var position = $(this).offset(); 
    divPos = { 
     left: e.pageX - position.left, 
     top: e.pageY - position.top 
    }; 
    var d = $(this).children('path').attr('d'); 
    var q = d.split(','); 
    var q2 = q[1].split(" "); 
    var qX = divPos.left; 
    var qY = divPos.top; 
    var dRebuild = q[0]+",Q"+qX+" "+qY+","+q[2]; 
    var svgParent = $(this); 
    svgParent.children('path').attr('d',dRebuild+" "); 
    $(this).mouseleave(function(){ 
    dRebuild = q[0]+",Q0 0,"+q[2]; 
    svgParent.children('path').attr('d',dRebuild+" "); 
    }); 
});

источник

2015-03-06 18:54:38 ZetCoby

genuinelly потрясающий, спасибо за это! я буду играть с этим сегодня, чтобы получить дымку от мыши, но кроме этого я не могу поблагодарить вас! : D –

Я рад, что смог помочь :) – ZetCoby

ли и хотят, чтобы показать изогнутый дизайн на мышь, а мы парить меню ?.

$(document).mousemove(function(e){

мыши парения эффект будет применяться полный document.change этого в меню DIV

Html:

<div id="menuitem"> 
<img class="image" src="http://staging.tradeinchecker.com/andydev/w1t/drip.png"/> 
Home</div>

JavaScript:

$("#menuitem").mousemove(function(e){ 
$(".image").css({left:e.pageX-75});});

попробовать этот

источник

2015-03-06 12:40:17

mousemove для изображения только на самом деле для примера того, что я хочу. Он должен быть жидким, поэтому лучшим вариантом будет анимация SVG, которая упоминалась как комментарий. Опять же, его трудно объяснить, что я на самом деле после, но я не буду использовать изображение lol –

см. Эту ссылку.https: //css-tricks.com/examples/ShapesOfCSS/ на этой странице разные формы, это может помочь вам. Посмотрите на фигуру, затем играйте с помощью css. –

, вы не сможете делать то, что я пытаюсь сделать с помощью css-фигур, поскольку они слишком жестки элемента.К сожалению, они не могут манипулировать положением мыши. Спасибо, хотя! –

mouse over droop on item item

ответ

Смежные вопросы