Cara Membuat Scrollable content II
Scrollable content II merupakan lanjutan dari Scrollable content I, yang telah saya postkan beberapa waktu yang lalu.
Scrollable content ini mampu menampilkan konten dalam suatu area terbatas dan melihat seluruh konten melalui fungsi gulir otomatis (automatic scroll) keatas/ kebawah.
Contoh:
The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...
Cara Memasang Scrollable content II
Caranya hampir sama dengan Cara Memasang Scrollable content I, cukup meletakan CSS dan JS berikut ini kedalam tag <head>.
<link rel="stylesheet" type="text/css" href="scrollable.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="impetus.js"></script>
<script type="text/javascript" src="scrollable.js">
/***********************************************
* Scrollable Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script>
var scrollv, scrollh // register two global vars for two scrollable instances
jQuery(function(e){ // on DOM load
scrollv = new scrollable({
wrapperid: "scrollable-v"
})
scrollh = new scrollable({
wrapperid: "scrollable-h",
orient: 'horizontal'
})
})
</script>
HTML
<div id="scrollable-v" class="scrollable">
<div class="belt">
<!--INSERT CONTENT HERE INSIDE BELT DIV-->
<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...</p>
<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...</p>
<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...</p>
<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...</p>
<!--END INSERTION -->
</div>
</div>
<p style="width:250px; text-align:right"><img src="roundup.png" onMouseover="scrollv.scrollContent('up')" onMouseout="scrollv.stopScroll()" /> <img src="rounddown.png" onMouseover="scrollv.scrollContent('down')" onMouseout="scrollv.stopScroll()" /></p>
<div id="scrollable-h" class="scrollable">
<div class="belt horizontal">
<!--INSERT CONTENT HERE INSIDE BELT DIV-->
<article class="columns">
<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...</p>
<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...</p>
<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...</p>
<p>The last few years have bared witness not only to major changes in the technologies that power the net, but also the devices that access it. With the myriad of smart phones and tablets of all sorts riding the internet wave...</p>
</article>
<!--END INSERTION -->
</div>
</div>
<p style="width:250px; text-align:right"><img src="roundleft.png" onMouseover="scrollh.scrollContent('left')" onMouseout="scrollh.stopScroll()" /> <img src="roundright.png" onMouseover="scrollh.scrollContent('right')" onMouseout="scrollh.stopScroll()" /></p>
Silahkan lihat cara memasang Scrollable content I
sumber: dynamicdrive
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon