0

我在使用 Smooth Div Control 时遇到了一个问题。我认为这是一件小事。

我现在在主页上有四个画廊，都使用 Smooth Div Scroll。有些图像是占位符，但我只是想确保图库正常运行。我不明白为什么第四个可滚动画廊与前三个不同且更大？

这里再次链接： http ://www.gerardtonti.com/Scrollable%20Gallery%202/index.html 

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>

<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />
<link rel="Stylesheet" type="text/css" href="css/colorbox.css" />

<!-- Styles for my specific scrolling content -->
<style type="text/css">

#makeMeScrollable
{
    width:100%;
    height: 150px;
    position: relative;
}
#makeMeScrollable div.scrollableArea a
{
    border: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}

#makeMeScrollable2
{
    width:100%;
    height: 150px;
    position: relative;
}
#makeMeScrollable2 div.scrollableArea a
{
    border: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}

#makeMeScrollable3
{
    width:100%;
    height: 150px;
    position: relative;
}
#makeMeScrollable3 div.scrollableArea a
{
    border: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}​

#makeMeScrollable4
{
    width:100%;
    height: 150px;
    position: relative;
}
#makeMeScrollable4 div.scrollableArea a
{
    border: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}​

</style>

</head>

<body>
<style css="text/css">
body {background-color: black; background-image:url("images/background.jpg");    background-repeat: repeat}
</style>


<img src="images/FineArt.png">

<div id="makeMeScrollable">
    <a href="images/paintings/Nude_Big.jpg"><img src="images/paintings/Nude.jpg" alt="Nude" id="field" width="330" height="330" /><img src="images/spacer.png" width="15"></a>
    <a href="images/paintings/Walter_Big.jpg"><img src="images/paintings/Walter.jpg" alt="Walter" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/paintings/OneOfUs_Big.jpg"><img src="images/paintings/OneOfUs.jpg" alt="One Of Us" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
</div>
<img src="images/PublicArt.png">

<div id="makeMeScrollable2">
    <a href="images/publicart/Elevate1_Big.jpg"><img src="images/publicart/Elevate1.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
</div>
<img src="images/CoffeeHouse.png">

<div id="makeMeScrollable3">
    <a href="images/coffeepaintings/TazzaDoro_Big.jpg"><img src="images/coffeepaintings/TazzaDoro.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
</div>

<img src="images/Portraits.png">

<div id="makeMeScrollable4">
    <a href="images/portraits/Erin_Big.jpg"><img src="images/portraits/Erin.jpg" alt="Erin" id="Erin" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/ErinColor_Big.jpg"><img src="images/portraits/ErinColor.jpg" alt="Erin Color" id="Erin Color" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/Robert_Big.jpg"><img src="images/portraits/Robert.jpg" alt="Robert" id="Robert" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/Scott_Big.jpg"><img src="images/portraits/Scott.jpg" alt="Scott" id="Scott" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/Sean_Big.jpg"><img src="images/portraits/Sean.jpg" alt="Sean" id="Sean" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/Nate_Big.jpg"><img src="images/portraits/Nate.jpg" alt="Nate" id="Nate" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/Bill_Big.jpg"><img src="images/portraits/Bill.jpg" alt="Bill" id="Bill" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/Erin3_Big.jpg"><img src="images/portraits/Erin3.jpg" alt="Erin3" id="Erin3" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/Erin4_Big.jpg"><img src="images/portraits/Erin4.jpg" alt="Erin4" id="Erin4" /><img src="images/spacer.png" width="15"></a>
</div>

<!-- LOAD JAVASCRIPT LATE - JUST BEFORE THE BODY TAG 
     That way the browser will have loaded the images
     and will know the width of the images. No need to
     specify the width in the CSS or inline. -->

<!-- jQuery library - Please load it from Google API's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<!-- jQuery UI Widget and Effects Core (custom download)
You can make your own at: http://jqueryui.com/download -->
<script src="js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<!-- Latest version of jQuery Mouse Wheel by Brandon Aaron
 You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
<!-- jQuery Kinetic - for touch -->
<script src="js/jquery.kinetic.js" type="text/javascript"></script>
<!-- Smooth Div Scroll 1.3 minified-->
<script src="js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
<!-- If you want to look at the uncompressed version you find it at
 js/jquery.smoothDivScroll-1.3.js -->
<!-- Colorbox -->
<script src="js/jquery.colorbox-min.js" type="text/javascript"></script>


<!-- If you want to look at the uncompressed version you find it at
     js/jquery.smoothDivScroll-1.3.js -->

<!-- Plugin initialization -->
<script type="text/javascript">
$(document).ready(function () {
// Init Smooth Div Scroll   
$("#makeMeScrollable").smoothDivScroll({
mousewheelScrolling: "allDirections",
manualContinuousScrolling: true,
autoScrollingMode: "onStart",
autoScrollingDirection:"endlessLoopRight"
});
$("#makeMeScrollable2").smoothDivScroll({
    mousewheelScrolling: "allDirections",
    manualContinuousScrolling: true,
    autoScrollingMode: "onStart",
    autoScrollingDirection:"endlessLoopLeft"
});
$("#makeMeScrollable3").smoothDivScroll({
    mousewheelScrolling: "allDirections",
    manualContinuousScrolling: true,
    autoScrollingMode: "onStart",
    autoScrollingDirection:"endlessLoopRight"
});
$("#makeMeScrollable4").smoothDivScroll({
    mousewheelScrolling: "allDirections",
    manualContinuousScrolling: true,
    autoScrollingMode: "onStart",
    autoScrollingDirection:"endlessLoopLeft"
});


// Init colorbox
$("#makeMeScrollable a").colorbox({ speed: "500" });
$("#makeMeScrollable2 a").colorbox({ speed: "500" });
$("#makeMeScrollable3 a").colorbox({ speed: "500" });
$("#makeMeScrollable4 a").colorbox({ speed: "500" });
});

</script>

</body>
</html>
4

1 回答 1

0

您的css styles部分有问题：

#makeMeScrollable3 div.scrollableArea a
{
    border: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}​ //here

#makeMeScrollable4 div.scrollableArea a
{
    border: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}​ //here
于 2012-10-22T14:27:55.057 回答