Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   ктивация одного блока через другой (https://javascript.ru/forum/dom-window/44251-ktivaciya-odnogo-bloka-cherez-drugojj.html)

zerofx 12.01.2014 22:22

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


вот пример

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

помогите пожалуйста!!!:help: :help: :help: :help: :help:

ksa 13.01.2014 08:42

Цитата:

Сообщение от zerofx
как передать наведенє мышкой от одного объекта другому ....

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

zerofx 13.01.2014 10:43

ну да =) а можно поподробней ?? ато я не такой скилований как Ви ...

ksa 13.01.2014 11:18

Цитата:

Сообщение от zerofx
а можно поподробней ?

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

zerofx 13.01.2014 13:35

Цитата:

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

вот пример

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


он здесь сначала был ... может Вы не увидели

ksa 13.01.2014 19:36

Цитата:

Сообщение от 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>

zerofx 14.01.2014 00:28

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


Часовой пояс GMT +3, время: 16:18.