Создание ролловеров кнопок с помощью jQuery - PullRequest
Новая
       13

Создание ролловеров кнопок с помощью jQuery

2 голосов
/ 03 января 2011

Я пытаюсь создать функцию, которую можно использовать глобально для создания состояний прокрутки для изображений.По сути, я хочу иметь возможность добавить класс к изображению, а затем, когда вы его перенесете, jquery будет использовать то же имя изображения и то же расширение, но добавит «-over» к имени файла.(У меня будет изображение с состоянием опрокидывания, названным так же, как и состояние без опрокидывания, за исключением того, что на нем указано -over. Я придумал это, но он не работает. Я делаю что-то не так или кто-нибудь знает олучший способ сделать это? 

$('.btn').hover(function(){
    $(this).attr("src").split(".jpg").join("Over.jpg"));
});

изображение: 

<img src="/static/images/overlay-close-button.jpg" alt="Close" title="Close" id="our-staff-overlay-close" class="btn"/>

Спасибо!

РЕДАКТИРОВАТЬ: Есть ли способ сделать его не привязанным к времени файла,где он может определить любой тип файла, а не только jpgs?

Я использую: 

$('.btn').hover(function(){
    this.src = this.src.split(".jpg").join("Over.jpg");
}, function() {
    this.src = this.src.split("Over.jpg").join(".jpg");
 });

, и он отлично работает

РЕДАКТИРОВАТЬ 2: Могу ли я добавитьактивное состояние (при нажатии кнопки)?

Ответы [ 4 ]

3 голосов
/ 03 января 2011

Разделение и объединение должны работать как положено, вам просто нужно установить это обратно в атрибут src img: 

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.split('.jpg').join('-over.jpg');
    $(this).attr("src", src);
});

Кроме того, если вы хотите, чтобы оно работало с любым расширением, вы можете использовать регулярное выражение, например: 

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2");
    $(this).attr("src", src);
});

Регулярное выражение соответствует всему, что заканчивается точкой, за которой следует один из png, gif, jpg, or jpeg, и заменяет его первой частью (путь + имя файла), строкой «-over», точкой и исходным расширением.

Вы можете заменить его обратно в исходное состояние, удалив -over из источника: 

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2");
    $(this).attr("src", src);
}, function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)-over\.(png|gif|jpg|jpeg)$/, "$1.$2");
    $(this).attr("src", src);
});

Событие jQuery().hover принимает две функции: первая вызывается при запуске наведения, вторая вызывается при выходе из наведения.

1 голос
/ 03 января 2011

Вы просто ничего не делаете с результатом. В этом случае вы хотите установить src (что можно сделать несколькими способами), вот наиболее эффективный пример (без изменения метода .split().join()): 

$('.btn').hover(function(){
  this.src = this.src.split(".jpg").join("Over.jpg");
}, function() {
  this.src = this.src.split("Over.jpg").join(".jpg");
});
0 голосов
/ 03 января 2011

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

Используйте псевдоклассы :hover и :active и используйте спрайтов CSS .

Недостатком здесь является то, что этот метод труднее сделать вообще применимым, потому что вам нужно заранее знать размер ваших изображений.

0 голосов
/ 03 января 2011 
$('.btn').hover(function(){
    $(this).attr("src", this.src.split(".jpg")[0] + "-over.jpg");
}, function() {
   $(this).attr("src", this.src.split("-over.jpg")[0] + ".jpg");
})
...