Khung chữ tự động trượt [Lưu trữ] - Diễn Đàn Cần Thơ Online

JavaScriptBank.com

13-04-2010, 15:40

Một đoạn mã JavaScript (http://www.javascriptbank.com/javascript/) khác để tạo hiệu ứng một dòng chữ (http://www.javascriptbank.com/javascript/text/) tự động cuộn từ phải sang trái trong một khung v�... chi tiết (http://www.javascriptbank.com/autoscroll-div-script.html/vi//) tại JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)

http://www.javascriptbank.com/javascript.images/scroller/autoscroll-div-script.jpg (http://www.javascriptbank.com/javascript/scroller/vertical-scroller/autoscroll-div-script/preview/vi/)
Demo: JavaScript Khung chữ tự động trượt (http://www.javascriptbank.com/autoscroll-div-script.html/vi/)
| JavaScript AutoScroll DIV script (http://www.javascriptbank.com/autoscroll-div-script.html)

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 useWidth = "400px";
var speed = 250 // greater is slower;

var message = "Now is the time for all good men to come to the aid of their country. That's one small step for man, one giant leap for mankind. Ask not what your country can do for you, ask what you can do for your country. | ";

// Remember to include the vertical bar | at the end of the message(s);

var mContainer = "";
var circleMsg = "";
var prevMsg = "";
var useFloat = "";
var xV = 0;
var xL = 0;
var msgLength = 0;

function updateMessage(){

if (circleMsg == ""){circleMsg = mContainer.lastChild.data}
else {circleMsg = prevMsg}
var separatorIdx = circleMsg.lastIndexOf('|');
if (separatorIdx == -1){separatorIdx = msgLength}
circleMsg = circleMsg.substring(1,separatorIdx);
var spliceStr = message.substring(0,msgLength-separatorIdx-1);
var dispMsg = circleMsg+spliceStr;
mContainer.removeChild(mContainer.lastChild);
mContainer.appendChild(document.createTextNode(dis pMsg));
prevMsg = circleMsg+'|'+spliceStr;
setTimeout("updateMessage()",speed);
}

function startCrawl(){

mContainer.appendChild(document.createTextNode(mes sage))
setTimeout("updateMessage()",3000); // delay before crawl start;
}

function stayHome(){

var nV = 0;
var nL = 0;
if(!document.body.scrollTop)
{
nV = document.documentElement.scrollTop;
nL = document.documentElement.scrollLeft;
}
else {
nV = document.body.scrollTop;
nL = document.body.scrollLeft;
}
if (nV == 0){window.scrollBy(0,1)}
useFloat.style.top = nV+xV+"px";
useFloat.style.left = nL+xL+"px";
setTimeout("stayHome()",50);
}

window.onload=function(){

mContainer = document.getElementById('crawl');
document.getElementById('isFloat').style.width = useWidth;
msgLength = message.length;
useFloat = document.getElementById('isFloat');
useFloat.style.left = ((screen.width-30)/2)-(parseInt(useWidth)/2)+"px";
xV = useFloat.offsetTop;
xL = useFloat.offsetLeft;
stayHome();
startCrawl();
}

</script>


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
<Div id='isFloat' style='position:absolute;bottom:20px;overflow:hidd en;height:28px;border:solid black 1px;font-size:14pt;background-color:lightyellow;color:darkblue'>

<Div id='crawl' style='padding:3px;white-space:nowrap'></Div>

</Div>


Các hiệu ứng tương tự
- Điền dữ liệu tự động (http://www.javascriptbank.com/autofill-and-select-form-fields.html/vi/)
- Cửa sổ popup tự động trượt (http://www.javascriptbank.com/div-layer-popup-onclick.html/vi/)
- Phân đoạn cho khung chữ (http://www.javascriptbank.com/fly-out-textbox.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)