Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.05.2015, 17:52
Новичок на форуме
Отправить личное сообщение для jonrut Посмотреть профиль Найти все сообщения от jonrut
 
Регистрация: 21.11.2014
Сообщений: 6

CSS3 transition и transform или JS
Здравствуйте!
Нужна помощь. Задача: есть круг, в нем картинка, при наведении мышки - картинка масштабируется намного(увеличивается). Сам круг и бордер - на месте. (в мозиле все ок, хром, сафари - не обрезает углы, хотя префиксы есть.) эксплорер9 почему-то вообще не видит бордер-радиус. И не откликается на transition и transform. Если есть возможность сделать это кроссбраузерно, (эксплорер от 11), на css - помогите, или подскажите как это сделать на javascript или jquery. Спасибо.

<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			.gallery-block {
				 overflow:hidden;
				 border: 5px solid #fdd693;
				 border-radius: 100px 100px 100px 100px;
				 width: 195px;
				 height:195px;
			 }

			.gallery-block img {
				 transition: all 1s ease;
				 -moz-transition: all 1s ease;
				 -o-transition: all 1s ease;
				 -ms-transition: all 1s ease;
				 -webkit-transition: all 1s ease;
				 
			 }
			 
			.gallery-block img:hover{
				 -webkit-transform: scale(1.5);
				 -moz-transform: scale(1.5);
				 -o-transform: scale(1.5);
				 -ms-transform: scale(1.5);
				 transform: scale(1.5);
				 cursor: zoom-in;
			 }

		</style>
	</head>
	<body>
		<ul class="main_gallery">
				<li class="gallery-block">
					<img width="195" height="195" style="border-radius: 100px 100px 100px 100px; border: 0" src="http://islamtv.ru/uploaded_images/islamtv.ru13522100080.34637200.jpeg" />
				</li>
				<li class="gallery-block">
					<a href="#"><img width="195" height="195" style="border-radius: 100px 100px 100px 100px; border: 0"  src="http://islamtv.ru/uploaded_images/islamtv.ru13522100080.34637200.jpeg" /></a>
				</li>
				<li class="gallery-block">
					<a href="#"><img width="195" height="195" style="border-radius: 100px 100px 100px 100px; border: 0"  src="http://islamtv.ru/uploaded_images/islamtv.ru13522100080.34637200.jpeg" /></a>
				</li>

			</ul>

	</body>
	</html>
Ответить с цитированием
  #2 (permalink)  
Старый 29.05.2015, 20:24
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Почему scale? Достаточно размер менять как таковой или в процентах если заранее неизвестно. Как обычно делают. И еще, я сам не проверял, но говорят scale на пикселы действует пагубно.

Увидел хтмл. Ну там просто бред. Радиус на пикселы задавать бестолку и размеры надо в css прописать и ховерить по размеру.
Ответить с цитированием
  #3 (permalink)  
Старый 29.05.2015, 20:34
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Что осталось - достаточно для функционирования https://jsfiddle.net/d6tug8oc/

Предлагаю перейти на background, тогда легче будет увеличить по центру-центру.
Ответить с цитированием
  #4 (permalink)  
Старый 30.05.2015, 20:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

kostyanet,
разве ваш вариант решает
Сообщение от jonrut
хром, сафари - не обрезает углы,
Сообщение от kostyanet
Предлагаю перейти на background
в ie нет анимации background-size
Ответить с цитированием
  #5 (permalink)  
Старый 31.05.2015, 18:56
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Какие еще углы? Картинка в кружочке по проекту. Да, в хроме список хочет явно получить list-style:none; что, обыкновенно, пихают или сразу в нормализатор, или в родительский класс.
Ответить с цитированием
  #6 (permalink)  
Старый 31.05.2015, 20:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

Сообщение от kostyanet
Какие еще углы? Картинка в кружочке по проекту.
проблема в том что картинка при hover становится квадратной и это видно и в вашем коде.
в изначальном коде картинка вылезает над кругом , закрывая круг , в вашем тоже самое но под кругом
Ответить с цитированием
  #7 (permalink)  
Старый 31.05.2015, 20:10
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от рони
проблема в том что картинка при hover становится квадратной

Это в каком таком дебильном браузере происходит? Ну, то есть, вы как судите, по себе? Типа я вижу что контейнер из круга превращается в прямоугольник и все равно пощщу ответ с примером?
Ответить с цитированием
  #8 (permalink)  
Старый 31.05.2015, 20:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

Сообщение от kostyanet
Это в каком таком дебильном браузере происходит?
Сообщение от jonrut
хром, сафари - не обрезает углы, хотя префиксы есть.)
Ответить с цитированием
  #9 (permalink)  
Старый 01.06.2015, 04:26
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Вы сами видели эти углы, или на каком основании? Покажите-ка на снимке.
Ответить с цитированием
  #10 (permalink)  
Старый 01.06.2015, 08:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

kostyanet,

Google Chrome
Версия 43.0.2357.81 m

Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
js и замена классов (или идентификаторов) Stulikov Events/DOM/Window 2 06.05.2011 20:27
Найти проблему с jQuery или писать js? Saladdin Элементы интерфейса 0 17.03.2011 17:02
Что лучше: библиотека или чистый JS? `p r o x y Библиотеки/Тулкиты/Фреймворки 4 26.11.2010 11:16
Стоит ли учить JS? Или что то другое? aleks_valery Элементы интерфейса 1 06.08.2010 19:33
Что выбрать XML или JSON для передачи Ajax - ом из PHP в JS Gozar Общие вопросы Javascript 20 16.08.2009 23:36