JavaScriptBank
09-09-2009, 08:39 AM
Hiệu ứng sẽ cho bạn xem các ảnh khi ta nhấn vào các nút, bạn có thể thay đổi thông số để ảnh có thể trượt nhanh/ chậm hơn.... chi tiết (http://www.javascriptbank.com/glide-scroll-glide-scroll-vertically-onclick.html/vi//)
http://www.javascriptbank.com/javascript.images/image/glide-scroll-glide-scroll-vertically-onclick.jpg (http://www.javascriptbank.com/glide-scroll-glide-scroll-vertically-onclick.html/vi/)
Demo: Ảnh trượt dọc (http://www.javascriptbank.com/javascript/image/image-viewer/glide-scroll-glide-scroll-vertically-onclick/preview/vi/)
Cách cài đặt
Bước 1: Đặt mã JavaScript bên dưới vào phần HEAD
JavaScript
<script type="text/javascript">
var wndo = [];
// Necessary to avoid errors before page loaded
function dw_glideScrollBy(num, x, y, dur) {
if ( wndo[num] && wndo[num].glideScrollBy ) wndo[num].glideScrollBy(x, y, dur);
}
function initScrollLayer() {
// arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll,
// if horizontal scrolling, id of element containing scrolling content (table?)
wndo[0] = new dw_scrollLayer('wn', 'lyr1');
// pass id's of any wndo's that scroll inside tables
// i.e., if you have 3 (with id's wn1, wn2, wn3): GeckoTableBugFix('wn1', 'wn2', 'wn3');
GeckoTableBugFix('wn');
}
</script>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bước 2: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML
<LINK href="css/glide_scroll_rel_v.css" type=text/css rel=stylesheet>
<script src="js/dw_glidescroll.js" type="text/javascript"></script>
<body onload="initScrollLayer()">
<table class="main" cellspacing="0" cellpadding="8" border="0">
<tr>
<th colspan="3"></th>
</tr>
<tr>
<td class="text">
<p>This example positions the scrolling layers in a cell of a centered
table.</p>
<p>The glide-scroll code supports <a href="scrollbar.html">scrollbars</a>, <a href="glide_scroll_h.html">
horizontal scrolling</a>, and gliding to <a href="glide_grid.html">
specific images</a>.</p>
</td>
<td>
<!-- relative positioned layer that contains scrolling layers -->
<div id="hold">
<div id="wn">
<!-- scrolling layer here -->
<div id="lyr1" class="content">
<!-- The images here are different sizes, so td height is set (in style sheet) to equalize those differences.
The table cell height is set equal to the scroll distance per click. -->
<table id="imgTbl" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="../logojs.gif" width="100" height="100" alt="" /></td>
</tr>
<tr>
<td><img src="../logojs.gif" width="100" height="100" alt="" /></td>
</tr>
<tr>
<td><img src="../logojs.gif" width="100" height="100" alt="" /></td>
</tr>
<tr>
<td><img src="../logojs.gif" width="106" height="131" alt="" /></td>
</tr>
<tr>
<td><img src="../logojs.gif" width="88" height="88" alt="" /></td>
</tr>
</table>
</div> <!-- end scrolling layer -->
</div> <!-- end wn -->
</div> <!-- end hold (relative layer) -->
</td>
<td>
<table class="scrollLinks" border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- dw_glideScrollBy arguments: wndo element number, amount to scroll onclick on x, y axes,
(optional, not included here) duration of glide -->
<td valign="top"><a href="javascript:;" onclick="dw_glideScrollBy(0,0,140); return false" onmouseover="window.status='Click to scroll'; return true" onmouseout="window.status=''"><img src="images/aro-up.gif" width="11" height="18" alt="" /></a></td>
</tr>
<tr>
<td class="spacer"> </td>
</tr>
<tr>
<td valign="bottom"><a href="javascript:;" onclick="dw_glideScrollBy(0,0,-140); return false" onmouseover="window.status='Click to scroll'; return true" onmouseout="window.status=''"><img src="images/aro-dn.gif" width="11" height="18" alt="" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bước 3: Tải các file bên dưới về
Files
glide_scroll_rel_v.css (http://javascriptbank.com/javascript/image/Glide_Scroll/css/glide_scroll_rel_v.css)
dw_glidescroll.js (http://javascriptbank.com/javascript/image/Glide_Scroll/js/dw_glidescroll.js)
Hiệu ứng cùng chức năng
- Chú thích trượt kiểu bật/tắt (http://www.javascriptbank.com/dropdown-description-toggle.html/vi/)
- Trình đơn định hướng xổ dọc (http://www.javascriptbank.com/select-option-navigation-menu.html/vi/)
- Trình đơn xổ dọc đơn giản (http://www.javascriptbank.com/simple-drop-down-navigations.html/vi/)
Bạn có thể xem thêm nhiều JavaScript khác về Hình ảnh (http://www.javascriptbank.com/javascript/image/vi/) và Xem ảnh (http://www.javascriptbank.com/javascript/image/image-viewer/vi/)
Trình chơi nhạc giao diện iPod
(http://www.javascriptbank.com/ipod-player-using-flash.html/vi/) - JavaSript kiểm tra số điện thoại hợp lệ (http://www.javascriptbank.com/vi=kiểm tra điện thoại) -
http://www.javascriptbank.com/javascript.images/image/glide-scroll-glide-scroll-vertically-onclick.jpg (http://www.javascriptbank.com/glide-scroll-glide-scroll-vertically-onclick.html/vi/)
Demo: Ảnh trượt dọc (http://www.javascriptbank.com/javascript/image/image-viewer/glide-scroll-glide-scroll-vertically-onclick/preview/vi/)
Cách cài đặt
Bước 1: Đặt mã JavaScript bên dưới vào phần HEAD
JavaScript
<script type="text/javascript">
var wndo = [];
// Necessary to avoid errors before page loaded
function dw_glideScrollBy(num, x, y, dur) {
if ( wndo[num] && wndo[num].glideScrollBy ) wndo[num].glideScrollBy(x, y, dur);
}
function initScrollLayer() {
// arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll,
// if horizontal scrolling, id of element containing scrolling content (table?)
wndo[0] = new dw_scrollLayer('wn', 'lyr1');
// pass id's of any wndo's that scroll inside tables
// i.e., if you have 3 (with id's wn1, wn2, wn3): GeckoTableBugFix('wn1', 'wn2', 'wn3');
GeckoTableBugFix('wn');
}
</script>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bước 2: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML
<LINK href="css/glide_scroll_rel_v.css" type=text/css rel=stylesheet>
<script src="js/dw_glidescroll.js" type="text/javascript"></script>
<body onload="initScrollLayer()">
<table class="main" cellspacing="0" cellpadding="8" border="0">
<tr>
<th colspan="3"></th>
</tr>
<tr>
<td class="text">
<p>This example positions the scrolling layers in a cell of a centered
table.</p>
<p>The glide-scroll code supports <a href="scrollbar.html">scrollbars</a>, <a href="glide_scroll_h.html">
horizontal scrolling</a>, and gliding to <a href="glide_grid.html">
specific images</a>.</p>
</td>
<td>
<!-- relative positioned layer that contains scrolling layers -->
<div id="hold">
<div id="wn">
<!-- scrolling layer here -->
<div id="lyr1" class="content">
<!-- The images here are different sizes, so td height is set (in style sheet) to equalize those differences.
The table cell height is set equal to the scroll distance per click. -->
<table id="imgTbl" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="../logojs.gif" width="100" height="100" alt="" /></td>
</tr>
<tr>
<td><img src="../logojs.gif" width="100" height="100" alt="" /></td>
</tr>
<tr>
<td><img src="../logojs.gif" width="100" height="100" alt="" /></td>
</tr>
<tr>
<td><img src="../logojs.gif" width="106" height="131" alt="" /></td>
</tr>
<tr>
<td><img src="../logojs.gif" width="88" height="88" alt="" /></td>
</tr>
</table>
</div> <!-- end scrolling layer -->
</div> <!-- end wn -->
</div> <!-- end hold (relative layer) -->
</td>
<td>
<table class="scrollLinks" border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- dw_glideScrollBy arguments: wndo element number, amount to scroll onclick on x, y axes,
(optional, not included here) duration of glide -->
<td valign="top"><a href="javascript:;" onclick="dw_glideScrollBy(0,0,140); return false" onmouseover="window.status='Click to scroll'; return true" onmouseout="window.status=''"><img src="images/aro-up.gif" width="11" height="18" alt="" /></a></td>
</tr>
<tr>
<td class="spacer"> </td>
</tr>
<tr>
<td valign="bottom"><a href="javascript:;" onclick="dw_glideScrollBy(0,0,-140); return false" onmouseover="window.status='Click to scroll'; return true" onmouseout="window.status=''"><img src="images/aro-dn.gif" width="11" height="18" alt="" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bước 3: Tải các file bên dưới về
Files
glide_scroll_rel_v.css (http://javascriptbank.com/javascript/image/Glide_Scroll/css/glide_scroll_rel_v.css)
dw_glidescroll.js (http://javascriptbank.com/javascript/image/Glide_Scroll/js/dw_glidescroll.js)
Hiệu ứng cùng chức năng
- Chú thích trượt kiểu bật/tắt (http://www.javascriptbank.com/dropdown-description-toggle.html/vi/)
- Trình đơn định hướng xổ dọc (http://www.javascriptbank.com/select-option-navigation-menu.html/vi/)
- Trình đơn xổ dọc đơn giản (http://www.javascriptbank.com/simple-drop-down-navigations.html/vi/)
Bạn có thể xem thêm nhiều JavaScript khác về Hình ảnh (http://www.javascriptbank.com/javascript/image/vi/) và Xem ảnh (http://www.javascriptbank.com/javascript/image/image-viewer/vi/)
Trình chơi nhạc giao diện iPod
(http://www.javascriptbank.com/ipod-player-using-flash.html/vi/) - JavaSript kiểm tra số điện thoại hợp lệ (http://www.javascriptbank.com/vi=kiểm tra điện thoại) -