Javascript.RU

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

Движение Тени DIVa относительно положения мыши с opacity!
Помогите новичку, нашел пример который почти мне подходит
http://pushingpixels.at/experiments/dynamic_shadow/
Только в моем случае источником света должен быть курсор мыши и включатель не нужен.
На моей странице будет 4 DIVa, от которых должна падать тень относительно источника света - cursor'a. Т.е. если курсор будет между двумя DIV'ами, то от левого тень должна падать налево, а от правого на право. Ну и естественно, если курсор между двумя вертикальными DIV'ами то от верхнего тень будет падать наверх, а от нижнего вниз.

Ссылка на архив с полным примером:
http://www.1stwebdesigner.com/wp-con...amicShadow.zip

Как мне переделать вот этот script.js???:

$(function(){
	var shadowOffset	=	1.08;									// shadow offset
	var lightswitch		=	$("#switch");							// the light switch
	var lightbulb		=	$("#light-bulb");						// outer light bulb
	var lightbulb2		=	$("#light-bulb2");						// inner light bulb
	var lightCenterX	=	parseInt(lightbulb.width()/2);			// center of light - X-axis
	var lightCenterY	=	parseInt(lightbulb.height()/2);			// center of light - Y-axis
	var logo			=	$("#logo");								// logo container
	var lightAlogo		=	$("#light-bulb, #logo");				// light and logo containers
	var logoCenterX		=	parseInt(logo.width()/2);				// center of logo - X-axis
	var logoCenterY		=	parseInt(logo.height()/2);				// center of logo - Y-axis
	var logoshadow		=	$("#logosh");							// shadow container
	var logoShdwCenterX	=	parseInt(logoshadow.width()/2);			// center of shadow - X-axis
	var logoShdwCenterY	=	parseInt(logoshadow.height()/2);		// center of shadow - Y-axis
	var statustext		=	$("#infobox p");						// info-box text container
	var defaulttxt		=	"Drag the light-bulb or the logo!";		// info-box default text
	var ontxt			=	"Let there be light!";					// info-box text for hovering switch while state is "off"
	var offtxt			=	"Switch off the light!";				// info-box text for hovering switch while state is "on"
	
	statustext.text(defaulttxt);		// set info-box text to default text
	moveShadow();						// start our main function
	
	// making the light and the logo draggable
	lightAlogo.draggable({
		drag: function(event, ui){
			statustext.text("dragging " + $(this).attr("id"));	// change the statustext do "dragging + element id" state
			moveShadow();										// our main function which will move the shadow
		},
		stop: function(event, ui){
			statustext.text(defaulttxt);						// switching to default text when stoped draging
		}
	});

	// asinging the things, which should happen, when clicking the light switch
	lightswitch.click(function(){
		if(lightbulb.hasClass("off")){									// when the light bulb has the class "off" do following:
			lightbulb.removeClass("off");									// first remove the class "off"
			lightswitch.css("backgroundPosition","0 0");					// change the background position of the CSS sprite
			logoshadow.stop().fadeTo(750,setOpacity(shadowDistance));		// showing the shadow of the logo with a fading animation
			lightbulb2.stop().fadeTo(750,1);								// fade in the inner light bulb container (light is turned on!)
			statustext.text(offtxt);										// changing the status text to the "off text"
		}else{															// else do following:
			lightbulb.addClass("off");										// adding the class "off"
			lightswitch.css("backgroundPosition","-80px 0");				// move the background position of the switch back to original position
			logoshadow.stop().fadeTo(750,0);								// fade out the logo shadow
			lightbulb2.stop().fadeTo(750,0);								// fade out the turned on light (no more lights now)
			statustext.text(ontxt);											// changing the status text to the "on text"
		}
	});
	
	// changing the infotext when hovering the switch
	lightswitch.hover(function(){
		if(lightbulb.hasClass("off")){
			statustext.text(ontxt);			// when lightbulb has the class "off" show this text
		}else{
			statustext.text(offtxt);		// otherwise show this text
		}
	},function(){
		statustext.text(defaulttxt);		// hovering out will show the default text again
	});

	// calculating the shadow opacity according to the light bulb distance
	function setOpacity(getDistance){
		if(lightbulb.hasClass("off")){
			return 0;								// if the lightbulb has the class "off", opacity = 0 (no shadow)
		}else{
			return (1.2 - getDistance /1000);		// otherwise we calculate a suitable shadow opacity with this formular
		}
	}
	
	// the main function - our shadow mover
	function moveShadow(){
			// save the current X position of the light bulb
		lightX			=	parseInt(lightbulb.offset().left) + lightCenterX;
			// save the current Y position of the light bulb
		lightY			=	parseInt(lightbulb.offset().top) + lightCenterY;
			// save the current X position of the logo
		logoX			=	parseInt(logo.offset().left) + logoCenterX;
			// save the current Y position of the logo
		logoY			=	parseInt(logo.offset().top) + logoCenterY;
			// save the value how far the logo is away from the light bulb on the X-axis
		distanceX		=	logoX - lightX;
			// save the value how far the logo is away from the light bulb on the Y-axis
		distanceY		=	logoY - lightY;
			// calculating and saving the value of the square root of those two distance values
		distance		=	Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));
			// calculating and saving the shadow distance with the offset we defined in our variables 
		shadowDistance	=	distance * shadowOffset;
			// preparing the CSS value to put into the "left" attribute of the shadow container
		shadowPosLeft	=	(distanceX / distance * shadowDistance + lightX - logoShdwCenterX) + "px";
			// preparing the CSS value to put into the "top" attribute of the shadow container
		shadowPosTop	=	(distanceY / distance * shadowDistance + lightY - logoShdwCenterY) + "px";
			// finaly using the results of all above calculations to position our shadow and set the opacity
		logoshadow.css({ "left": shadowPosLeft, "top": shadowPosTop, "opacity": setOpacity(shadowDistance) });
	}
});

