Здравствуйте! Подскажите, как сделать следующее? Допустим, есть набор ссылок с id=1 id=2 id=3, а также список, элементы которого содержат картинки, расположенные одна под другой. Как сделать, чтоб при наведении на ссылку соответсвующий номеру элемент списка "всплывал" на первый план, поверх остальных картинок, т.е. текущий элемент становится прозрачным, а соответсвующий ссылке - появлялся (opacity = 1.0).
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Актуальные контакты:
Telegram: @Nikker_web
E-Mail: tarasevich.email@gmail.com
Портфолио https://www.behance.net/d4d4186e
Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
Актуальные контакты:
Telegram: @Nikker_web
E-Mail: tarasevich.email@gmail.com
Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
Портфолио https://www.behance.net/d4d4186e
Question
PEOP
Здравствуйте! Подскажите, как сделать следующее? Допустим, есть набор ссылок с id=1 id=2 id=3, а также список, элементы которого содержат картинки, расположенные одна под другой. Как сделать, чтоб при наведении на ссылку соответсвующий номеру элемент списка "всплывал" на первый план, поверх остальных картинок, т.е. текущий элемент становится прозрачным, а соответсвующий ссылке - появлялся (opacity = 1.0).
Вот код
<div id="links">
<a href="" class="point" id="1">ONE</a>
<a href="" class="point" id="2">TWO</a>
<a href="" class="point" id="3">THREE</a>
</div>
<div id="rotator">
<ul>
<li class="show"><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
</div>
CSS:
#rotator {position: relative; height: 800px; height: 300px; /*margin-left: -19px;*/}
#rotator ul li {float: left; position: absolute; list-style: none;}
#rotator ul li.show {z-index: 500;}
JAVASCRIPT:
$(document).ready(function(){
$('div#rotator ul li').css({opacity: 0.0});
$('div#rotator ul li:first').css({opacity: 1.0});
$("a.point").hover(function() {
var current = $('div#rotator ul li.show');
var hoverID = $(this).attr("id");
var elemLI = $('li:eq('+hoverID+')');
elemLI.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
current.css({opacity: 0.0}, 1000).removeClass('show');}, function() {return false;});
});
Получается Бред! Картинки меняются непонятно как вообще. Спасибо заранее.
Link to comment
Share on other sites
2 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.