Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2014, 20:22
Аспирант
Отправить личное сообщение для zerofx Посмотреть профиль Найти все сообщения от zerofx
 
Регистрация: 07.11.2013
Сообщений: 78

ктивация одного блока через другой
Здравствуйте уважаемые. Так как в джави я ни в зуб ногой ... прошу ващои помощи .. суть вот в чем .. является изображение или блок .. в моем случае изображение. и при подведении к нему курсором надо чтобы активировался другой блок. ну вроде все просто, это несколько напоминает hover, только для другого блока. я читал у вас на форуме о функции mousemove, mouseout - вот здесь http://learn.javascript.ru/mousemove-events ... но так ничего и не понял ... а именно как передать наведенє мышкой от одного объекта другому .... + другой блок есть скрытый.. и открывается только после активации мышкой ...


вот пример

http://jsfiddle.net/zerofx/Y6D2M/

помогите пожалуйста!!!
Ответить с цитированием
  #2 (permalink)  
Старый 13.01.2014, 06:42
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

Сообщение от zerofx
как передать наведенє мышкой от одного объекта другому ....
Передавать ничего не нужно...
Если событие наступило - ты получишь управление. У тебя будет ссылка на текущий объект...
Останется как-то выяснить какой скрытый/открытый элемент ему соответствует и выполнить нужное действие...

Последний раз редактировалось ksa, 13.01.2014 в 09:18.
Ответить с цитированием
  #3 (permalink)  
Старый 13.01.2014, 08:43
Аспирант
Отправить личное сообщение для zerofx Посмотреть профиль Найти все сообщения от zerofx
 
Регистрация: 07.11.2013
Сообщений: 78

ну да =) а можно поподробней ?? ато я не такой скилований как Ви ...
Ответить с цитированием
  #4 (permalink)  
Старый 13.01.2014, 09:18
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

Сообщение от zerofx
а можно поподробней ?
Делай тестовый пример... Выкладывай его тут...
На нем можно будет показать.
Ответить с цитированием
  #5 (permalink)  
Старый 13.01.2014, 11:35
Аспирант
Отправить личное сообщение для zerofx Посмотреть профиль Найти все сообщения от zerofx
 
Регистрация: 07.11.2013
Сообщений: 78

Сообщение от ksa Посмотреть сообщение
Делай тестовый пример... Выкладывай его тут...
На нем можно будет показать.
вот пример

http://jsfiddle.net/zerofx/Y6D2M/


он здесь сначала был ... может Вы не увидели
Ответить с цитированием
  #6 (permalink)  
Старый 13.01.2014, 17:36
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

Сообщение от zerofx
может Вы не увидели
Незаметил...

Сообщение от zerofx
в моем случае изображение. и при подведении к нему курсором надо чтобы активировался другой блок
Так челе?

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
-->
<style type="text/css">
body{
    /* Setting default text color, background and a font stack */
    
    font-size:13px;
    
    font-family:Arial, Helvetica, sans-serif;
}

#t1 {
    position: relative;
}

.menu{
    width:800px;
    height:52px;
    position:relative;
    top:200px;
    left:100px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
}
.item{
    position:relative;
    background-color:#A59877;
    width:52px;
    margin:0px 5px;
    height:52px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
}
</style>
<script type="text/javascript">
$(function (){
	$('.item').hover(
		function(){
			var $this = $(this);
			expand($this);
		},
		function(){
			var $this = $(this);
			collapse($this);
		}
	);
	$('#main > img').hover(		
		function(){
			var $this = $(this).next('.item');
			expand($this);
		},
		function(){
			var $this = $(this).next('.item');
			collapse($this);
		}
	);
});
function expand($elem){
	var angle = 0;
	var t = setInterval(function () {
		if(angle == 1440){
			clearInterval(t);
			return;
		}
		angle += 40;
		$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
	},10);
	$elem.stop().animate({width:'268px'}, 1000)
	.find('.item_content').fadeIn(400,function(){
		$(this).find('p').stop(true,true).fadeIn(600);
	});
}
function collapse($elem){
	var angle = 1440;
	var t = setInterval(function () {
		if(angle == 0){
			clearInterval(t);
			return;
		}
		angle -= 40;
		$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
	},10);
	$elem.stop().animate({width:'52px'}, 1000)
	.find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();
}
</script>
</head>
<body>
<div id="main">
    <img src="http://i019.radikal.ru/1401/eb/8627bece3393.gif" id="object">
    <div class="item"></div>
</div>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 13.01.2014, 22:28
Аспирант
Отправить личное сообщение для zerofx Посмотреть профиль Найти все сообщения от zerofx
 
Регистрация: 07.11.2013
Сообщений: 78

та вроди то.. только в консоли fire_bug пишет -
ReferenceError: collapse is not defined collapse($this);
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
После скрытия блока через заданное время zoOmer Общие вопросы Javascript 8 13.01.2014 16:51
Как загрузить в переменную содержимое блока другой страницы? Hasanaga999 jQuery 3 25.04.2013 22:27
Скопировать events с одного элемента на другой Casufi jQuery 1 28.11.2012 18:28
Скопировать обработчики событий с одного элемента на другой. Jurasmi Events/DOM/Window 3 10.11.2010 18:03
Копирование из одного input в другой input bar-boss Общие вопросы Javascript 7 08.04.2008 18:10