|
| |
|
|
| |
для: ЯСА
(26.02.2012 в 00:34)
| | | Не особо то и понял как изменить , вот целый код, он работает, вот только шар вылетает за границы
<?php
header("Content-Type: text/html; charset=utf-8");
error_reporting(E_ALL & ~E_NOTICE);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery_1_5_1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//определяем ширину и высоту рабочей области(данные переменны являются правой и нижней границей)
var pageWidth = $(document).width() - 25;
var pageHeight = $(document).height() - 25;
//отнимаем размеш шара
var otskok = pageHeight-150;
//при загрузке страницы шарик опускается вниз
$("#krug").animate({top: otskok},2200);
//назначает каскадной таблице стилей высоту и ширину площадки
$("#plozhsadka").css({'width' : pageWidth, 'height' : pageHeight});
//определение левой и верхней границы
var сe = $("#krug");
var left = сe.offset().left; //это координата left
var top = сe.offset().top; //это координата top
//при нажатии определенных сторон шара происходит разное его движение
$("#left").click(function(){
$("#krug").stop().animate({left: "+=400", top: "-=400"},2200).animate({top: otskok}, 2200);
});
$("#right").click(function(){
$("#krug").stop().animate({left: "-=400"},2200).animate({top: otskok}, 2200);
});
$("#niz").click(function(){
$("#krug").stop().animate({top: "-=400"},2200).delay("200").animate({top: otskok}, 2200);
});
});
</script>
<title>ПРЫГУЧИЙ ШАРИК</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body topmargin="0" leftmargin="0">
<span class="koor"></span>
<div id="plozhsadka" >
<img src="krug.png" usemap="#shar" id="krug">
</div>
<map name="shar">
<area shape="poly" coords="74,74,149,149,1,149" href="#" id="niz">
<area shape="poly" coords="1,1,74,1,74,74,1,149" href="#" id="left">
<area shape="poly" coords="76,1,149,1,149,149,76,76" href="#" id="right">
</map>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: mister_pipin
(26.02.2012 в 00:21)
| | | Изменения должны быть здесь - {left: "+=400", top: "-=400"}
Сначала должна быть вычислено:
максимально возможное значение для left: leftMAX = document.body.clientWidth - SHARIK.offsetWidth и
минимально возможное для top: topMIN = 0
Затем надо найти Math.min (left+=400, leftMAX) и Math.max (top -=400, topMIN)
И вот эти два полученных значения должны быть вписаны вместо "+=400" и "-=400"
Но синтаксисом JQuery я не владею.
Тут "гуру JQuery" (они же - "фанаты JQuery") имеются, подождите ответы от них. | |
| |
|
|
| |
|
|
| |
для: ЯСА
(25.02.2012 в 21:27)
| | |
$("#left").click(function(){
$("#krug").stop().animate({left: "+=400", top: "-=400"},2200).animate({top: otskok}, 2200);
});
|
при нажатии на левую часть шарика он летит вправо вверх и падает, подскажите как и что дописать что бы он не вылетал за борты?
за ранее спасибо | |
| |
|
|
| |
|
|
| |
для: mister_pipin
(25.02.2012 в 18:09)
| | | Шарик ведь двигается не сам по себе.
Работает какой-то скрипт, который устанавливает ему координаты left и top с какой-то частотой.
Вот в этот самый скрипт надо и ввести УСЛОВИЕ (а никак не "событие") пересечения объектом SHARIK (шариком) 4-х линий:
left < 0 -- "вылетает" за левую границу окна
top < 0 -- "вылетает" за верхнюю границу окна
left > (document.body.clientWidth - SHARIK.offsetWidth) -- "вылетает" за правую границу окна
top > (document.body.clientHeight - SHARIK.offsetHeight) -- "вылетает" за нижнюю границу окна | |
| |
|
|
| |
|
|
| | Всем привет!
Окно браузера это рабочая область. В этой области есть шарик. При клике на шарик он начинает двигаться(кликнули снизу - он полетел вверх, кликнули слева - шарик полетел вверх вправо и тд).
Код автоматически определяет ширину и высоту окна браузера.
Подскажите как вызвать событие в тот момент., когда шарик собирается вылететь из рабочей области?
За ранее спасибо | |
| |
|
|
|
