JavaScriptBank
26-03-2010, 07:33 PM
Một đoạn mã JavaScript (http://www.javascriptbank.com/javascript/) khác để tạo chữ cuộn trong khung theo chiều từ dưới lên và dừng lại một lúc cho người dùng xem.... chi tiết (http://www.javascriptbank.com/vertical-marquee.html/vi//) tại JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)
http://www.javascriptbank.com/javascript.images/scroller/vertical-marquee.jpg (http://www.javascriptbank.com/javascript/scroller/vertical-scroller/vertical-marquee/preview/vi/)
Demo: JavaScript Chữ cuộn từ dưới lên (http://www.javascriptbank.com/vertical-marquee.html/vi/)
| JavaScript Vertical Marquee (http://www.javascriptbank.com/vertical-marquee.html)
Cách cài đặt
Bước 1: Đặt mã CSS bên dưới vào phần HEAD
CSS
<style type="text/css">
#jump_base {
overflow-y:hidden;
width: 200px;
height: 100px;
border: 2px dotted #000099;
margin: auto;
padding: 0 10px 0 10px;
font-size: .9em;
font-family: Verdana, Arial, sans-serif;
}
#jump_base a {
color: #000099;
background-color: inherit;
}
.news {
background-color: #DDDDDD;
color: inherit;
}
</style>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bước 2: Dùng mã JavaScript để cài đặt hiệu ứng
JavaScript
<script language="javascript">
// Created by: Mike Hudson :: http://www.afrozeus.com
/*
To change the values in the setupLinks function below.
You will notice there are two arrays for each of Titles and
Links. Currently there are 3 items in each array, but you can easily
expand on that by adding to the array. For example, to add a 4th record,
you would simply include the following 2 lines at the end of setupLinks
function:
arrLinks[3] = "someURL.htm";
arrTitles[3] = "Some title";
*/
function setupLinks() {
arrLinks[0] = "http://forums.webdeveloper.com/forumdisplay.php?s=&forumid=3";
arrTitles[0] = "If you have any questions, be sure to visit our forums.";
arrLinks[1] = "http://javascript.internet.com/new/";
arrTitles[1] = "Don't miss anything — check our new additions.";
arrLinks[2] = "http://www.webreference.com/programming/javascript/diaries/";
arrTitles[2] = "Want to learn JavaScript? Start at the beginning.";
}
var m_iInterval;
var m_Height;
//window.onload = wl;
var iScroll=0;
var arrLinks;
var arrTitles;
var arrCursor = 0;
var arrMax;
window.onload=wl;
function wl() {
m_iInterval = setInterval(ontimer, 10);
var base = document.getElementById("jump_base");
m_Height = base.offsetHeight;
var divi = parseInt(m_Height/5);
m_Height = divi*5;
var td1 = document.getElementById("td1");
var td2 = document.getElementById("td2");
var td3 = document.getElementById("td3");
td1.height = m_Height-5;
td2.height = m_Height-5;
td3.height = m_Height-5;
arrLinks = new Array();
arrTitles = new Array();
setupLinks();
arrMax = arrLinks.length-1;
setLink();
}
function setLink() {
var ilink = document.getElementById("jump_link");
ilink.innerHTML = arrTitles[arrCursor];
ilink.href = arrLinks[arrCursor];
}
function ontimer() {
var base = document.getElementById("jump_base");
iScroll+=5;
if (iScroll>(m_Height*2)) {
iScroll=0;
arrCursor++;
if (arrCursor>arrMax)
arrCursor=0;
setLink();
}
if (iScroll==m_Height) {
pause();
m_iInterval = setTimeout(resume, 4000);
}
base.scrollTop=iScroll;
}
function pause() {
clearInterval(m_iInterval);
}
function resume() {
m_iInterval = setInterval(ontimer, 10);
}
</script>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bước 3: Đặt mã HTML bên dưới vào phần BODY
HTML
<div id="jump_base" class="news" onmouseover="pause()" onmouseout="resume()">
<table class="news">
<tr>
<td id="td1"> </td></tr>
<tr><td id = "td2" valign="middle" align="center"><a id="jump_link" href="" target="_new"></a></td></tr>
<tr><td id="td3"> </td></tr>
</table>
</div>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bạn có thể xem các mã tương tự bên dưới
- Chữ cuộn kiểu karaokê (http://www.javascriptbank.com/scrolling-glowing-text-effect.html/vi/)
- Chữ cuộn kiểu ticker (http://www.javascriptbank.com/highlighter-scroller-ii.html/vi/)
- Chữ cuộn từng kí tự (http://www.javascriptbank.com/highlighter-scroller-effect.html/vi/)
Bạn có thể xem thêm nhiều JavaScript khác về Scrollers (http://www.javascriptbank.com/javascript/scroller/vi/) và Theo chiều đứng (http://www.javascriptbank.com/javascript/scroller/vertical-scroller/vi/)
Tìm các cặp hình giống nhau
(http://www.javascriptbank.com/concentration-smaller-index.html/vi/) - CD-Rom giáo trình SSDG về Web & Lập trình (http://www.javascriptbank.com/forum/cd-rom-giao-trinh-ssdg-ve-web-lap-trinh-t685.html) - Hiệu ứng di chuyển div bằng javascript (http://www.javascriptbank.com/forum/di-chuyen-tag-div-theo-y-thich-t592.html)
http://www.javascriptbank.com/javascript.images/scroller/vertical-marquee.jpg (http://www.javascriptbank.com/javascript/scroller/vertical-scroller/vertical-marquee/preview/vi/)
Demo: JavaScript Chữ cuộn từ dưới lên (http://www.javascriptbank.com/vertical-marquee.html/vi/)
| JavaScript Vertical Marquee (http://www.javascriptbank.com/vertical-marquee.html)
Cách cài đặt
Bước 1: Đặt mã CSS bên dưới vào phần HEAD
CSS
<style type="text/css">
#jump_base {
overflow-y:hidden;
width: 200px;
height: 100px;
border: 2px dotted #000099;
margin: auto;
padding: 0 10px 0 10px;
font-size: .9em;
font-family: Verdana, Arial, sans-serif;
}
#jump_base a {
color: #000099;
background-color: inherit;
}
.news {
background-color: #DDDDDD;
color: inherit;
}
</style>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bước 2: Dùng mã JavaScript để cài đặt hiệu ứng
JavaScript
<script language="javascript">
// Created by: Mike Hudson :: http://www.afrozeus.com
/*
To change the values in the setupLinks function below.
You will notice there are two arrays for each of Titles and
Links. Currently there are 3 items in each array, but you can easily
expand on that by adding to the array. For example, to add a 4th record,
you would simply include the following 2 lines at the end of setupLinks
function:
arrLinks[3] = "someURL.htm";
arrTitles[3] = "Some title";
*/
function setupLinks() {
arrLinks[0] = "http://forums.webdeveloper.com/forumdisplay.php?s=&forumid=3";
arrTitles[0] = "If you have any questions, be sure to visit our forums.";
arrLinks[1] = "http://javascript.internet.com/new/";
arrTitles[1] = "Don't miss anything — check our new additions.";
arrLinks[2] = "http://www.webreference.com/programming/javascript/diaries/";
arrTitles[2] = "Want to learn JavaScript? Start at the beginning.";
}
var m_iInterval;
var m_Height;
//window.onload = wl;
var iScroll=0;
var arrLinks;
var arrTitles;
var arrCursor = 0;
var arrMax;
window.onload=wl;
function wl() {
m_iInterval = setInterval(ontimer, 10);
var base = document.getElementById("jump_base");
m_Height = base.offsetHeight;
var divi = parseInt(m_Height/5);
m_Height = divi*5;
var td1 = document.getElementById("td1");
var td2 = document.getElementById("td2");
var td3 = document.getElementById("td3");
td1.height = m_Height-5;
td2.height = m_Height-5;
td3.height = m_Height-5;
arrLinks = new Array();
arrTitles = new Array();
setupLinks();
arrMax = arrLinks.length-1;
setLink();
}
function setLink() {
var ilink = document.getElementById("jump_link");
ilink.innerHTML = arrTitles[arrCursor];
ilink.href = arrLinks[arrCursor];
}
function ontimer() {
var base = document.getElementById("jump_base");
iScroll+=5;
if (iScroll>(m_Height*2)) {
iScroll=0;
arrCursor++;
if (arrCursor>arrMax)
arrCursor=0;
setLink();
}
if (iScroll==m_Height) {
pause();
m_iInterval = setTimeout(resume, 4000);
}
base.scrollTop=iScroll;
}
function pause() {
clearInterval(m_iInterval);
}
function resume() {
m_iInterval = setInterval(ontimer, 10);
}
</script>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bước 3: Đặt mã HTML bên dưới vào phần BODY
HTML
<div id="jump_base" class="news" onmouseover="pause()" onmouseout="resume()">
<table class="news">
<tr>
<td id="td1"> </td></tr>
<tr><td id = "td2" valign="middle" align="center"><a id="jump_link" href="" target="_new"></a></td></tr>
<tr><td id="td3"> </td></tr>
</table>
</div>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bạn có thể xem các mã tương tự bên dưới
- Chữ cuộn kiểu karaokê (http://www.javascriptbank.com/scrolling-glowing-text-effect.html/vi/)
- Chữ cuộn kiểu ticker (http://www.javascriptbank.com/highlighter-scroller-ii.html/vi/)
- Chữ cuộn từng kí tự (http://www.javascriptbank.com/highlighter-scroller-effect.html/vi/)
Bạn có thể xem thêm nhiều JavaScript khác về Scrollers (http://www.javascriptbank.com/javascript/scroller/vi/) và Theo chiều đứng (http://www.javascriptbank.com/javascript/scroller/vertical-scroller/vi/)
Tìm các cặp hình giống nhau
(http://www.javascriptbank.com/concentration-smaller-index.html/vi/) - CD-Rom giáo trình SSDG về Web & Lập trình (http://www.javascriptbank.com/forum/cd-rom-giao-trinh-ssdg-ve-web-lap-trinh-t685.html) - Hiệu ứng di chuyển div bằng javascript (http://www.javascriptbank.com/forum/di-chuyen-tag-div-theo-y-thich-t592.html)