JQuery: отобразить img рядом с нажатой кнопкой мыши

Я пытаюсь создать функцию закладки для своего сайта, поэтому, когда кто-то нажимает «установить закладку», они нажимают на строку текста, она помещает изображение закладки слева от этой линии. (я сохраню coor в cookie, но я могу сделать это без посторонней помощи)JQuery: отобразить img рядом с нажатой кнопкой мыши

Один из способов, которым я думал о том, чтобы сделать это, когда человек нажал на строку текста в абзаце, возьмите его за Y координаты места, на который щелкнул человек, затем округлите его до ближайшего числа, делящегося на 20. Высота линии для каждого абзаца составляет 20 пикселей, поэтому, если вы округлите координаты Y вниз, вы получите верхнюю позицию для этого сингла линии внутри абзаца, который они нажали.

Поэтому я думаю, что это будет выглядеть так: когда кто-то нажимает на строку текста в абзаце, он получит индекс этого абзаца, поэтому, если это четвертый P вниз по странице, индекс будет равен 3, то он получит координаты Y, где пользователь щелкнул, затем округлите это число до ближайшего числа, делящегося на 20, затем поместите изображение слева от этого абзаца, в верхнем положении изображения будет округленная координата Y.

Может ли кто-нибудь помочь мне с этим? Я бы потерял, как вы можете увидеть:

$('p').click(function(e) { 
    var myIndex = $(this).index() 
    var myIndexTop = myIndex.top() 
    var myIndexLeft = myIndex.left() 

    var offset = $(this).offset(); 
    var y = e.pageY - this.offsetTop; 

    $('.bookMarkImg') 
     .left(myIndexLeft) 
     .top('round down to nearest num thats divisible by 20) 
OR?  
    $('.bookMarkImg') 
     .css({'left': myIndexLeft, 'top' 'round down to nearest num thats divisible by 20'}) 
})

источник

2011-01-23 android.nick

округлить до ближайшего 20:

y = Math.floor(y/20) * 20;

Кроме того, .top() и .left() не существует: вы хотите:

$(this).offset().top и $(this).offset().left для получения позиции
.css({left: ..., top: ...}) для установки их

Другое дело, что если вы хотите только один из этих закладок изображений, плавающих вокруг, в зависимости от того, где вы щелкнули, то вы, вероятно, хотите поставить <img> на <body> уровне (в конце) , и позиционируется абсолютно, поэтому он может свободно перемещаться по всему документу. Затем не надо вычитать смещение абзаца от координаты y.

Пример кода:

$('p').click(function (e) { 
    var offset = $(this).offset(); 
    var top = Math.floor(e.pageY/20) * 20; 

    $('.bookMarkImg').css({ 
     left: offset.left, 
     top: top 
    }).show(); 
});

Смотрите рабочую демо: http://jsfiddle.net/upgBa/

Примечание: Вы, возможно, придется рассмотреть любые набивка/маржинальный/границы вы имеете на пунктах и тело, хотя это может сбрасывать вычисления (просто вычтите «верхние» части этих).

источник

2011-01-23 06:51:13

awesome, я пытаюсь это прямо сейчас на моем автономном сайте, и единственная проблема, с которой я сталкиваюсь, - это отступы и разметка. Итак, все должно иметь пробел или маржу, которая делится на 20? это верно? вот страница, показывающая, что я пытаюсь исправить: http://jsfiddle.net/upgBa/2/ –

@android, ах я об этом не думал раньше. Вот исправление: http://jsfiddle.net/upgBa/3/ –

ах, ты хороший, спасибо человеку. Эй, если это не так уж сложно, как бы я изменил код, чтобы просто добавить закладку самого абзаца, а не каждую строку. было бы проще использовать .index()? или просто используя смещение, если я должен был закладок абзацев вместо закладки по строке.Мне нужно сбросить закладку с помощью печенья, когда они уйдут и вернутся, так что было бы проще или эффективнее? –

JQuery: отобразить img рядом с нажатой кнопкой мыши

ответ

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