0
나는 그것의 "SRC"에서 자바 스크립트를 통해 URL을 인쇄하여 "IMG"에 다른 이미지를로드하는이 코드가 있습니다. CSS가 "img"태그의 내용과 관련된 마술을 한 후에.온로드
$(window).load(function() {
var randomImages = ['img1','img2','img3','img4','img5','img6','img7','img8','img9','img10','img11','img12','img13','img14','img15','img16','img17','img18','img19','img20','img21','img22','img23','img24','img25','img26','img27','img28','img29','img30'];
var rndNum = Math.floor(Math.random() * randomImages.length);
var $win = $(this);
var iMac = $(window).width() > 1920 ? '_imac' : '';
var $img = $('#background').attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + iMac + '.jpg').css({'position':'fixed','top':0,'left':0});
function resize() {
if (($win.width()/$win.height()) < ($img.width()/$img.height())) {
$img.css({'height':'100%','width':'auto'});
} else {
$img.css({'width':'100%','height':'auto'});
}
}
$win.resize(function() { resize(); }).trigger('resize');
});
나는 새로운 웹을 만드는거야 내가 배열의 사진을 선택 동일한 시스템을 사용하고자하지만, CSS 배경 이미지에 사진의 URL을 적용.
#home{
background: url(INSERT URL OF JAVASCRIPT HERE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
$(window).load(function() {
var randomImages = ['img1','img2','img3'];
var rndNum = Math.floor(Math.random() * randomImages.length);
var url = 'url(_img/bg_array/' + randomImages[rndNum] + '.jpg)'
$('#home').css({
'background:' url 'no-repeat' 'center' 'center' 'fixed',
'-webkit-background-size': 'cover',
'-moz-background-size': 'cover',
'-o-background-size': 'cover',
'background-size': 'cover'
});
}
감사합니다 !!!!
편집 : 더 많은 정보 ////////////////////////////// jfriend00의 대답은 100 % 정확 보인다
및 논리. 두 번째 옵션을 사용하려고합니다. 나는 두 옵션을 모두 시도했지만 둘 다 작동하지 않는 것 같습니다. 나는 또한 자바 스크립트를 통해 #home하는 간단한 코드를 적용하는 시도하고이 작업을 나던 ... 그래서 자바 스크립트 파일과 HTML 사이의 연결에 문제가 있다고 생각, 어쩌면 문제는 다른 곳에 ...
입니다여기에 좀 더 가능한 유용한 정보를 넣어 것입니다. 머리에 differentnt 파일에 내 html과 내 연결을 삽입합니다. 아마도 도움이 될 것입니다. 수평 레이아웃으로 웹을 만들고 있습니다. 그것은 ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DJ Femke</title>
<!-- JAVASCRIPT CONNECTIONS -->
<script type="text/javascript" src="_js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="_js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="_js/scroll_resize.js"></script>
<script type="text/javascript" src="_js/onload.js"></script>
<!-- CSS CONNECTIONS -->
<link type="text/css" rel="stylesheet" href="_css/style.css" media="screen"/>
</head>
<body>
<div id="wrapper">
<div id="mask">
<div id="booking" class="item">
<a name="item1"></a>
<div class="content">item1
<a href="#booking" class="panel">1</a> |
<a href="#about_me" class="panel">2</a> |
<a href="#home" class="panel">3</a> |
<a href="#music" class="panel">4</a> |
<a href="#photo_video" class="panel">5</a>
<a href="#contact" class="panel">6</a>
<p>BOOKING</p>
</div>
</div>
<div id="about_me" class="item">
<a name="item2"></a>
<div class="content">about_me
<a href="#booking" class="panel">1</a> |
<a href="#about_me" class="panel">2</a> |
<a href="#home" class="panel">3</a> |
<a href="#music" class="panel">4</a> |
<a href="#photo_video" class="panel">5</a>
<a href="#contact" class="panel">6</a>
<p>ABOUT ME</p>
</div>
</div>
<div id="home" class="item" src="">
<a name="item3"></a>
<div class="content">item3
<a href="#booking" class="panel">1</a> |
<a href="#about_me" class="panel">2</a> |
<a href="#home" class="panel">3</a> |
<a href="#music" class="panel">4</a> |
<a href="#photo_video" class="panel">5</a>
<a href="#contact" class="panel">6</a>
<p>HOME</p>
</div>
</div>
<div id="music" class="item">
<a name="item4"></a>
<div class="content">item4
<a href="#booking" class="panel">1</a> |
<a href="#about_me" class="panel">2</a> |
<a href="#home" class="panel">3</a> |
<a href="#music" class="panel">4</a> |
<a href="#photo_video" class="panel">5</a>
<a href="#contact" class="panel">6</a>
<p>MUSIC</p>
</div>
</div>
<div id="photo_video" class="item">
<a name="item5"></a>
<div class="content">item5
<a href="#booking" class="panel">1</a> |
<a href="#about_me" class="panel">2</a> |
<a href="#home" class="panel">3</a> |
<a href="#music" class="panel">4</a> |
<a href="#photo_video" class="panel">5</a>
<a href="#contact" class="panel">6</a>
<p>PHOTO AND VIDEO</p>
</div>
</div>
<div id="contact" class="item">
<a name="item6"></a>
<div class="content">item6
<a href="#booking" class="panel">1</a> |
<a href="#about_me" class="panel">2</a> |
<a href="#home" class="panel">3</a> |
<a href="#music" class="panel">4</a> |
<a href="#photo_video" class="panel">5</a>
<a href="#contact" class="panel">6</a>
<p>CONTACT</p>
</div>
</div>
</div>
</div>
</body>
</html>
JQuery와 통해 완벽하게 작동 않습니다 :
$(window).load(function() {
var randomImages = ['img1','img2','img3'];
var rndNum = Math.floor(Math.random() * randomImages.length);
var url = 'url(_img/bg_array/' + randomImages[rndNum] + '.jpg)'
$('#home').css({
'background': url + 'no-repeat center center fixed',
'-webkit-background-size': 'cover',
'-moz-background-size': 'cover',
'-o-background-size': 'cover',
'background-size': 'cover'
});
}
어쩌면 그 편리 ... 내 파일 구조 : 
+1 - 내가 옵션 1을 선택 것 - 그것이가는대로 좋은 다른 언어/스크립트 언어의 서로 다른 코드를 분리해서 좋은 스타일이다. –
안녕하세요 jfriend00. 그게 내가 필요한 대답 인 것 같아. 당분간은 저를 위해 일하지 않습니다. 나는 두 번째 옵션을 시도하고있다. 이 코드를 테스트 해 보셨습니까? 나는 또한 성공하지 못한 첫 번째 옵션을 시도했다. 모든게 올바른 것 같습니다 ... 나는 다른 URL 경로를 시도하고 그 문제가되지 않습니다. 내 이미지의 이름이 올바르게 ... 테스트 되었습니까? –
@ DanielRamirez-Escudero - 두 번째 옵션에서 누락 된 공간이 있으므로 알아 두었습니다. 이들 중 어느 것도 작동하지 않는다면 특정 상황과 관련이 있습니다. 실제 웹 페이지를 제공하면 디버깅 할 수 있습니다. 그렇지 않으면 직접 문제를 해결해야합니다. 내 생각 엔 당신이 실행에서 뭔가를 중지하거나 오른쪽 이미지 경로를 건설하지 않는 스크립트 오류가있을 것입니다. 웹 페이지 링크를 제공하지 않으면 테스트 할 수 없습니다. – jfriend00