Кто-нибудь знает плагин jQuery, который может сделать что-то вроде этого: http://www.pronovias.com/ - PullRequest
Новая
       85

Кто-нибудь знает плагин jQuery, который может сделать что-то вроде этого: http://www.pronovias.com/

1 голос
/ 01 августа 2010

Кто-нибудь знает плагин jQuery, который может сделать что-то вроде этого: http://www.pronovias.com/

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

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
    setInterval(function(){
        var currentPhoto=$('#photoShow .current');
        var nextPhoto=currentPhoto.next('div').addClass('next');
        if (nextPhoto.length==0)
            nextPhoto=$('#photoShow div:first').addClass('next');
        $('#photoShow .current').animate({'opacity':0},1000, function(){
        nextPhoto.addClass('current');
        nextPhoto.removeClass('next');
        currentPhoto.css('opacity', 1)
        currentPhoto.removeClass('current');
        });
    },2000);
    $('#photoShow img').hover(
        function(){
            $(this).stop().animate({left:'-=4', width:'+=8', height:'+=8'});
            }, 
        function(){
            $(this).stop().animate({left:'+=4', width:'-=8', height:'-=8'});

            });

});


</script>


<style type="text/css">
<!--
*{margin:0; padding:0;}
img{ border:none;
cursor:pointer;}



#photoShow div{
    position:relative;
    visibility:hidden;
}
#photoShow img{
position:absolute;
    z-index: 0;

}
#photoShow .current {
    z-index: 2;
    visibility:visible;
}
#photoShow .next {
    z-index: 1;
        visibility:visible;
}


-->
</style>
</head>

<body>
<div id="photoShow">
    <div class="current"><img src="gelinlik1.jpg" /></div>
    <div><img src="gelinlik2.jpg" /></div>
    <div><img src="gelinlik3.jpg" /></div>
    <div><img src="gelinlik4.jpg" /></div>
        <a href="#" style="visibility:hidden;"></a>
    </div>

</body>
</html>

1 Ответ

2 голосов
/ 01 августа 2010

Конечно, это возможно, и я уверен, что я видел, что кто-то уже написал плагин для него, я просто не могу вспомнить, где он был.

Чтобы начать работу с плагином, вам нужно решить, что плагин должен делать и после этого, какие параметры должны быть.

Пока что мы знаем, что плагин должен-

  1. Увеличение при наведении мыши
    На сколько должно увеличиваться изображение?
    Должно ли изображение оставаться по центру на всем протяжении масштабирования?
    С какой скоростью должно изображениеувеличить?
  2. Уменьшение при отпускании мыши
    с использованием тех же настроек скорости, что и при увеличении.
    должно вернуться к исходному размеру изображения.

Имея это в виду, вещи, о которых вам нужно подумать.

  1. Если мы просто увеличим ширину и высоту изображения, ширина и высота будут расти в области просмотра, но то, что мы действительно хотим сделатьограничивает ширину и высоту тем, что находится при загрузке страницы, и изображение становится больше в этих пределах.Как мы можем поступить так?
  2. Когда мы увеличиваем масштаб изображения, должны ли мы заменить источник увеличенного изображения на версию изображения с более высоким разрешением?Возможно, нам не нужно делать это для небольших масштабов, скажем, 10 - 20%, но мы можем захотеть сделать это для больших процентов увеличения.

Какой-то код для начала работы.Запустите это на этой странице и посмотрите, что происходит с изображениями 

var imgs = $('img');
imgs.wrap('<div style="overflow:hidden;"></div>');

imgs.parent('div').each(function() {
  var self = $(this),
      img = self.find('img');
  self.height(img.height());
  self.width(img.width());
});

imgs.animate({ width: "+=10%", height: "+=10%"}, 2000);
...