Javascript.RU

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

Про картинку в качестве фона
Ребят, подскажите, можно ли задать такую зависимость:
есть картинка-фотография фоном. Я хочу, чтобы она занимала все окно, но не меняла пропорций при этом.
Мне кажется, что самый удобный вариант будет таким: если картинка пропорционально длиннее, чем экран, то её кусок справа просто не отображается, как бы обрезается. и полоса прокрутки при это не появляется
если картинка выше при стопроцентной ширине, то обрезается в высоту, опять же без прокрутки.
Так делают?
Ответить с цитированием
  #2 (permalink)  
Старый 08.03.2013, 00:00
Аспирант
Отправить личное сообщение для Ahterknica Посмотреть профиль Найти все сообщения от Ahterknica
 
Регистрация: 13.02.2013
Сообщений: 59

В общем, я даже нашла, что нужно получить.
Но не могу соединить.
У меня есть такой код для страницы:
<script type="text/javascript">
var i , t,
    b;
var speed = 6000
var Pic = ['image/img_1.jpg',
'image/img_2.jpg',
'image/img_3.jpg',
'image/img_4.jpg']
var j = 0
var p = Pic.length
for (i = 0; i < p; i++){
   var preLoad = new Image()
   preLoad.src = Pic[i]
   Pic[i] = preLoad
}
function get(a) {
    var c = document,
        d = c.body,
        e = c.documentElement,
        f = "client" + a;
    a = "scroll" + a;
    return c.compatMode === "CSS1Compat" ? Math.max(e[f], e[a]) : Math.max(d[f], d[a])
}
window.onload = fon;
i = new Image;
function fon() {
    window.clearTimeout(t);
    j++
    j %= p
    i.src = Pic[j].src;
    i.style.position = "absolute";
    i.style.left = "0px";
    i.style.top = "0px";
    i.style.height = get("Height") + "px";
    i.style.zIndex = -999;
    i.id="img"
    document.body.appendChild(i)
    t = setTimeout(fon, speed)
}
window.onresize = function () {
   var i = document.getElementById("img");
   if(i) document.body.removeChild(i);
    window.clearTimeout(b);
    b = window.setTimeout(function () {
        fon()
    }, 20)
};
</script>


и есть вот такая штука, которая как раз и делает, то что мне нужно:

<img src="images/bg.jpg" id="bg" alt="">

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }


$(window).load(function() {    
 
        var theWindow        = $(window),
            $bg              = $("#bg"),
            aspectRatio      = $bg.width() / $bg.height();
 
        function resizeBg() {
 
                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                    $bg
                        .removeClass()
                        .addClass('bgheight');
                } else {
                    $bg
                        .removeClass()
                        .addClass('bgwidth');
                }
 
        }
 
        theWindow.resize(function() {
                resizeBg();
        }).trigger("resize");
 
});


как мне их совместить? чтобы функция второго скрипта применялась к переменным первого. Чтобы эти вот меняющиеся картинки растягивались согласно скрипту номер два.
Ответить с цитированием
  #3 (permalink)  
Старый 08.03.2013, 02:53
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,492

С обрезанием это элементарнейший вариант. Делается это без всякого js:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
	<meta charset="UTF-8">
	<style type="text/css">
	* {
		margin: 0; padding:0;
	}
	
	html, body {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	
	img {
		min-width: 100%;
		min-height: 100%;
	}
	</style>
</head>
<body>
	<img src="http://www.deviantart.com/download/358128988/new_visitor_by_maxdamagetorture-d5x7y3g.jpg"/>
</body>
</html>
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 08.03.2013, 04:56
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Кажется я этот [говно]код (#2) где-то уже видел. Где вы его взяли?
Ответить с цитированием
  #5 (permalink)  
Старый 11.03.2013, 15:55
Аспирант
Отправить личное сообщение для Ahterknica Посмотреть профиль Найти все сообщения от Ahterknica
 
Регистрация: 13.02.2013
Сообщений: 59

Сообщение от Aetae
С обрезанием это элементарнейший вариант. Делается это без всякого js:
блин, все так просто.
Спасибо.
Ответить с цитированием
  #6 (permalink)  
Старый 11.03.2013, 18:17
Новичок на форуме
Отправить личное сообщение для Uladzimir Посмотреть профиль Найти все сообщения от Uladzimir
 
Регистрация: 11.03.2013
Сообщений: 7

Всем доброго дня! Сразу оговорюсь, что я в программировании НОЛЬ!
нужна помощь!

<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
window.open("http:.........com", "Name","location=1, toolbar=0, directories=0, menubar=0, scrollbars=0, resizable=0, width=500, height=700");
//-->
//]]>
</script>


Вопрос! Можно ли, если да то где, и что нужно вставить, чтобы появилась полоса прокрутки (боковая) сверху вниз.
Заранее спасибо!
Ответить с цитированием
  #7 (permalink)  
Старый 11.03.2013, 18:42
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Uladzimir, а где картинка?
Ответить с цитированием
  #8 (permalink)  
Старый 11.03.2013, 18:48
Новичок на форуме
Отправить личное сообщение для Uladzimir Посмотреть профиль Найти все сообщения от Uladzimir
 
Регистрация: 11.03.2013
Сообщений: 7

Это не картинка, а ссылка на вот это http://scores.betrescue.com/golf/
Ответить с цитированием
  #9 (permalink)  
Старый 11.03.2013, 18:55
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Тогда как твой вопрос связан с текущей темой ("Про картинку в качестве фона") ?
Ответить с цитированием
  #10 (permalink)  
Старый 11.03.2013, 19:10
Новичок на форуме
Отправить личное сообщение для Uladzimir Посмотреть профиль Найти все сообщения от Uladzimir
 
Регистрация: 11.03.2013
Сообщений: 7

Конкретно темы только о прокрутке я не нашёл, перенаправьте пожалуйста и я там оставлю свой пост
сори что не в тему!
Просто устал искать.

Последний раз редактировалось Uladzimir, 11.03.2013 в 19:15.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смен фона форума по ссылки на картинку lyamon4ik Элементы интерфейса 6 17.01.2013 14:25
Как правильно забрать картинку с сервера? Serh AJAX и COMET 4 30.07.2012 14:05
Алгоритм плавной смены фона или изображения vandy3 Общие вопросы Javascript 6 11.11.2010 00:56
VML в качестве фона FINoM (X)HTML/CSS 5 04.10.2010 22:26
Как использовать спрайты для Inline-блоков в качестве фона в IE6? Nominus umbra (X)HTML/CSS 2 11.06.2010 21:58