Question

每当我在最大化的浏览器中打开一个网站时，它就会上升并且滑动图像正常工作。但是，只要我最小化浏览器并重新最大化它，我的滑动图像就会移动到其他地方。

为了消除此问题，我必须做出哪些更改？

HTML

'<html dir="ltr" lang="<?php echo $document->language; ?>">
<head>
<jdoc:include type="head" />
<!--scroling head-->
<script src="<?php echo $templateUrl; ?>/js/scroling.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();  
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});  
});
</script>
<!--end scroling-->
<?php if ($slider_enabled == 1) { ?> <!--animacja-->
<script type="text/javascript"                           src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

<script type="text/javascript" src="<?php echo $templateUrl; ?>/js/s3Slider.js">   </script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 4000 
});
});
</script>
<!--end animacja--></script><?php } ?>

<?php if ($slider_enabled == 1) { ?> <!--animacja grafika-->
<div class="dd-object1780082794" data-left="61.13%"> <div id="slider1">
<ul id="slider1Content">
<li class="slider1Image">
<a href=""><img src="<?php echo $this->params->get('foto1'); ?>" alt="1" /></a>
<span class=""><strong></strong></span></li>
<li class="slider1Image">
<a href=""><img src="<?php echo $this->params->get('foto2'); ?>" alt="2" /></a>
<span class=""><strong></strong></span></li>
<li class="slider1Image">

</ul>
</div></div>
<!--konec animacja grafika--><?php } ?>
<div class="dd-object2048865207" data-left="59.09%"></div>
<div class="dd-object295555565" data-left="1.31%"></div>

</div>
<h1 class="dd-headline" data-left="0.76%">
<a href="<?php echo $document->baseurl; ?>/"><?php echo $this->params-     >get('siteTitle'); ?></a>
</h1>
<h2 class="dd-slogan" data-left="0.75%"><?php echo $this->params->get('siteSlogan'); ?>  </h2>


<?php if ($fc == 1) { ?><div class="dd-textblock dd-textblock-932844776" data-   left="0%">
<div class="dd-textblock-932844776-text-container">
<div class="dd-textblock-932844776-text">&nbsp;<a href="<?php echo $this->params-  >get('facebook'); ?>" target="_blank" class="dd-facebook-tag-icon"></a>&nbsp;</div>
</div><?php } ?>

<?php if ($tc== 1) { ?></div><div class="dd-textblock dd-textblock-718872902" data-  left="0%">
<div class="dd-textblock-718872902-text-container">
<div class="dd-textblock-718872902-text">&nbsp;<a href="<?php echo $this->params-  >get('twitter'); ?>/" target="_blank" class="dd-twitter-tag-icon"></a>&nbsp;</div>
</div><?php } ?>

<?php if ($rc== 1) { ?></div><div class="dd-textblock dd-textblock-203272383" data-  left="0%">
<div class="dd-textblock-203272383-text-container">
<div class="dd-textblock-203272383-text">&nbsp;<a href="<?php echo $this->params- >get('rss'); ?>" class="dd-rss-tag-icon"></a>&nbsp;</div>
</div><?php } ?>

</div>`

CSS

.dd-shapes
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 0;
}

.dd-slider-inner
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}

.dd-slidenavigator > a
{
display: inline-block;
vertical-align: middle;
outline-style: none;
font-size: 1px;
}

.dd-slidenavigator > a:last-child
{
margin-right: 0 !important; 
}


div.item-page .panel .pane-slider
{
margin: 0;
padding: 0;
}

#slider1 {
width: 942px; /* important to be same as image width */
height: 276px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#slider1Content {
width: 720px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.slider1Image {
float: left;
position: relative;
display: none;
}
.slider1Image span {
position: absolute;
font: 12px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 694px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.slider1Image span strong {
font-size: 16px;
}

Answer 1

由于尺寸可变，它会搞乱插件中的位置。你可能想重新考虑使用另一个插件，比如jquery cycle，因为它是响应式的。

在最小化/最大化期间滑动图像对准改变

1 个答案: