Раньше я писал об увеличение картинки при наведении при помощи css. Но она была не доработана.
Совсем недавно, мне требовалось сделать что-то похожее, только на jQuery. И я доделал тот пример и добавил эффекты при помощи jQuery. Вообщем у меня получилось два варианта:
- С использованием CSS, без jQuery.
- С использованием CSS и jQuery.
Сейчас я покажу вам два варианта.
1. С использованием CSS, без jQuery
Html код:
<a class="st" href="javascript:">
<div class="img"><img src="http://bitby.net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div>
</a>
Css стили:
a.st .img{width:100px;height:124px;overflow:hidden;}
a.st .img img{width:100px;height:124px;}
a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;}
a.st:hover .img img{visibility:visible;width:250px;height:274px;position:absolute;z-index:150;}
По сравнению с вариантом в прошлой статье, этот не раздвигает другой html вокруг. То есть картинка сама по себе, но в то же время, за ней закреплено место для маленькой картинки.
2. С использованием CSS и jQuery
Здесь мы оставим html код таким же, как и в предыдущем примере:
<a class="st" href="javascript:">
<div class="img"><img src="http://bitby.net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div>
</a>
Вот теперь, css изменится:
a.st .img{width:100px;height:124px;}
a.st .img img{width:100px;height:124px;}
a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;}
a.st:hover .img img{visibility:visible;position:absolute;z-index:150;}
Принципы css одинаковы в двух вариантах, только во втором, ширину и высоту мы будем трансформировать при помощи jQuery.
JQuery скрипт:
$(function(){
$('.img').hover(function(){
$(this).children('img').stop().animate({width:"250px",height:"274px"}, 400);
}, function(){ $(this).children('img').stop().animate({width:"100px",height:"124px"}, 400); });
});
При наведении курсора, мы плавно трансформируем ширину и высоту объекта, а затем, когда курсор будет убран, возвращаем css в исходное положение, опять же плавно.
Вот мы и разобрали два примера реализации. Плюсы и минусы я приводить не буду, но скажу так, существенных проблем нет у обоих примеров.
Работает: Mozilla Firefox 3.5.2, Opera 10.00, Chromium 4.0.204.0, Konqueror 4.3.1.
Если вы нашли ошибку в коде, сообщите пожалуйста в комментариях.
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
див внутри а
это не есть гуд
валидацию на validator.w3.org не пройдете
Ответить | Цитировать
ответ на zaiemil@ya.ru
Ответить | Цитировать
Ответить | Цитировать
* Стандартные: 100×100.
* animate (width:"150px", height:"150px", left:"-50px", top:"-50px");
Вот и все...
Ответить | Цитировать
В таком случае картинка прыгает резко в левый верхний угол.
Ответить | Цитировать
animate ({width:"150px", height:"150px", left:"-50px", top:"-50px"}, 400);
Где 400 — это время в мс.
Ответить | Цитировать
Ответить | Цитировать
$(function (){
$('.img').hover (function (){
$(this).children ('img').stop ().animate ({{width:»150px", height:"150px", left:"-50px", top:"-50px"}}, 400);
}, function (){ $(this).children ('img').stop ().animate ({width:"100px",height:"100px",left:"0",top:"0"}, 400); });
});
Ответить | Цитировать
Почему в первом варианте картинка увеличивается вниз и вправо? И зафиксирован левый верхний угол картинки. Какими параметрами это определяется?
Как сделать что бы зафиксирован был правый верхний край картинки и увеличивалась она влево и вниз?
Можно сделать так, что бы зафиксирован был центр картинки, а увеличивалась она от центра одинаково во все стороны?
Ответить | Цитировать
Насчет твоих вопросов, отвечаю на все по порядку:
1. Картинка закреплена на странице сверху и слева. Значит ей болше некуда изменять свои размеры, кроме как вниз вправо. Так ведут себя все стандартные браузеры. Чтобы изменить это, нужно ковыряться с отрицательными отступами...
2. Здесь нужно делать как всегда, только делать отрицательный оступ слева.
3. Можно... В каждую сторону по отрицательному отступу.
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
<a class="st" href="javascript:" rel="nofollow">Ответить | Цитировать
src="http://bitby.net/wp-demo/files/jquery.js не работает без доступа к интернет. а как это можно обойти? Спасибо!
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
<head>и</head>такую строчку:<script src="путь к файлу (например js/jquery.js)" type="text/javascript"></script>Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Если я правильно понял, то для Html выглядит все это дело вот так:
страница 1
Ответить | Цитировать
Ответить | Цитировать
</head>. И вместо нее вставляй:<script src="http://bitby.net/wp-demo/files/jquery.js" type="text/javascript"></script> </head>Далее ищи строку
<body>, и вместо нее вставляй:<body> <script> $(function(){ $('.img').hover(function(){ $(this).children('img').stop().animate({width:"250px",height:"274px"}, 400); }, function(){ $(this).children('img').stop().animate({width:"100px",height:"124px"}, 400); }); }); </script>Далее в нужное место в коде вставь html:
<a class="st" href="javascript:" rel="nofollow"> <div class="img"><img src="http://bitby.net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div> </a>Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Заливаете фреймворк (jquery) например в корневую папку сайта (там где index.php), далее редактируете index.php. Ищите
</head>и вместо него вставляете:<script src="http://bitby.net/wp-demo/files/jquery.js" type="text/javascript"></script> </head>Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
a.st .img{width:100px;height:124px;} a.st .img img{width:100px;height:124px;} a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;} a.st:hover .img img{visibility:visible;position:absolute;z-index:150;}Все значения width — меняешь на начальную ширину своей картинки.
Все значения height — меняешь на начальную высоту своей картинки.
Далее скрипт:
$(function(){ $('.img').hover(function(){ $(this).children('img').stop().animate({width:"250px",height:"274px"}, 400); // Значения ширины и высоту, когда навели курсор. }, function(){ $(this).children('img').stop().animate({width:"100px",height:"124px"}, 400); // Начальные значения ширины и высоты. }); });Ответить | Цитировать
Ответить | Цитировать
У меня на сайте шаблон с mootools — его не выкинешь...
Или может можно как-то использовать библиотеку mootools вместо jQuery?
Не могу нарыть такого на mootools (((
Ответить | Цитировать
1. Насчет смазывания, скорее всего это зависит от качество картинки.
2. Задай родительскому блоку, например в нашем примере это .img, свойство position со значением absolute.
3. Пример можно посмотреть?
Женя, конечно реально. Я с mootools не знаком, но даже если на нем нельзя, то использовать два фреймворка можно. Одна лишь проблема при этом, и jQuery и mootools используют для селекторов знак «$». Для того, чтобы изменить во всех кодах jQuery знак «$» на свой, используйте .noconflict ():
var $j = jQuery.noConflict();В дальнейшем вам нужно будет пользоваться в jQuery скриптах не «$», а «$j». Например
$j('#id').css({display:'none'});.Ответить | Цитировать
Ответить | Цитировать
<a class="st" href="javascript:" rel="nofollow"> <div class="img"><img src="http://bitby.net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div> </a>Как видно, что перед img есть блок с классом img. Этот блок и является родительским. Попробуй ему задать абсолютное позиционирование (position:absolute).
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
1. Показывается маленькая картинка на странице.
2. При наведении курсора на эту картинку, она увеличивалась и поверх картинки появлялась ссылка.
Если да, то лучше пользоваться совсем другим кодом.
Ответить | Цитировать
Все работало ок. После вставки в шаблон джумлы возникла следующая проблема: в Опере по прежнему все ок, а вот в IE8, картинки увеличиваются, но назад не уменьшаются... что делать?
(Вариант1,без jQuery)
Ответить | Цитировать
Я хочу сделать плавное увеличение с JQuery. То, как картинка увеличивается, меня полностью устраивает. Но уменьшается она резко: при отведении мышки от картинки, обрамляющие элементы становятся видны мгновенно. У вас на примере то же самое: только отводишь мышку, Текст 3 проявляется тотчас же. Можно ли этого избежать?
Ответить | Цитировать
Вот теперь я полностью разобрался. Смотрите. Когда мы наводим курсор, картинке задается z-index, этим мы перекрываем собой текст. Когда убираем курсор, z-index становится прежним и текст залазит наверх. Чтобы избавиться от этого, измените:
a.st2 .img2 img{width:100px;height:124px;} на:
a.st2 .img2 img{width:100px;height:124px;position:absolute;z-index:150;}
И все работает как надо
.
Ответить | Цитировать
Ответить | Цитировать
Кстати, если кому-то интересно, вот полный код со всеми блоками и т.д. для картинки, увеличивающейся по наведению, красиво убирающейся и еще и со ссылкой. Прямо в таком виде его можно вставлять в html файл (а я пихал в html/js виджет блоггера)
a.st2 .img2{width:150px;height:150px;} a.st2 .img2 img{width:150px;height:150px;position:absolute;z-index:150;} a.st2:hover .img2{width:150px;height:150px;overflow:visible;} a.st2:hover .img2 img{visibility:visible;position:absolute;z-index:150;} $(function(){ $('.img2').hover(function(){ $(this).children('img').stop().animate({width:"300px",height:"300px"}, 400); }, function(){ $(this).children('img').stop().animate({width:"150px",height:"150px"}, 400); }); }); <a href="http://ear-trap.blogspot.com" rel="nofollow"></a>Ответить | Цитировать
Вот нормальная ссылка:
Ответить | Цитировать
bitby.net/wp-demo/web/img...or-jquery/4.html
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
div img
div ovevfl
img
/div
/div
/a
Ответить | Цитировать
Ответить | Цитировать
<?php
//checks if the form has been submitted
if (isset ($_POST['Submit']))
{
//reads the name of the file the user submitted for uploading
$image=$_FILES['image']['name'];
$scale = $_POST['scale'];
if ($image) {
$info = getimagesize ( $image);
$t = time ();
$w = $info[0];
$ww = (int) $w/$scale;
$h = $info[1];
$hh = (int)$h/$scale;
echo «Insert in the CSS:»;
echo «a.st_».$t." .img_".$t."{width:".$ww."px;height:".$hh."px;overflow:hidden;border:0 none;}"."«;
echo „a.st_“.$t.» .img_".$t." img{width:".$ww."px;height:".$hh."px;border:0 none;}"."«;
echo „a.st_“.$t.»:hover .img_".$t."{width:".$ww."px;height:".$hh."px;overflow:visible;visibility:hidden;border:0 none;}"."«;
echo „a.st_“.$t.»:hover .img_".$t." img{width:".$w."px;height:".$h."px;visibility:visible;position:absolute;z-index:150;border:0 none;}"."";
echo «Insert in the HTML:»;
echo htmlspecialchars ("");
echo htmlspecialchars (" ");
echo htmlspecialchars (" ");
echo htmlspecialchars (" ");
echo htmlspecialchars ("");
}
}
?>
Image to analyse:
Scale:
Ответить | Цитировать
WebMast, не могли бы вы скинуть его e-mail мне на мыло? Боюсь, здесь он не увидит моё сообщение.
Ответить | Цитировать
когда картинка в абзаце, внутри текста ((((( у меня сама картинка прыгает на новую стоку и после нее тоже новая строка начинается, и еще после картинки почему то текст без стиля, стиль применяется к абзацу в css... я так поняла что div на нее так действует... подскажите пожалуйста как исправить??? может этот скрипт не подходит к абзацу???
Ответить | Цитировать
я закинул на свой сайт
и он не совсем корректно работает помогите мне
Ответить | Цитировать
Не совсем понятна ваша идея задачи. Опишите или покажите пример.
Может поможет: bitby.net/web/plavnoe-izm...vysoty-u-obekta/
artistoo7, посмотрите: bitby.net/wp-demo/web/img...or-jquery/4.html
Ответить | Цитировать
Ответить | Цитировать
1. можно ли его сделать кросбраузерным (на всех проверял везде работает на УРА, а вот IE6 косячит)
2. можно ли как-то запретить выполнение скрипта если пользователь открыл сайт в IE6?
Буду очень признателен за ответ!
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
А то моя картинка совсем не такая, как тут, а где именно «габариты» картинки указывать надо — мне не ясно)
Ответить | Цитировать
А как сделать, чтобы картинка была гиперссылкой? Мол, при наведении курсора — увеличение, а при нажатии — переход по ссылке?
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
Ответить | Цитировать
a.st .img{width:100px;height:124px;overflow:hidden;}
a.st .img img{width:100px;height:124px;}
a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;}
a.st:hover .img img{visibility:visible;width:250px;height:274px;position:absolute;z-index:150;}
вот повторы .img img это что значит??
Ответить | Цитировать