每当我在最大化浏览器中打开网站时,它都会上升,并且滑动图像可以正常工作。但是,当我最小化浏览器并重新最大化它时,我的滑动图像已移至其他位置。

为了消除此问题,我必须进行哪些更改?

的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;
}


'

最佳答案

由于大小可变,它弄乱了插件中的位置。您可能需要重新考虑使用其他插件,例如jquery cycle,因为它具有响应能力。

10-08 17:04