Diễn Đàn Bo-Blog Việt Nam

Diễn Đàn Bo-Blog Việt Nam (http://vietboblog.net/forum/index.php)
-   Ứng Dụng HTML - Java - Ajax Cho Bo-blog (http://vietboblog.net/forum/forumdisplay.php?f=9)
-   -   Chữ cuộn từ dưới lên (http://vietboblog.net/forum/showthread.php?t=305)

JavaScriptBank 27-03-2010 09:32 AM

Chữ cuộn từ dưới lên
 
Một đoạn mã 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 tại JavaScriptBank.com - 2.000+ free JavaScript codes


Cách cài đặt

Bước 1: Copy mã CSS bên dưới và dán vào khu vực HEAD trên trang web của bạn
CSS
Mã:

<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: Đặt mã JavaScript bên dưới vào phần HEAD
JavaScript
Mã:

<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: 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
Mã:

<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
        -->



Các hiệu ứng tương tự
- Chữ cuộn kiểu karaokê
- Chữ cuộn kiểu ticker
- Chữ cuộn từng kí tự
Bạn có thể xem thêm nhiều JavaScript khác về ScrollersTheo chiều đứng






Múi giờ GMT. Hiện tại là 05:25 AM.

Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.