Расширение фона с помощью JavaScript -- javascript поле с участием html поле с участием css пол Связанный проблема

Extending a background using Javascript


1
vote

проблема

русский

У меня есть страница, которая выглядит так

 <код> ----------------------------------- |          *************          |           |          *************          |           |          *************          |           |          *************          |           |          *************          |           |          *************          | -----------------------------------   

Внешняя рамка является краем браузера и, следовательно, <код> <manifest ...> <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19"/> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> : <application ... > : </application> </manifest> 0 , а звезды - это центрированное фоновое изображение на <код> <manifest ...> <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19"/> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> : <application ... > : </application> </manifest> 1

Теперь, используя JavaScript, я хотел бы добавить некоторые недорогие позиционируемые Divs каждая сторона этого фона, чтобы продлить его:

 <код> <manifest ...>     <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19"/>      <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>      :       <application ... >           :     </application> </manifest> 2  

По мере того, как окно изменяется в центре сосредоточенного фона (чтобы остаться в центре окна), поэтому divs на каждой стороне должен перемещаться вследствие.

Может кто-нибудь, пожалуйста, предложить подход к решению этой проблемы?

Боковая заметка на том, почему я делаю это:

Фон большое изображение, и я хочу повторить его по экрану, перевернув его, как описано здесь:

Фон, перевернутый плиток с использованием JavaScript

Фактический процесс переворачивания обсуждался в этом вопросе, тогда как этот вопрос сделки с аспектом позиционирования CSS / JavaScript.

Обратите внимание, что в случае не способных браузеров я счастлив, оставьте страницу, как она находится на первой диаграмме, с только центрированным фоном.

Английский оригинал

I have a page that looks like this

----------------------------------- |          *************          |           |          *************          |           |          *************          |           |          *************          |           |          *************          |           |          *************          | ----------------------------------- 

The outer frame is the browser edge and thus the <body>, and the stars are a centred background image on the <body> element.

Now, using javascript I'd like to add some aboslutely positioned DIVs each side of that background in order to extend it:

----------------------------------- |*********|*************|*********|           |*********|*************|*********|           |*********|*************|*********|           |*********|*************|*********|           |*********|*************|*********|           |*********|*************|*********| ----------------------------------- 

As the window is resized the centred background will move (to remain in the center of the window), so the divs on each side should move in consequence.

Can anyone please suggest an approach to solving this issue?

Side note on why I'm doing this:

The background is large image, and I wish to have it repeated across the screen by flipping it as described here:

Background flipped tiling using Javascript

The actual process of flipping was discussed in that question, whereas this question deals with the CSS/Javascript aspect of positioning.

Note that in the case of non-capable browsers I'm happy leave the page as it is in the first diagram, with only the centred background.

</div
        
         
         

Список ответов

0
 
vote
vote
Лучший ответ
 

Вот мой статический раствор CSS. Это похоже на Ответ Мэтта Но я не мог заставить его работать с перешитыми изображениями и гибкой шириной.

Demo здесь.

До сих пор это добавляет только один div на каждую сторону. Если вам нужно больше, я мог бы написать js для этого. HTML Markup страницы:

 <код> <div class="content">     <div class="left-background"></div>     <div class="right-background"></div>     content </div>   

