Trinity Wane
Можно конечно сделать подгружаемый контейнер для разных стилей, но у меня он не срабатывал нормально и Deff с Alex_63 подсказали решение, которое Вам описываю я.
Я сама когда сделала переключение стилей, то во всех скриптах ставила прозрачную картинку, а уже нужную добавляла в каждом стиле через бэкграунд.
Во всех скриптах, где есть картинки надо вставлять
то есть прозрачную картинку
А уже в стиле прописывать например для серого стиля:
#navindex img.navlinks {
background: url(http://s4.uploads.ru/yiFMX.png) center 4px no-repeat;
content: "";
width: 42px;
height: 16px;
}
Так же для стрелочек и прочих скриптов. Если хотите, то можете посмотреть у меня на форуме. Я вообще все бекграунды сделала одним спрайтом.
Мой пример стрелочек
В стилях прописано:
2 стиль
/* Кнопки вверх вниз
-----------------------------------------*/
#pun #ToTop img, #pun #OnBottom img {background: url(http://forumstatic.ru/files/0015/57/bb/78556.png) -66px 0 no-repeat!important;
width: 79px;
height: 250px;
}
#pun #OnBottom img {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
В HTML-верх
<!--Кнопки вверх вниз-->
<div class="go-up" id='ToTop'><img src="/i/blank.gif" border="0" /></div>
<div class="go-down" id='OnBottom'><img src="/i/blank.gif" border="0" /></div>
<style>
.go-up,.go-down {
display:none;
position:fixed; /*позиционируем*/
right:200px; /*указываем положение, если слева - left*/
z-index:9999; /*показываем поверх все элементов на странице*/
cursor:pointer;
opacity:.3; /*прозрачность*/
margin-bottom:0px; /*отступ снизу (можно не указывать)*/
width:40px; /*ширина кнопки*/
height:111px; /*высота кнопки*/
}
.go-up {
bottom:612px; /*положение от низа окна браузера верхняя кнопка*/
}
.go-down {
bottom:408px; /*положение от низа окна браузера нижняя кнопка кнопка*/
}
.go-down:hover,.go-up:hover {
opacity:1;
}
</style>
<style>
@media screen and (max-width: 540px) {
.go-up {bottom: 555px;}
.go-down {bottom: 465px;}
}
</style>
В HTML-низ
<!--Кнопки вверх вниз-->
<script type="text/javascript">
$(function(){
if ($(window).scrollTop()>="150") $("#ToTop").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="150") $("#ToTop").fadeOut("slow")
else $("#ToTop").fadeIn("slow")
});
if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
else $("#OnBottom").fadeIn("slow")
});
$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
</script>
Отредактировано Lidia-Lada (Сб, 25 Мар 2017 13:29:35)