我想要这样的东西，一些滚动的白色小div框与后面的图像一起浮动： http://www.myprovence.fr/snapshots2012/fr/marseille-provence/0-carte.html
我正在使用“Smooth Div Scroll”插件，无法制作那些滚动的白色小div盒。
HTML：
<!DOCTYPE html>
<html>
<head>
<title>I Love Kolkata</title>
<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<!-- Styles for my specific scrolling content -->
<style type="text/css">
html, body {height: 100%; min-height:100%; margin:0; padding:0;} /* Added by Souvik */
#makeMeScrollable
{
width:100%;
/*height: 330px;*/
height: 100%; /*Added by souvik */
min-height:100%;
position: relative;
}
/* Replace the last selector for the type of element you have in
your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
if you have links use #makeMeScrollable div.scrollableArea a and so on. */
#makeMeScrollable div.scrollableArea img
{
position: relative;
float: left;
margin: 0;
padding: 0;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
/*height:1200px;*/
}
</style>
</head>
<body>
<div id="makeMeScrollable">
<img src="images/test/map_slice_1.jpg" alt="Demo image" id="field" />
<img src="images/test/map_slice_2.jpg" alt="Demo image" id="gnome" />
<img src="images/test/map_slice_3.jpg" alt="Demo image" id="pencils" />
<img src="images/test/map_slice_4.jpg" alt="Demo image" id="golf" />
<img src="images/test/map_slice_5.jpg" alt="Demo image" id="river" />
<img src="images/test/map_slice_6.jpg" alt="Demo image" id="train" />
<img src="images/test/map_slice_7.jpg" alt="Demo image" id="leaf" />
<img src="images/test/map_slice_8.jpg" alt="Demo image" id="dog" />
</div>
<!-- jQuery library - Please load it from Google API's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- jQuery UI (Custom Download containing only Widget and Effects Core)
You can make your own at: http://jqueryui.com/download -->
<script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<!-- Latest version (3.1.4) of jQuery Mouse Wheel by Brandon Aaron
You will find it here: https://github.com/brandonaaron/jquery-mousewheel -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
<!-- jQuery Kinectic (1.8.2) used for touch scrolling -->
<!-- https://github.com/davetayls/jquery.kinetic/ -->
<script src="js/jquery.kinetic.min.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 -->
<!-- Plugin initialization -->
<script type="text/javascript">
// Initialize the plugin with no custom options
$(document).ready(function () {
// None of the options are set
$("div#makeMeScrollable").smoothDivScroll({
hotSpotScrolling: false,
touchScrolling: true,
manualContinuousScrolling: true,
mousewheelScrolling: false,
mousewheelScrolling: "allDirections",
hotSpotScrolling: true
});
var $windowheight = $(window).height();
//alert($windowheight);
$("#makeMeScrollable div.scrollableArea img").css('height',$windowheight);
$(window).resize(function() {
$("#makeMeScrollable div.scrollableArea img" ).css('height',$windowheight);
});
});
</script>
</body>
</html>
CSS
/* You can alter this CSS in order to give Smooth Div Scroll your own look'n'feel */
/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
min-width: 75px;
width: 10%;
height: 100%;
/* There is a big background image and it's used to solve some problems I experienced
in Internet Explorer 6. */
background-image: url(../images/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
left: 0;
/* The first url is for Firefox and other browsers, the second is for Internet Explorer */
cursor: url(../images/cursors/cursor_arrow_left.png), url(../images/cursors/cursor_arrow_left.cur),w-resize;
}
/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
background-image: url(../images/arrow_left.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35; /* Standard CSS3 opacity setting */
-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}
/* Invisible right hotspot */
div.scrollingHotSpotRight
{
min-width: 75px;
width: 10%;
height: 100%;
background-image: url(../images/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
right: 0;
cursor: url(../images/cursors/cursor_arrow_right.png), url(../images/cursors/cursor_arrow_right.cur),e-resize;
}
/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
background-image: url(../images/arrow_right.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35;
filter: alpha(opacity = 35);
-moz-opacity: 0.35;
zoom: 1;
}
/* The scroll wrapper is always the same width and height as the containing element (div).
Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
div.scrollableArea
{
position: relative;
width: auto;
height: 100%;
}