Javascript.RU

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

Несколько вопросов о jQuery
Доброго времени суток, решил сделать игру на CSS3 + SVG, но без jQuery никуда ведь, поэтому есть несколько вопросов с которыми не могу справиться.
Есть 4 <section> (bg,map,units,ui)
bg - это просто фон
map - интерактивная карта
units - пока не используется
ui - интерфейс
Вот HTML код
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>FrameWarp - плагин для вывода страниц в окнах | Демонстрация для сайта RUDEBOX</title>
        <!-- The stylesheets -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    
    <body>
      <section class="layer" id="bg">
        
      </section>
      <section class="layer" id="map">
        
      </section>
      <section class="layer" id="units">
        
      </section>
      <section class="layer" id="ui">
        <div class="uihead"></div>
        <div class="uimenu"></div>
      </section>
      
		<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="assets/js/script.js"></script>
        
    </body>
</html>

Тут CSS код
*{
	margin:0;
	padding:0;
}
html{
	background-color:#eee;
	background-image:-moz-radial-gradient(circle closest-corner, #eee 0%, #e0e0e0 100%);
	background-image:-o-radial-gradient(circle closest-corner, #eee 0%, #e0e0e0 100%);
	background-image:-webkit-radial-gradient(circle closest-corner, #eee 0%, #e0e0e0 100%);
	background-image:radial-gradient(circle closest-corner, #eee 0%, #e0e0e0 100%);
}
body{
	font:14px/1.3 'Segoe UI',Arial, sans-serif;
   overflow: hidden;
}
.layer {
   position: absolute;
}
#main {
   background: red;
}
#map {
   background: aqua;
   font-size: 0px;
}
.mapelement {
   background: red;
   display: inline-block;
   width: 63px;
   height: 63px;
   border: 1px solid black;
   border-top: 0px;
   border-left: 0px;
}
#units {
   background: blue;
   display: none;
}
#ui {
   width: calc(100% - 8px);
   height: calc(100% - 8px);
   border: 4px solid orange;
}
.uihead {
   position: absolute;
   width: 100%;
   height: 5%;
   background: yellow;
   top: 0;
}
.uimenu {
   position: absolute;
   width: 100%;
   height: 20%;
   background: yellow;
   bottom: 0;
}

А тут JS
$(function(){

	var mapW = 7;
	var mapH = 5;

	$("#map").width(64*mapW);
	$("#map").height(64*mapH);

	$.each( mapW*mapH, function() {
		$(".mapelement").prependTo("#map");
	})

});

1. Как сделать что бы <section id="map"> был movable? Что бы можно было двигать как карту
2. В js коде я пытаюсь циклом заполнить <section id="map"> элементами .mapelement так как это будут тайлы которые полностью заполняют саму карту. Ширина и высота карты равна установленным значениям умноженным на 64px
тайлы по высоте и ширине тоже равны 64px значит тайлов нужно создать высоту умножить на ширу. Но чего то у меня не вышло создать циклом необходимое количество тайлов внутри карты.
Ответить с цитированием
  #2 (permalink)  
Старый 06.10.2016, 19:45
Новичок на форуме
Отправить личное сообщение для Yurii12345 Посмотреть профиль Найти все сообщения от Yurii12345
 
Регистрация: 06.10.2016
Сообщений: 1

почитайте документацию http://api.jquery.com/jquery.each/


вы не те аргументы передаете в ф-ю $.aech

а где элемент .mapelement (чтоб что то вставить его нужно создать ) -- создание я не увидел ..)

Последний раз редактировалось Yurii12345, 06.10.2016 в 19:48.
Ответить с цитированием
  #3 (permalink)  
Старый 07.10.2016, 10:23
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 440

karakym,
Цитата:
но без jQuery никуда ведь
куда))
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Аналог jQuery(...).animate на чистом JS 2chan Общие вопросы Javascript 3 12.07.2015 19:23
Меню на JQuery раскрывается и закрывается несколько раз Sqaier jQuery 3 21.06.2015 08:15
Динамически загружаемая jQuery и jQuery-функции в одном файле 67bytes Общие вопросы Javascript 6 06.03.2013 09:01
пару вопросов по Jquery bot87 jQuery 2 20.04.2012 15:55
Несколько строк из mootols в jquery Ingiborn jQuery 15 24.01.2012 15:10