- 22, Oct 2024
- #1
Я пытаюсь реализовать это в WordPress: https://stackoverflow.com/questions/11461913/making-axis-guide-lines-over-an-image-that-follow-the-mouse-pointer
Я создал этот скрипт в папке своей темы (/js/guidelines.js):
<div id="imageholder"> <div id="horizontal"></div> <div id="vertical"></div> <img src="https://www.elesa.com/siteassets/low/ELESA/DWG/TechData_web/AV_ACC_DIAGRAM_EN.jpg"> </div>
Добавил это в function.php:
#imageholder div{ background-color:black;position:absolute; }
#imageholder{;position:relative;display:inline-block;overflow:hidden; }
#horizontal{width:100%;height:1px;}
#vertical{width:1px;height:100%;}
И добавил CSS к дополнительному CSS в настройщике темы:
add_action( 'wp_enqueue_scripts', 'add_guidelines' );
function add_guidelines() {
wp_enqueue_script(
'guidelines', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/guidelines.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
Но когда я пытаюсь реализовать эти рекомендации на графике:
jQuery('#imageholder img').on('mousemove', null, [jQuery('#horizontal'), jQuery('#vertical')],function(e){
e.data[1].css('left', e.offsetX==undefined?e.originalEvent.layerX:e.offsetX);
e.data[0].css('top', e.offsetY==undefined?e.originalEvent.layerY:e.offsetY);
});
jQuery('#imageholder').on('mouseenter', null, [jQuery('#horizontal'), jQuery('#vertical')], function(e){
e.data[0].show();
e.data[1].show();
}).on('mouseleave', null, [jQuery('#horizontal'), jQuery('#vertical')], function(e){
e.data[0].hide();
e.data[1].hide();
});
... направляющие не являются динамическими и остаются в верхнем левом углу:
Может быть, кто-нибудь сможет мне помочь с этой проблемой.
Я не знаю, что здесь не так.
![[минаковa] Делаем Стильную Обработку Портрета В Фотошоп (2017)](/assets/images/icons/forum7.png){kind=icon}
