Сдвигающиеся под курсором ссылки
В данной теме мы Вам расскажем, как сделать простые ссылки, которые будут плавно сдвигаться в сторону при наведении на них курсора мышки.
Для наглядного примера работы предлагаемого скрипта создания сдвигающихся ссылок, обратите внимание на ссылки, расположенные ниже. При наведении курсора мышки на одну из ссылок, она плавно сдвинется вправо на указанное значение.
Для создания на Вашей страничке подобных сдвигающихся ссылок Вам необходимо будет подключить библиотеку jQuery. Данная библиотека отвечает за "отлов" наведения курсора мышки на ссылки и за плавность их смещения. Подключается библиотека jQuery следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>После того, как Вы подключили библиотеку jQuery, необходимо на Вашу страничку добавить JavaScript код, в котором Вы сможете изменять скорость смещения ссылок и расстояние, на которое они будут смещаться при наведении на них курсора мышки:
<script type="text/javascript">
$(document).ready(function(){
$(".link").mouseenter(function(){$(this).animate({ padding: '0 0 0 30px' }, 300)});
$(".link").mouseleave(function(){$(this).animate({ padding: '0' }, 300)});
});
</script>Ко всем ссылкам, к которым необходимо применить эффект смещения, стоит добавить класс link. Оформлять подобные ссылки рекомендуется следующим образом:
<p><a class="link" href="http://usefulscript.ru/">Двигающаяся ссылка № 1</a></p>
<p><a class="link" href="http://usefulscript.ru/">Двигающаяся ссылка № 2</a></p>
<p><a class="link" href="http://usefulscript.ru/">Двигающаяся ссылка № 3</a></p>В результате использования такого нехитрого кода можно создать ссылки, которые по сравнению с обычными будут выглядеть гораздо привлекательнее, а сайт станет чуточку "живее".
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Но, в любом случае, вы можете отправить нам пример Вашего решения, и мы на него посмотрим.
P.S. Решение, присланное нам Алексеем, действительно работает и заслуживает внимания.
Сделал по этому поводу отдельную тему - Сдвигающиеся под курсором ссылки (при помощи CSS).