Javascript Noob: Как эмулировать слайд-шоу на первой странице, автоматически переключаясь между существующими состояниями наведения ссылок на главной странице? - PullRequest
Новая
       18

Javascript Noob: Как эмулировать слайд-шоу на первой странице, автоматически переключаясь между существующими состояниями наведения ссылок на главной странице?

0 голосов
/ 25 марта 2010

Привет всем. надеюсь, вы могли бы помочь мне

я работаю над этим сайтом, и я закончил все эффекты наведения, которые мне нравятся - они именно такие, какими я хочу их видеть: http://s5ent.brinkster.net/beta3.asp - попробуйте навести курсор на четыре ссылки, и вы увидите очень простой эффект затухания на работе, который превращается в обычный зависание CSS без JavaScript.

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

чтобы сделать это, я подумал, что мне понадобится скрипт, имитирующий действие при наведении на каждую ссылку через регулярные промежутки времени после загрузки страницы, начиная слева направо (уход за ногами, газон и оборудование, о нас, свяжитесь с нами) , циклически перебирая все 4 ссылки (уход за ногами, газон и оборудование, о нас, свяжитесь с нами, уход за ногами, газон и оборудование и т. д.), но делает паузу, когда какой-либо из них был фактически обнаружен зрителем, и возобновляет работу с того места, где остановился пользователь при мышлении. надеюсь, вы поняли мой дрейф ...

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

Я очень новичок в javascript и jquery. как вы можете видеть на s5ent.brinkster.net/beta3.1-autohover.asp, следующий скрипт, который я сделал, работает неправильно: он включает все их одновременно и больше не зависает. когда вы пытаетесь навести курсор на каждую ссылку и выйти из нее, ссылка просто возвращается: 

<script type="text/javascript">
$(document).ready(function () {
    var speed = 5000;
    var run = setInterval('rotate()', speed);
});
function rotate() {
    $('.lilevel1 a').each(function(i) {
        $(this).mouseover();
    });
}
</script>

это просто брутто. кроме того факта, что этот последний бит сценария даже не работает в т.е.

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

спасибо, ребята, надеюсь, вы все устроили взрыв.

Ответы [ 2 ]

0 голосов
/ 27 марта 2010

я наконец заставил это работать. если вы, ребята, могли бы предложить, как я могу улучшить эффективность кода, пожалуйста, сделайте это. Спасибо большое. этот скрипт работает на s5ent.com 

<script><!--
// globally declare hover picker
var rotateCursor = -1;
var imageCount = 4;

$(document).ready(function () {

    // re-class links
    $('#li1flnk').attr('id', 'li1fa');
    $('#li1tlnk').attr('id', 'li1ta');
    $('#li1alnk').attr('id', 'li1aa');
    $('#li1clnk').attr('id', 'li1ca');

    // add hover class containing hover image to each link
    $('li.lilevel1 a').append('<span class="hover"><\/span>').each(function () {

        // hide hover elements from view
        var $span = $('> span.hover', this).css('display', 'none');

        // on hover span
        $(this).hover(function () {

            // stop current animation
            $('.lilevel1 a .hover').each(function () {
                $(this).stop(false, true).fadeOut('slow');
                $(this).parent().css('background-position', 'left top');
            });
            clearInterval(run);

            // hover proper
            $span.stop(false, true).fadeIn('slow');
        }, function () {

            // off hover proper
            $span.stop(false, true).fadeOut('slow');

            // resume animation
            run = setInterval('rotate()', speed);
        });
    });

    // call first animation
    rotate();

    // start animation after first call
    var speed = 4000;
    var run = setInterval('rotate()', speed);
});

function rotate() {

    //initialize cursor
    rotateCursor++;
    if (rotateCursor >= imageCount) rotateCursor = 0;

    // on hover effect
    $('.lilevel1 a .hover').eq(rotateCursor).fadeIn(500);
    $('.lilevel1 a').eq(rotateCursor).css('background-position', 'left 22px');

    // off hover effect
    setTimeout("$('.lilevel1 a .hover').eq(rotateCursor).fadeOut(500)", 3000);
    setTimeout("$('.lilevel1 a').eq(rotateCursor).css('background-position','left top')", 3000);
}

//--></script>
0 голосов
/ 25 марта 2010

Я бы не пытался эмулировать состояние при наведении, вызывая mouseover вручную.Вместо того чтобы заставить ваш скрипт вызывать зависание, попробуйте заставить ваш скрипт делать то же самое, что и при наведении курсора.

У вас уже есть следующее для функции наведения: 

$(this).hover(function(){ ... });

Вместо этого поднимите эту анонимную функцию, например, так: 

function onImageHover(link) { ... }
$(this).hover(function() { onImageCursor($(this)); });

И затем при вращениисценарий, вы можете также вызов onImageHover для того же эффекта.Я мог бы написать строку 2 выше как просто $(this).hover(onImageCursor), но я передаю объект в качестве ссылки, чтобы мне не пришлось взламывать вызовы apply, чтобы создать такой же эффект в rotate.

Кроме этого;в вашем текущем скрипте каждый раз, когда вызывается rotate, он запускает один и тот же код для всех lilevel1 ссылок.Вы просто хотите показать следующее, поэтому вам нужно использовать какой-либо курсор, чтобы отслеживать, где вы находитесь в повороте: 

var rotateCursor = -1;
var imageCount = 4;
function rotate() {
    rotateCursor++;
    if(rotateCursor >= imageCount) rotateCursor = 0;

    onImageHover( $('.lilevel1 a').eq(rotateCursor) );
}
...