所以我在 sharepoint 中构建一个 webpart 内的 jquery 滑块。我正在使用的图像是 1920x300，我的滑块会缩放它们以适应液体设计。Sharepoint 模板也是液体/流体。在 IE 中，Sharepoint 以 quirks 模式呈现，因为出于某种原因，它们不使用 doctype。当文档加载时，我看到初始图像按比例缩小，但是一旦脚本触发，它们就会变成全尺寸并将我的布局推离页面。有人可以解释这里发生了什么吗？
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
(function($){
var quan = $(document).width();
$('html').css({maxWidth: quan+'px',overflow: 'hidden'});
$.fn.extend({
mainSlider: function(options) {
//default values for plugin options
var defaults = {
interval: 5000,
duration: 500,
lineheight: 1,
height: 'auto', //reserved
hoverpause: true,
pager: true,
nav: true, //reserved
keynav: true
}
var options = $.extend(defaults, options);
return this.each(function() {
var o = options;
var obj = $(this);
//store the slide and pager li
var slides = $('.slides li', obj);
var pager = $('.pager li', obj);
var cap = $('.caption');
//set initial current and next slide index values
var current = 0;
var next = current+1;
//get height and width of initial slide image and calculate size ratio
var imgHeight = slides.eq(current).find('img').height();
var imgWidth = slides.eq(current).find('img').width();
var imgRatio = imgWidth/imgHeight;
//define vars for setsize function
var sliderWidth = 0;
var cropHeight = 0;
//hide all slides, fade in the first, add active class to first slide
slides.hide().eq(current).fadeIn(o.duration).addClass('active');
//build pager if it doesn't already exist and if enabled
if(pager.length) {
pager.eq(current).addClass('active');
} else if(o.pager){
obj.append('<ul class="pager"></ul>');
slides.each(function(index) {
$('.pager', obj).append('<li><a href="#"><span>'+index+'</span></a></li>')
});
pager = $('.pager li', obj);
pager.eq(current).addClass('active');
}
//rotate to selected slide on pager click
if(pager){
$('a', pager).click(function() {
//stop the timer
clearTimeout(obj.play);
//set the slide index based on pager index
next = $(this).parent().index();
//rotate the slides
rotate();
return false;
});
}
//primary function to change slides
var rotate = function(){
//fade out current slide and remove active class,
//fade in next slide and add active class
var name = slides.eq(next).find('a').attr('title');
var dlink = slides.eq(next).find('a').attr('href');
var tex = slides.eq(next).find('img').attr('alt');
cap.slideToggle('slow',function(){
$(this).empty().append('<a href='+dlink+' title='+name+'>'+tex+name+'</a>')
});
slides.eq(current).fadeOut(o.duration).removeClass('active')
.end().eq(next).fadeIn(o.duration).addClass('active').queue(function(){
//add rotateTimer function to end of animation queue
//this prevents animation buildup caused by requestAnimationFrame
//rotateTimer starts a timer for the next rotate
rotateTimer();
$(this).dequeue();
cap.slideToggle();
});
//Update the Caption
//update pager to reflect slide change
if(pager){
pager.eq(current).removeClass('active')
.end().eq(next).addClass('active');
}
//update current and next vars to reflect slide change
//set next as first slide if current is the last
current = next;
next = current >= slides.length-1 ? 0 : current+1;
};
//create a timer to control slide rotation interval
var rotateTimer = function(){
obj.play = setTimeout(function(){
//trigger slide rotate function at end of timer
rotate();
}, o.interval);
};
//start the timer for the first time
rotateTimer();
//pause the slider on hover
//disabled by default due to bug
if(o.hoverpause){
slides.hover(function(){
//stop the timer in mousein
clearTimeout(obj.play);
}, function(){
//start the timer on mouseout
rotateTimer();
});
}
//calculate and set height based on image width/height ratio and specified line height
var setsize = function(){
sliderWidth = $('.slides', obj).width();
cropHeight = Math.floor(((sliderWidth/imgRatio)/o.lineheight))*o.lineheight;
$('.slides', obj).css({height: cropHeight});
};
setsize();
//bind setsize function to window resize event
$(window).resize(function(){
setsize();
});
//Add keyboard navigation
if(o.keynav){
$(document).keyup(function(e){
switch (e.which) {
case 39: case 32: //right arrow & space
clearTimeout(obj.play);
rotate();
break;
case 37: // left arrow
clearTimeout(obj.play);
next = current - 1;
rotate();
break;
}
});
}
});
}
});
})(jQuery);
$(document).ready(function() {
var ftex = $('.slides li').first().find('img').attr('alt');
var flink = $('.slides li').first().find('img').attr('alt');
$('.caption').empty().append('<a href='+flink+' title='+ftex+'>'+ftex+'</p>');
$('.mainSlider').mainSlider({
interval: 5000,
duration: 500,
lineheight: 1,
hoverpause: false,
pager: true,
keynav: true
});
//End Window Load
});
</script>
<!--[if lt IE 9]>
<style> .mainSlider { width:100%; overflow:hidden; }
<![endif]-->
<style>
.mainSlider { margin: 0 auto; font-family:Arial, Helvetica, sans-serif;}
.mainSlider ul{
margin: 0px;
padding: 0px;
}
.mainSlider .slides {
display: block;
position: relative;
overflow: hidden;
}
.mainSlider .slides li {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.mainSlider .slides li img {
display: block;
width: 100%;
max-width: none;
}
.mainSlider .slides li img:hover {
opacity: .95;
filter:alpha(opacity=95); /* For IE8 and earlier */
}
.mainSlider .slides li.active { display: block; position: relative; }
.mainSlider .crop li img { width: auto; }
.mainSlider .pager {
position:relative;
float:right;
margin: -40px 10px 0px 0px;
height: 40px;
max-width: 300px;
text-align: right;
z-index: 10000;
}
.mainSlider .pager li { float: left;}
.mainSlider .pager li a,
.mainSlider .pager li a span {
display: block;
height: 16px;
width: 16px;
}
.mainSlider .pager li a {
padding: 8px 8px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.mainSlider .pager li a span {
overflow: hidden;
background: #dfdfdf;
text-indent: 9999px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.mainSlider .pager li.active a span { background: #404040; }
.caption {
position:absolute;
display:table-cell;
vertical-align:middle;
height: 50px;
width: 100%;
bottom: 0px;
left: 0px;
padding: 10px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */ /* Opera/IE 8+ */
background-image: url(http://mysite.nrc.gov/personal/ewg1/Personal%20Documents/capBG.png);
background-repeat:repeat-x;
z-index: 9999;
}
.caption a{
color: #000;
text-align:left;
font-size:24px;
margin-top: 10px;
}
.caption a:hover{
color: #003366;
text-decoration: none;
}
</style>
<div id="sliderContent">
<!-- mainSlider -->
<div class="mainSlider">
<ul class="slides">
<div class="caption"><p></p></div>
<li>
<a href="#" title=""><img alt="What do I do at Region II?" src="http://mysite.nrc.gov/personal/ewg1/Personal%20Documents/tronCar.jpg" /></a>
</li>
<li>
<a href="#" title=""><img alt="Graphic Design..." src="http://mysite.nrc.gov/personal/ewg1/Personal%20Documents/bueTiger.jpg" /></a>
</li>
<li>
<a href="#" title=""><img alt="Web Design..." src="http://mysite.nrc.gov/personal/ewg1/Personal%20Documents/squares.jpg" /></a>
</li>
<li>
<a href="#" title=""><img alt="Audio..." src="http://mysite.nrc.gov/personal/ewg1/Personal%20Documents/audioProduction.jpg" /></a>
</li>
<li>
<a href="#" title=""><img alt="Audio..." src="http://mysite.nrc.gov/personal/ewg1/Personal%20Documents/videoProduction.jpg" /></a>
</li>
</ul>
</div>
<!-- mainSlider -->
</div>