Спкипт(jquery) увеличения картинки при наведении Спкипт(jquery) увеличения картинки при наведении - Архив
Спкипт(jquery) увеличения картинки при наведении
DownLoad_Free

Спкипт(jquery) увеличения картинки при наведении - Архив

Нашли ошибку или
хотите что-то сообщить -
жмите Ctr+Enter Система Orphus



    [Ленточный вид форума] [Поиск] [RSS]



Страница 1 из 11
Архив » История мировых и локальных событий » История развития сайта » Спкипт(jquery) увеличения картинки при наведении
Спкипт(jquery) увеличения картинки при наведении
Дата: Воскресенье, 16.03.2014, 23:03 | Сообщение # 1
Группа: Администраторы
Сообщений: 1524


<!DOCTYPE html>
<html>
<head>
    <title>JQuery Zoom Hover Img</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://s21.ucoz.net/src/jquery-1.7.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var cont_left = $("#container").position().left;
        $("a img").hover(function() {
            // hover in
            $(this).parent().parent().css("z-index", 1);
            $(this).animate({
               height: "250",
               //width: "250",
               left: "-=50",
               top: "-=50"
            }, "fast");
        }, function() {
            // hover out
            $(this).parent().parent().css("z-index", 0);
            $(this).animate({
                height: "150",
                //width: "150",
                left: "+=50",
               top: "+=50"
            }, "fast");
        });
        
        $(".img").each(function(index) {
            var left = (index * 160) + cont_left;
            $(this).css("left", left + "px");
        });
    });
    </script>
    <style type="text/css">
       
        #container {
            text-align: center;
            position: absolute;
            left: 260px;
            margin-top: 150px;
            width: 790px;
        }
        .img {
            position: fixed;
            z-index: 0;
        }
         
        .img a img {
            position: relative;
            border: 0 solid #fff;
            height:150px;
        }
    </style>
</head>
<body>
   
    <div id="container">
        <div class="img"><a href="#"><img src="http://kachay.ucoz.org/img14/voltie.png"/></a></div>
        <div class="img"><a href="#"><img src="http://kachay.ucoz.org/img14/yaild.png"/></a></div>
        <div class="img"><a href="#"><img src="http://kachay.ucoz.org/img14/devis.png"/></a></div>
        <div class="img"><a href="#"><img src="http://kachay.ucoz.org/img14/kushnir.png"/></a></div>
        <div class="img"><a href="#"><img src="http://kachay.ucoz.org/img14/voevoda.png"/></a></div>
        
    </div>
</body>
</html>

----------------------------------------------------------
Пример-источник: http://demo.superdit.com/jquery/zoom_hover/
 
Дата: Понедельник, 17.03.2014, 00:24 | Сообщение # 2
Группа: Администраторы
Сообщений: 1524
Увеличение картинки при наведении внутри контейнера



<!DOCTYPE html>
<html>
<head>
    <title>JQuery Zoom Img Into Container</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://s21.ucoz.net/src/jquery-1.7.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        
        $("a img").hover(function() {
            
             $(this).animate({
               
               width: "250",
               left: "-=70",
               top: "-=70"
            }, "fast");
        }, function() {
           
            $(this).animate({
                
                width: "100",
                left: "+=70",
               top: "+=70"
            }, "slow");
        });
        
       
    });
    </script>
    <style type="text/css">
       
        #container {
           margin: 150px auto;
            width:600px;
           
        }
        .img {
           
            float:left;
            overflow:hidden;
            width:100px;
            height:130px;
            margin:5px;
        }
         
        .img a img {
            position: relative;
            border: 2px solid #ccc;
            width:100px;
        }
    </style>
</head>
<body>
   <div align="center">
    <div id="container">
        <div class="img"><a href="#"><img src="http://kachay.ucoz.org/img14/voltie.png"/></a></div>
        <div class="img"><a href="#"><img src="http://kachay.ucoz.org/img14/yaild.png"/></a></div>
        <div class="img"><a href="#"><img src="http://kachay.ucoz.org/img14/devis.png"/></a></div>
        <div class="img"><a href="#"><img src="http://kachay.ucoz.org/img14/kushnir.png"/></a></div>
        <div class="img"><a href="#"><img src="http://kachay.ucoz.org/img14/voevoda.png"/></a></div>
        
    </div>
    </div>
</body>
</html>
 
Дата: Понедельник, 17.03.2014, 00:50 | Сообщение # 3
Группа: Администраторы
Сообщений: 1524
Увеличение картинки при наведении средствами CSS(transition)



<!DOCTYPE html>
<html>
<head>
<style>
.dszoomimage {
text-align:center;
margin-top:200px;
}
.dszoomimage a img {
width:150px;
height:200px;
display:block;
border:0;
position:relative;
top:0;
left:0;
/*-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;*/
transition: all 0.5s ease-in;
}
.dszoomimage a {
display:inline-block;
width:150px;
height:200px;
position:relative;
}
.dszoomimage a:hover img {
width:300px;
height:400px;
position:absolute;
top:-100px;
left:-50px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
z-index:7;
}
</style>
</head>

<body>    
    
    <div class="dszoomimage">
<a href="#" title="Фото"><img src="http://kachay.ucoz.org/img14/voltie.png" alt="Фото" ></a>
<a href="#"  title="Фото"><img src="http://kachay.ucoz.org/img14/yaild.png" alt="Фото"></a>
<a href="#" title="Фото"><img src="http://kachay.ucoz.org/img14/devis.png" alt="Фото"></a>
<a href="#" title="Фото"><img src="http://kachay.ucoz.org/img14/kushnir.png" alt="Фото"></a>

</div>
    
    
</body>
</html>
 
Архив » История мировых и локальных событий » История развития сайта » Спкипт(jquery) увеличения картинки при наведении
Страница 1 из 11
Поиск:


Copyright kachay.ucoz.org © 2008-2016Хостинг от uCoz
^ Наверх ^
Пригодилось!