Заранее спасибо!

Последний раз редактировалось Андррр, 18.11.2011 в 16:34.
Ответить с цитированием
  #2 (permalink)  
Старый 18.11.2011, 16:00
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #3 (permalink)  
Старый 18.11.2011, 16:37
Новичок на форуме
Отправить личное сообщение для Андррр Посмотреть профиль Найти все сообщения от Андррр
 
Регистрация: 18.11.2011
Сообщений: 6

Отформатировал.
Ответить с цитированием
  #4 (permalink)  
Старый 29.11.2011, 09:43
Новичок на форуме
Отправить личное сообщение для Андррр Посмотреть профиль Найти все сообщения от Андррр
 
Регистрация: 18.11.2011
Сообщений: 6

Ну помогите кто-нибудь!!!!
Ответить с цитированием
  #5 (permalink)  
Старый 29.11.2011, 14:54
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

http://jsfiddle.net/hX9zg/2/
Ответить с цитированием
  #6 (permalink)  
Старый 30.11.2011, 09:13
Новичок на форуме
Отправить личное сообщение для Андррр Посмотреть профиль Найти все сообщения от Андррр
 
Регистрация: 18.11.2011
Сообщений: 6

Сообщение от melky Посмотреть сообщение
http://jsfiddle.net/hX9zg/2/
СПАСИБО! Сейчас буду пробовать!
Ответить с цитированием
  #7 (permalink)  
Старый 06.12.2011, 15:39
Новичок на форуме
Отправить личное сообщение для Андррр Посмотреть профиль Найти все сообщения от Андррр
 
Регистрация: 18.11.2011
Сообщений: 6

Сообщение от melky Посмотреть сообщение
http://jsfiddle.net/hX9zg/2/
Так, ну всё вроде красиво получилось, только во всех браузерах, при наведении на поле в котором действует скрипт, курсор мыши становится крестиком со стрелками, как при перетаскивании объекта, можно от этого как нибудь избавиться? Чтобы курсор был обычным.
Ответить с цитированием
  #8 (permalink)  
Старый 06.12.2011, 15:50
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

убери свойство
cursor: move;
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена картинок в зависимости от положения курсора мыши antonio_vrn Events/DOM/Window 3 31.05.2011 22:07
проверка положения мыши Yellow79 Javascript под браузер 6 11.05.2010 22:04