Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.06.2013, 19:40
Новичок на форуме
Отправить личное сообщение для MR.TOR Посмотреть профиль Найти все сообщения от MR.TOR
 
Регистрация: 27.06.2013
Сообщений: 3

Поворот блока вокруг своей оси
доброго времени суток.
Нашел вод такой скрипт
http://www.xiper.net/examples/html-a...lip-click.html

подскажите как сделать так чтобы можно было размещать не один блок а много (20-30).
т.е. понятно что у каждого блока будет свой идентификатор. но вот кнопка имеет только один индентификатор "button", вот

И скрипту не понятно какой блок повернуть на 180 градусов. а какой оставить нетронутым.

/* DOM Utility Functions from PastryKit */
Element.prototype.hasClassName = function (a) {
    return new RegExp("(?:^|\\s+)" + a + "(?:\\s+|$)").test(this.className);
};

Element.prototype.addClassName = function (a) {
    if (!this.hasClassName(a)) {
        this.className = [this.className, a].join(" ");
    }
};

Element.prototype.removeClassName = function (b) {
    if (this.hasClassName(b)) {
        var a = this.className;
        this.className = a.replace(new RegExp("(?:^|\\s+)" + b + "(?:\\s+|$)", "g"), " ");
    }
};

Element.prototype.toggleClassName = function (a) {
  this[this.hasClassName(a) ? "removeClassName" : "addClassName"](a);
};
/* /DOM Utility Functions from PastryKit */

var init = function() {
	
	document.getElementById('button').addEventListener( 'click', function(){
    
		document.getElementById('card').toggleClassName('flip');
		
  }, false);
}

window.addEventListener( 'DOMContentLoaded', init, false);


такая унификация понадобится многим.
Помогите пожалуйста, сам бы сделал но в JS мало что понимаю.
Ответить с цитированием
  #2 (permalink)  
Старый 27.06.2013, 20:16
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

занятная штука
я попробовал-можно сделать и для нескольких
поменять у div вместо id="card" поставить class="card"
и соответствующие исправления в javascript и будет работать для нескольких
Ответить с цитированием
  #3 (permalink)  
Старый 01.07.2013, 10:38
Новичок на форуме
Отправить личное сообщение для MR.TOR Посмотреть профиль Найти все сообщения от MR.TOR
 
Регистрация: 27.06.2013
Сообщений: 3

Сообщение от vadim5june Посмотреть сообщение
занятная штука
я попробовал-можно сделать и для нескольких
поменять у div вместо id="card" поставить class="card"
и соответствующие исправления в javascript и будет работать для нескольких
Спасибо. А можете решение написать?
А как быть с кнопкой?
id="button" всюду будет такой? или id="button1", id="button2" и т.д.

Последний раз редактировалось MR.TOR, 01.07.2013 в 10:41.
Ответить с цитированием
  #4 (permalink)  
Старый 01.07.2013, 12:05
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от MR.TOR
id="button" всюду будет такой?
ID повторять нельзя. Если нужны повторения - используйте, например, классы class="button"
Ответить с цитированием
  #5 (permalink)  
Старый 01.07.2013, 17:12
Новичок на форуме
Отправить личное сообщение для MR.TOR Посмотреть профиль Найти все сообщения от MR.TOR
 
Регистрация: 27.06.2013
Сообщений: 3

Пожалуйста дайте рабочий код.
спасибо.
Ответить с цитированием
  #6 (permalink)  
Старый 01.07.2013, 17:36
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

<!DOCTYPE html>
<style>
.container {
    margin: 100px auto auto 100px;
	position: relative;
	width: 190px;
	height: 266px;
	/* задаем глубину сцене */
	-webkit-perspective: 600px; /* webkit */
	-moz-perspective: 600px; /* mozilla */
	-ms-perspective: 600px; /* IE 10 */
	-o-perspective: 600px; /* opera когда-то тоже должна начать понимать */
	perspective: 600px;	/* св-во по стандатам */
}

#card { /* поворачивать будем общий контейнер */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;

	-webkit-transition: -webkit-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	-ms-transition: -moz-transform 0.5s;
	-o-transition: -o-transform 0.5s;
	transition: transform 0.5s; /* трансформации будут происходить анимированно продолжительностью 0.5 сек */
	
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;	/* указываем, что дочерние элементы находятся в 3D пространстве */
}
#card.flip {	/* добавляя этот класс, поворачивеам контейнер на 180 градусов */
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
	-o-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}

figure {
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;	/* если элемент отвернут лицом от пользователя, контент этого элемента не виден */
}
.back {
	background: url(http://www.xiper.net/examples/html-and-css-tricks/effects/card-back.png);
}
.front {
	background: url(http://www.xiper.net/examples/html-and-css-tricks/effects/card-front.png);
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY( 180deg );
	transform: rotateY( 180deg );	/* в начальном положении фэйс карты к нам развернут на 180 градусов */
}
</style>
<div class="container">
    <div id="card" class=" ">
        <figure class="back"></figure>
    	<figure class="front"></figure>
    </div>
</div>
<br /><br />
<div>
    <button class="button">Повернуть</button>
    <button class="button">Повернуть</button>
    <button class="button">Повернуть</button>
</div>
<script>
var clickHandler = function() {
    document.getElementById('card').classList.toggle('flip')
}
var buttons = document.getElementsByClassName('button')
Array.prototype.forEach.call(buttons, function(button) {
     button.addEventListener('click', clickHandler)
})
</script>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
поворот вокруг своей оси IE 10 imediasun1 Элементы интерфейса 0 26.04.2013 20:38
Поворот блока относительно его угла Fedya jQuery 5 01.12.2012 14:30
слайд панели tadjik1 Элементы интерфейса 22 02.04.2012 16:13
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 15:21