и CSS:

 <код> body {     color: #dddddd;     overflow-x: hidden; } @media (max-width: 400px) {     body {         overflow-x: visible;     }     .left-background, .right-background {         display: none;     } } .content, .left-background, .right-background {     background-image: url(http://flickholdr.com/400/300/sea,sun/bw);     height: 200px;     width: 400px; } .left-background, .right-background {     -moz-transform:    scaleX(-1);     -o-transform:      scaleX(-1);     -webkit-transform: scaleX(-1);     transform:         scaleX(-1);     filter:            FlipH;     -ms-filter:        "FlipH";      position: absolute; } .left-background {     left: -400px; } .right-background {     right: -400px; } .content {     margin: 0 auto;     position: relative; }   
 

Here's my static CSS solution. It's similar to Matt's answer but I couldn't get his to work with flipped images and flexible width.

Demo here.

So far it only adds a single div on each side. If you need more, I could write some JS for that. The HTML markup of the page is:

<div class="content">     <div class="left-background"></div>     <div class="right-background"></div>     content </div> 

and CSS:

body {     color: #dddddd;     overflow-x: hidden; } @media (max-width: 400px) {     body {         overflow-x: visible;     }     .left-background, .right-background {         display: none;     } } .content, .left-background, .right-background {     background-image: url(http://flickholdr.com/400/300/sea,sun/bw);     height: 200px;     width: 400px; } .left-background, .right-background {     -moz-transform:    scaleX(-1);     -o-transform:      scaleX(-1);     -webkit-transform: scaleX(-1);     transform:         scaleX(-1);     filter:            FlipH;     -ms-filter:        "FlipH";      position: absolute; } .left-background {     left: -400px; } .right-background {     right: -400px; } .content {     margin: 0 auto;     position: relative; } 
</div
 
 
1
 
vote

Добавьте два равных с помощью JavaScript. Чем устанавливаю свои позиции, как вы хотите в отношении центра экрана. Чем добавьте событие ONRESIZE, которое будет изменено повторно, когда окно браузера будет изменяться.

 <код> window.onresize = updateDivsPosition;   
 

Add the two DIVs using javascript. Than set their positions as you wish in relation to the centre of the screen. Than add an onresize event which will reposition DIVs when the browser window gets resized.

window.onresize = updateDivsPosition; 
</div
 
 
 
 
1
 
vote

Вы можете попробовать чистое решение CSS с использованием позиционирования. Я предполагаю, что у вас есть изображение фиксированного размера в центре страницы. Например, ради скажем, ваше изображение шириной 800 пикселей, затем

    .
  • Установите левый div с левым 0px, верно 50% и добавьте правый маржа 400px
  • Установите правый div с левой 50%, правый 0px и добавьте левое поле 400px

<Сильный> Пример: http://jsfiddle.net/f4kay/ P >.

(обратите внимание, что я предположил меньшую ширину 256px изображения для небольшого окна jsfiddle)

<Сильные> CSS:

 <код> #left {     position:absolute;     left:0px;     right:50%;     top:0px;     bottom:0px;     margin-right: 128px; /* image width / 2 */     background-color:#ccc; }      #right {     position:absolute;     left:50%;     right:0px;     top:0px;     bottom:0px;     margin-left: 128px; /* Image width / 2 */     background-color:#ccc;   }   

<Сильные> HTML:

 <код> <div id="left">Left</div> <div id="right">Right</div>​   

Что касается высоты этих Div, решать вам, как вы имеете дело с этим, либо сверху / снизу: 0PX или фиксированная / процентная высота. В примере я использовал Top 0PX и снизу 0PX.

Хитрость - в основном добавить 2 Divs, которые занимают левую половину экрана и другой, который занимается правильно. Вы добавляете маржу на внутренние края Div, чтобы раскрыть внутреннее содержимое. Я предположил фиксированную ширину, но вы также можете использовать половину процентной ширины. Если ваше изображение меняется динамически с JS, это просто случай обновления полей.


Для полноты я включил полный пример, используя эту технику. Я думаю, что это чистое решение.

Пример: http://jsfiddle.net/hqpyx/ P >.

<Сильные> CSS:

 <код> body, .bgImage {     background-image: url('http://flickholdr.com/640/1280/5'); }  .flip {     -moz-transform:    scaleX(-1);     -o-transform:      scaleX(-1);     -webkit-transform: scaleX(-1);     transform:         scaleX(-1);     filter:            FlipH;     -ms-filter:        "FlipH"; }  body {  background-position: top center;      }  #left {     position:absolute;     left:0px;     right:50%;     top:0px;     bottom:0px;     margin-right: 320px; /* image width / 2 */     background-position:top left;     }   #right {     position:absolute;     left:49.99%;     right:0px;     top:0px;     bottom:0px;     margin-left: 320px; /* Image width / 2 */     background-position:top right; }   

<Сильные> HTML:

 <код> <div id="left" class="bgImage flip"></div> <div id="right" class="bgImage flip"></div>​   

Лично я бы избежал лишить такого изображения. Если у вас есть ограничение, вы можете просто редактировать свое фоновое изображение и сращивание половины половины перевернутой версии, как

 <код> [ ] = full image  { } = flipped image  create an image that looks like  }[ ]{    

 

You can try a pure css solution using positioning. I am assuming that you have a fixed-size image in the centre of the page. For example's sake let's say your image is 800px wide, then

  • Position the left div with left 0px, right 50% and add a right margin of 400px
  • Position the right div with left 50%, right 0px and add a left margin of 400px

Example: http://jsfiddle.net/F4kay/

(note that I have assumed a smaller image width 256px for the smaller jsfiddle window)

CSS:

#left {     position:absolute;     left:0px;     right:50%;     top:0px;     bottom:0px;     margin-right: 128px; /* image width / 2 */     background-color:#ccc; }      #right {     position:absolute;     left:50%;     right:0px;     top:0px;     bottom:0px;     margin-left: 128px; /* Image width / 2 */     background-color:#ccc;   } 

HTML:

<div id="left">Left</div> <div id="right">Right</div>​ 

As for the height of these divs, it's up to you how you deal with this, either top / bottom: 0px or a fixed/percentage height. In the example I have used top 0px and bottom 0px.

The trick is to basically add 2 divs, one which takes up the left half of the screen and another which takes up the right. You add a margin to the inner div edges to reveal the inner contents. I have assumed a fixed width but you could also use half of a percentage width. If your image changes dynamically with js it's just a case of updating the margins.


For completeness, I've included a full example using this technique. I think it's a clean solution.

Example: http://jsfiddle.net/Hqpyx/

CSS:

body, .bgImage {     background-image: url('http://flickholdr.com/640/1280/5'); }  .flip {     -moz-transform:    scaleX(-1);     -o-transform:      scaleX(-1);     -webkit-transform: scaleX(-1);     transform:         scaleX(-1);     filter:            FlipH;     -ms-filter:        "FlipH"; }  body {  background-position: top center;      }  #left {     position:absolute;     left:0px;     right:50%;     top:0px;     bottom:0px;     margin-right: 320px; /* image width / 2 */     background-position:top left;     }   #right {     position:absolute;     left:49.99%;     right:0px;     top:0px;     bottom:0px;     margin-left: 320px; /* Image width / 2 */     background-position:top right; } 

HTML:

<div id="left" class="bgImage flip"></div> <div id="right" class="bgImage flip"></div>​ 

Personally I would avoid flipping the image like this. Unless you have some restriction you could just edit your background image and splice half and half of a flipped version together like

[ ] = full image  { } = flipped image  create an image that looks like  }[ ]{  
</div
 
 

Связанный проблема

1  Путь нужна модуль в узле JS Работа в Windows, но не в Linux  ( Path of require module in node js work in windows but not in linux ) 
У меня это в моем коде <Код> var queries = require('./Queries.js'); При запуске сервера узла в Windows CMD в порядке. Я клонировать пролей в сервере Li...

0  Проблема космического дерева JavaScript  ( Space tree javascript problem ) 
Я использую Space Tree Java Script для создания диаграммы организации. Теперь, когда это работает нормально, но проблема в том, что я не могу печатать график ...

-2  Динамический фон WordPress на основе изображений слайдера  ( Dynamic wordpress background based on slider images ) 
Я использую NivoSlider на WordPress, и я хочу, чтобы фона моей домашней страницы измениться на основе текущего изображения слайда! У меня нет опыта работы в J...

6  Как вызвать функцию JavaScript в верхней раме?  ( How to call a javascript function in the top frame ) 
Это кажется действительно простым, но как мне позвонить функцию JavaScript, которая определяется в HTML верхнего уровня, от детской рамы? <код> top html doc...

8  Почему я не могу удалить это cookie?  ( Why cant i delete this cookie ) 
Хорошо, вот 411 - у меня есть следующий обработчик событий в моем файле Global.Asax.cs: <код> private void Global_PostRequestHandlerExecute(object sender, E...

0  Asp.net внутри тега скрипта  ( Asp net inside a script tag ) 
Я пытаюсь получить некоторую работу с некоторыми JavaScript, который делает график в зависимости от предоставленной вами информации. Я говорю о Это <код...

8  Предотвращение DOM XSS  ( Preventing dom xss ) 
Мы недавно мы на борту чужого кода, который с тех пор был проверен, и не удалось, для атаки DOM XSS. В основном фрагменты URL передаются непосредственно в сел...

0  JavaScript -Paste из буфера обмена к определенной ячейке в Excel  ( Javascript paste from clipboard to specific cell in excel ) 
У меня есть функция JS, которая копирует изображение от Div на буфер обмена (только в IE) и вставляет его в Excel. Я хотел бы знать, как я могу вставить содер...

0  Есть ли способ определить проверенную переключатель перед отправкой формы?  ( Is there a way to determine checked radio button before form submission ) 
Я работаю над созданием динамической формы проверки полосы. Я хотел бы, чтобы форма изменилась на основе выбора радиопередачи. Вот код у меня есть до сих пор....

0  Как добавить значение для массива после проверки другого массива  ( How to add value to array after checking another array ) 
У меня есть два массива как таковые: <код> UserGroupUser[{Id:"1",UserId:"2",UserGroupId"1"}, {Id:"2",UserId:"3",UserGroupId"1"}, {Id:...

0  Обратный вызов для GridView Yii2 CheckboxColumn  ( Callback for yii2s gridview checkboxcolumn ) 
У меня есть <код> GridView (yii2) и один из столбцов - это логический тип данных. Я хочу быть в состоянии переключить это значение и сохранить его в моей баз...

1  Передача нескольких массивов на график C3  ( Passing multiple arrays to c3 graph ) 
У меня есть API, давая мне несколько массивов, которые я должен поместить на диаграмме линии C3. Кажется, я умею построить просто хорошо, но если я начну прох...

7  Объект IIFE и Window?  ( Iife and window object ) 
<Код> IIFE Что нужно получить доступ без переопределения <код> window объект - можно рассматривать как: что-то вроде ( jQuery Пример): <код> $(function...

1  Как я могу выбрать вторую кнопку Отмена, а не первым?  ( How can i select the second cancel button instead of the first ) 
Я хочу отменить второй элемент строки вместо первого. Ниже приведен какой-то пример код для 2 позиций: <код> <div class="screenlet-body"> <form na...

0  Почему угловые $ не удаляют старое значение?  ( Why is angular scope not removing old value ) 
У меня есть следующий контроллер <код> angular.module('publicApp') .controller('URLSummaryCtrl', function ($scope, $location, Article, $rootScope, $timeou...