|
Спкипт(jquery) увеличения картинки при наведении
|
|
|
| Дата: Воскресенье, 16.03.2014, 23:03 | Сообщение # 1 |
|
Группа: Администраторы
Сообщений: 1530
| 
<!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 |
|
Группа: Администраторы
Сообщений: 1530
| Увеличение картинки при наведении внутри контейнера
<!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 |
|
Группа: Администраторы
Сообщений: 1530
| Увеличение картинки при наведении средствами 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>
|
| |
| |
Играйте бесплатно в 
