Cataloged Autobiography BERKENAAN SAYA  Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca.. | The Readable Journal MENEROKA ARTIKEL  Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini | Astrolab Tool KATEGORI ARTIKEL  Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini |
 BINA IMAGE SCROLLABLE CONTOH 2 |
| May 16, 2011 Posted by: Fauzie |
Ini ialah contoh ke 2 "scrollable image". Seperti contoh pertama, ia juga dibina menggunakan javaScript. Perbezaan contoh ini dengan contoh sebelumnya ialah image di scroll secara "vertical" atau naik ke atas. "Live demo" dibina di url yang berlainan bagi menggelak gangguan script-script yang terdapat dalam site ini.
Di bawah ini ialah screenshot "vertical scrollable image".
Untuk melihat contoh yang telah disediakan ini secara "Live Demo" sila klik di sini.
Di bawah ini ialah kod-kod HTML, CSS dan javaScript. Jika anda ingin mencuba, sila copy and paste kod-kod bi bawah ini di dalam Notepad. Sila rujuk tutorial sebelum ini bagaimana anda save file, upload di browser dan juga bagaimanan hendak meletakkan di dalam blog.
<html>
<head>
<style type="text/css">
.vertical {
/* required settings */
position:relative;
overflow:hidden;
/* vertical scrollers have typically larger height than width */
height: 450px;
width: 600px;
border-top:1px solid #ddd;
}
/* root element for scrollable items */
.items {
position:absolute;
/* this time we have very large space for height */
height:20000em;
margin: 0px;
}
/* single scrollable item */
.item {
border-bottom:1px solid #ddd;
margin:10px 0;
padding:15px;
font-size:12px;
height:180px;
}
/* elements inside single item */
.item img {
float:left;
margin-right:20px;
height:180px;
width:240px;
padding:2px;
border:1px solid #ccc;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
.item h3 {
margin:0 0 5px 0;
font-size:16px;
color:#456;
font-weight:normal;
}
/* the action buttons above the scrollable */
#actions {
width:600px;
margin:30px 0 10px 0;
}
#actions a {
font-size:11px;
cursor:pointer;
color:#666;
}
#actions a:hover {
text-decoration:underline;
color:#000;
}
.disabled {
visibility:hidden;
}
.next {
float:right;
}
</style>
</head>
<body>
<div id="actions">
<a class="prev">« Back</a><a class="next">More pictures »</a>
</div>
<div class="scrollable vertical">
<div class="items">
<div>
<div class="item"><img src="http://farm1.static.flickr.com/3650/3323058611_d35c894fab_m.jpg" />
<h3>1. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
<div class="item">
<img src="http://farm1.static.flickr.com/3635/3323893254_3183671257_m.jpg" />
<h3>2. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
</div><!-- next page -->
<div>
<div class="item">
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_m.jpg" />
<h3>3. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplinedunderstanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div> <div class="item">
<img src="http://farm1.static.flickr.com/3624/3323893148_8318838fbd_m.jpg" /><h3>4. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplined
understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
</div><!-- next page --><div>
<div class="item"><img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_m.jpg" /><h3>5. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplinedunderstanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
<div class="item"><img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_m.jpg" /><h3>6. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplined
understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
</div><!-- next page -->
<div>
<div class="item">
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_m.jpg" /><h3>7. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplinedunderstanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
<div class="item">
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_m.jpg" />
<h3>8. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplinedunderstanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
</div>
</div>
</div>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script>
// execute your scripts when DOM is ready. this is a good habit
$(function() {
// initialize scrollable with mousewheel support
$(".scrollable").scrollable({ vertical: true, mousewheel: true });
});
</script>
</body>
</html>
<head>
<style type="text/css">
.vertical {
/* required settings */
position:relative;
overflow:hidden;
/* vertical scrollers have typically larger height than width */
height: 450px;
width: 600px;
border-top:1px solid #ddd;
}
/* root element for scrollable items */
.items {
position:absolute;
/* this time we have very large space for height */
height:20000em;
margin: 0px;
}
/* single scrollable item */
.item {
border-bottom:1px solid #ddd;
margin:10px 0;
padding:15px;
font-size:12px;
height:180px;
}
/* elements inside single item */
.item img {
float:left;
margin-right:20px;
height:180px;
width:240px;
padding:2px;
border:1px solid #ccc;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
.item h3 {
margin:0 0 5px 0;
font-size:16px;
color:#456;
font-weight:normal;
}
/* the action buttons above the scrollable */
#actions {
width:600px;
margin:30px 0 10px 0;
}
#actions a {
font-size:11px;
cursor:pointer;
color:#666;
}
#actions a:hover {
text-decoration:underline;
color:#000;
}
.disabled {
visibility:hidden;
}
.next {
float:right;
}
</style>
</head>
<body>
<div id="actions">
<a class="prev">« Back</a><a class="next">More pictures »</a>
</div>
<div class="scrollable vertical">
<div class="items">
<div>
<div class="item"><img src="http://farm1.static.flickr.com/3650/3323058611_d35c894fab_m.jpg" />
<h3>1. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
<div class="item">
<img src="http://farm1.static.flickr.com/3635/3323893254_3183671257_m.jpg" />
<h3>2. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
</div><!-- next page -->
<div>
<div class="item">
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_m.jpg" />
<h3>3. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplinedunderstanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div> <div class="item">
<img src="http://farm1.static.flickr.com/3624/3323893148_8318838fbd_m.jpg" /><h3>4. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplined
understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
</div><!-- next page --><div>
<div class="item"><img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_m.jpg" /><h3>5. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplinedunderstanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
<div class="item"><img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_m.jpg" /><h3>6. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplined
understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
</div><!-- next page -->
<div>
<div class="item">
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_m.jpg" /><h3>7. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplinedunderstanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
<div class="item">
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_m.jpg" />
<h3>8. Barcelona Pavilion</h3><strong>The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.</strong><p>The Pavilion was not only a pioneer for construction forms with a fresh, disciplinedunderstanding of space, but also for modeling new opportunities for an exciting association of free art and architecture. </p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
</div>
</div>
</div>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script>
// execute your scripts when DOM is ready. this is a good habit
$(function() {
// initialize scrollable with mousewheel support
$(".scrollable").scrollable({ vertical: true, mousewheel: true });
});
</script>
</body>
</html>
Kembali kepada | Archives →
Sebarang komen dan pertanyaan, sila klik butang di bawah ini:
