Dòng Text Chạy Theo Chuột

™» hoithanhcaygiang blog «™ Trước đây mình đã có dịp giới thiệu cùng các bạn một thủ thuật giúp chú chuột trên blog của bạn thêm sinh động hơn, đó là thủ thuật "Tạo dòng text xoay tròn quanh chuột". Và hôm nay mình cũng chia sẽ thêm thủ thuật liên quan
đến chuột và text cho blogspot. So với thue thuật trước thì hiệu ứng ở phần này đơn giản hơn, thủ thuật trước đoạn text xoay tròn theo chuột thì thủ thuật này chỉ đơn giản là đoạn text nằm ngang và chạy theo chuột mỗi khi bạn di chuyển nó.. Bạn xem live demo sẽ thấy rỏ hơn.

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (hay bố cục)
3. Chọn thêm tiện ích (Add a Gadget)
4. Thêm 1 HTML/Javascript và thêm vào nó code sau


<script language="javascript">
var text='CHÀO BẠN ĐẾN VỚI TRAIDATMUI.COM'; // thay thành dòng text của bạn
var delay=40; // tốc độ chạy
var Xoff=0; // khoảng cách giữa text và chuột tính từ bên trái của chuột
var Yoff=-30; // khoảng cách giữa text và chuột tính từ bên trên (top) của chuột
var txtw=14; // khoảng trắng giữa các ký tự của đoạn text
var beghtml='<font color="#00436e"><b>'; // tùy chỉnh màu của dòng text
var endhtml='</b></font>';

//**Bạn không cần chỉnh sửa phần này**\\
ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';
for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);
function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}
function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}
function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}
function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}
function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}
function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}
window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>


» Chỉnh code: Bạn hãy dựa vào các hướng dẫn trên để tùy chỉnh lại cho phù hợp với trang blog của bạn.

5. Save lại là xong

Chúc các bạn thành công !

Nguồn : traidatmui.com

Tổng hợp : Hội Thánh Cây Giang

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!