Как создать эффект «увеличения» с помощью jQuery и переключения исходного изображения? - PullRequest
Новая
       5

Как создать эффект «увеличения» с помощью jQuery и переключения исходного изображения?

0 голосов
/ 30 августа 2011

У меня есть массив изображений, которые попадают в браузер, и когда пользователь наводит на них курсор, у меня возникает такой эффект: 

 $('.thisImage').hover(function(){
            zindexnr++;// Bring picture to the foreground
            var cssObj = { 
                'z-index' : zindexnr,
                '-webkit-transform' : 'rotate(0deg)',
                '-webkit-box-shadow' : '#888 5px 10px 10px'
            };
            $(this).css(cssObj);
        }, function(event, ui){
            var tempVal = Math.round(Math.random());
            if(tempVal == 1) {
                var rotDegrees = randomXToY(330, 360); // rotate left
            }else{
                var rotDegrees = randomXToY(0, 30); // rotate right
            }
            var cssObj = { 
                '-webkit-box-shadow' : '',
                '-webkit-transform' : 'rotate('+ rotDegrees +'deg)',
            };
            $(this).css(cssObj);
        });

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

Кроме того, было бы неплохо предварительно загрузить большие изображения?

EDIT

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

JS Fiddle: http://jsfiddle.net/WatTA/ чтобы вы, ребята, могли видеть, что у меня так далеко =)

1 Ответ

0 голосов
/ 30 августа 2011

Вы можете попробовать поиграть с шириной ваших изображений. При установке ширины изображения при наведении высота будет изменяться и сохраняться в пропорции. Это создаст эффект увеличения [эта версия без анимации]

http://jsfiddle.net/WatTA/1/

Вы увидите, что я установил переменную origW в верхней части, чтобы сделать ее глобальной, чтобы при отсутствии мыши вы могли вернуться к исходному состоянию ширины.

UPDATE

Я добавил переключатель источника изображения:

http://jsfiddle.net/WatTA/2/

Я добавил еще один массив, он соответствует массивам images и imagesHover для замены источника при наведении курсора.

Надеюсь, это поможет.

...