Wie man die Größe von hintergrund-Bild mit jQuery
alle! Ich hab zwei Probleme, über die Größenänderung hintergrund-Bild mit jQuery.
Zuerst habe ich eine geheimnisvolle schriftrolle-bar.
Und ich kann nicht verbergen überlauf Bild.
Mein code ist unten...
HTML
<div id="imageBG"></div>
<div id="container" closs="clearfix">
<header>
<div id="header">
<h1>飯香岡八幡宮</h1>
<p>0436-41-2027</p>
</div>
</header>
<div id="rightColumn">
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">TOP</a></li>
<li><a href="#">NEW</a></li>
<li><a href="#">INTRODUCTION </a></li>
<li><a href="#">MAP</a></li>
<li><a href="#">SPECIAL</a></li>
</ul>
</nav>
<div id="content" role="main">
</div><!-- end #content -->
</div><!-- end #rightColumn -->
<footer>
</footer>
</div><!-- end #conteiner -->
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- end scripts -->
<!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
mathiasbynens.be/notes/async-analytics-snippet -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
CSS
#container {
margin: 0 auto;
padding: 0 auto;
width: 98%;
min-width: 1250px;
height: 100%;
position: fixed;
z-index: 15;
}
#imageBG {
width: 100%;
height: 100%;
background-image: url( '../img/theme_bg.jpg' );
position: fixed;
top: 0;
left: 0;
z-index: 5;
overflow: hidden;
}
JavaScript
$( document ).ready( function() {
//Adjust the window
$.event.add( window, 'resize', adjustImageBGAndGrid );
});
function adjustImageBGAndGrid() {
var windowHeight = $(window).height(),
windowWidth = $(window).width(),
containerHeight = $( '#container' ).height() + 300,
ratio = 1280 / 720;
//adjust the container and body height so we scroll correctly
//in most major browsersm including iPad
if (windowHeight < containerHeight ) {
$( 'body' ).css( 'height', containerHeight );
} else {
$( 'body' ).css( 'height', windowHeight );
}
//adjust the size of the background grid image and video
if ( Math.round( ( windowWidth / windowHeight ) ) < ratio ) {
$( '#imageBG' ).css( {
'width': 'auto',
'height': '100%',
'left': '0px',
'right': '0px',
'top': '0px',
'bottom': '0px'
});
} else {
$( '#imageBG' ).css( {
'width': '100%',
'height': 'auto',
'left': '0px',
'right': '0px',
'top': '0px',
'bottom': '0px'
});
}
}
Ich brauche ein paar Hilfen und Tipps. Danke für die Zusammenarbeit!
- Das ist viel zu viel code. Warum nicht Sie geben Sie eine URL zu dieser Seite, damit wir sehen können Ihr Hintergrundbild?
Du musst angemeldet sein, um einen Kommentar abzugeben.
BEARBEITEN
Ich nur bekam, was Sie wirklich brauchen:
http://jsfiddle.net/KqQJX/1/
basiert auf diesem tutorial:
http://unstoppablerobotninja.com/entry/fluid-images