Hình động chạy theo trỏ chuột

Để blog thêm phần sinh động, bắt mắt bạn có thể cho hình ảnh chạy theo con chuột trên blog của mình. Bạn hãy làm theo chỉ dẫn đơn giản sau
Cách 1:Blogger > Bố Cục > Thêm một tiện ích HTML/Javascript và dán vào form Nội Dung đoạn code sau
Cách 2: Blogger > Mẫu > Chỉnh sửa HTML và dán code bên dưới vào sau thẻ đóng </head> rồi lưu lại
Demo tại bài viết này

<script type='text/javascript'>
/* <![CDATA[ */
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var e_img = new Image();
e_img.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8-6VTu3k7VhzUKIhZE2YKosqhOiM7ZgwE0xWefrEAXxaXMS6nToV3qrcM-egKNrnx55BMoLrAAl3wIe6z4WybKhE8CCaJo0IooXsv8vDlBE4ys5dXo9K9y_idN43ox6VZv0KHScbq5GII/h120/conmeo.gif";
var p_img = new Image();
p_img.src = "";
var idx = document.images.length;
if ( document.getElementById("pic"+idx) ||
document.getElementById("ppl1"+idx) ||
document.getElementById("ppl2"+idx)) idx++;
document.write('<img id="eyblls'+idx+'" src="'+e_img.src+'" alt="" style="position:absolute;top:0px;left:0px;width:70px;height:38px"/>'
+'<img id="ppl1'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:0px;left:0px;width:0px;height:0px"/>'
+'<img id="ppl2'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:0px;left:0px;width:0px;height:0px"/>');
var h,w,r,eyeballs,pupil1,pupil2;
var d = document;
var my = 0;
var mx = 0;
var fy = 0;
var fx = 0;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else{
h = r.clientHeight;
w = r.clientWidth;
}}
function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
my = e.pageY - msy;
mx = e.pageX;
}
else{
my = e.clientY - msy;
mx = e.clientX;
}}
function makefollow(){
var sy = scrl(0);
var sx = scrl(1);
//Keep eyes on screen.
var chy = Math.floor(fy-50);
if (chy <= 0) chy = 0;
if (chy >= h-50) chy = h-50;
var chx=Math.floor(fx-34);
if (chx <= 0) chx = 0;
if (chx >= w-69) chx = w-69;
//eyeball1 centre.
var c1y = chy+17;
var c1x = chx+17;
//eyeball2 centre.
var c2y = chy+17;
var c2x = chx+52;
var dy1 = my - c1y;
var dx1 = mx - c1x;//80
var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
var dy2 = my - c2y;
var dx2 = mx - c2x;
var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
var ay1 = my - c1y;
var ax1 = mx - c1x;
var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
var ay2 = my - c2y;
var ax2 = mx - c2x;
var angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
var dv = 1.7;
var onEyeBall1 = (d1 < 17)?d1/dv:10;
var onEyeBall2 = (d2 < 17)?d2/dv:10;
eyeballs.top = chy+sy+pix;
eyeballs.left = chx+sx+pix;
pupil1.top = c1y-6+onEyeBall1*Math.sin(angle1*Math.PI/180)+sy+pix;
pupil1.left = c1x-6+onEyeBall1*Math.cos(angle1*Math.PI/180)+sx+pix;
pupil2.top = c2y-6+onEyeBall2*Math.sin(angle2*Math.PI/180)+sy+pix;
pupil2.left = c2x-6+onEyeBall2*Math.cos(angle2*Math.PI/180)+sx+pix;
}
function move(){
dy = fy += (my-fy) * 0.05;
dx = fx += (mx-fx) * 0.05;
makefollow();
setTimeout(move,30);
}
function init(){
eyeballs = document.getElementById("eyblls"+idx).style;
pupil1 = document.getElementById("ppl1"+idx).style;
pupil2 = document.getElementById("ppl2"+idx).style;
winsize();
move();
}
if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
}
})();
}
/* ]]> */
</script>
Bạn hãy thay đổi hình ảnh cũng như kích thước của hình sao cho đẹp và phù hợp với blog của mình

Bonus thêm một số hình cho bạn thêm sự chọn lựa

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPdZtvokIiM0nxQqBMJxaj78SpnqUpt7uVkFndkZp7olYmuNVTkcxPHzc7uH5ps7gV5-aqVNu3UX9S7bWShst4OeKaUNdRu54V37horTZ586mlPYYo_j8qhmx-iQsk8doJmfS9P_8oUpaT/h120/chochay1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPdZtvokIiM0nxQqBMJxaj78SpnqUpt7uVkFndkZp7olYmuNVTkcxPHzc7uH5ps7gV5-aqVNu3UX9S7bWShst4OeKaUNdRu54V37horTZ586mlPYYo_j8qhmx-iQsk8doJmfS9P_8oUpaT/h120/chochay1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyC9h53xdfztXD-o4kOEswtkXxmU66kQ-gRqTtmoAaD13LE0X5ya4679BkkQwApHsLOvYi0Z34GVWH_sRcuxw4NPQRiihTHZ-NmRdcMIT4Ae4aamDWDH3X8oCL1BnWUuZokfHwv7Kn-O83/h120/chochay2.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7HvPPWnjGZA3HnaLPqsDi1BQpB6ZrFyqZSyrVY5ss7CAXlhnwj6N4STODZUSmsFtKF-0u43FbeAr06dgb6zDOzNpLjw8ZqSwWoEEojilBIrrMidelpEavyUZWerZ0xYoexuCyNQ0avdEt/h120/chochay3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnW-kSRqEa2tbVI42IbaPBhlm-oTc-deKijt8In9OEDrZ-kmC554YlSFtg3eEHeugNYFb9fB5NTKxfetLuhQNYerIsmfxyyIIJ_oIyJgk4wKSiuFhCWl6vDfGlXNO3iXo4lQs3pg3dyv4W/h120/pinocchio.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWtmNup8HU1EMaNIYdnmQlHEWc62O9-2jUUb0ObU0x9ywI6BASkw6Dg0EuxcPNzJDuyW0W1JyRAq-KeZ1HKRJScSVogKjqlNOWxoJPYm8Hd9iHwpOIWi89YIg0wC-lLpIkmlg3BcVfvAeu/h120/bansung.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg222cXBpCPsZNcuPcyWLvsKslwivgo8Phd4ph5fWIVkLP00fgFZzxlpANrnHh_nrmriTvydbyoQW1ZCVeUxg3JiV3MSFSjNGf3IPWAoCbkOuM7emGvWGgaleHZ_bBGAOnGCvGW5P1QSIOT/h120/batman3.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_JKhrpy7_JFgA4BcvUtFok8stvqcAEHrMe-BoXZKt_RfNk5mny67-MuguwjDCMSpPY7vHU2m8FBCSacBRzBrSr4RgpiNrZL-T34oaoBAUdiKeR6hZUVi85Ui56QAb0phNfxtFdMeUCb-/h120/tinkerbell.gif
Chúc bạn vui vẻ!
8 Comments
Comments

8 comments

Anonymous
20/10/12
Hehe. Cái này skin mới thì làm dc. Còn skin mặc định thì chèn code vào modun thì k được. Còn vào thì nó chỉ xuất hiện 1 cái rồi mất thôi :))
20/10/12
Cảm ơn bạn đã góp ý! :))
Thật ra mình cũng không để ý skin cũ hay mới vì trước khi đăng bài mình đã test cả hai cách và đều thành công cả. (o)
Có lẽ mình nên edit để mọi người khỏi mất công làm theo cách 1 :d
16/11/12
Bạn ơi,làm cái hình mặt troll chạy theo kiểu gì thế :-?
17/11/12
Bạn tạo một HTML/Javascript mới sau đó sử dụng code sau
<script type="text/javascript" src="https://huyco-troll.googlecode.com/svn/trunk/man-trollvl.js"></script><script type="text/javascript">
var twitterAccount = "[co="red"]ID Twitter của bạn[/co]";
var tweetThisText = "Flow me";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.huyco-troll.blogspot.com">Troll VL</a></span></noscript>

Hoặc bạn có thể tham khảo những kiểu liên kết đến Twitter với hình khác tại đây
[ma][co="blue"]Chúc bạn thành công![/co][/ma]
17/11/12
Hj,hay phết,cái ảnh động này là cố đinh rồi nhỉ,trong code không thay đổi được chữ "theo em"
Cảm ơn bạn nhé (h)
17/11/12
Bạn muốn thay đổi như thế nào ? Lúc nào rảnh mình edit cho (o)
20/10/13
Thủ thuật này hay phết ! Cảm ơn huy nhiều nhé !
23/10/13
Thủ thuật này rất hay ! Nhưng mình cài cho 2 blogspot Template có sẵn không hiểu sao hình động thì có nhưng lại chạy chui bên dưới hình nền chỉ ở những nơi có viền thì xuất hiện còn gần như toàn bộ chui bên dưới hình nền của blog

Cảm ơn bạn đã ghé thăm Troll VL !
» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>

Insert Emoticons
:cuoi
:hihi
:thank
:haha
:meu
:cry
:oaoa
1cuoi
:D
@@
:p
:o
:vi
:ko
:ca
:why
:xin
:lanh
:im
:aoi
:ado
:mda
:tat
0:khoa
a:ab
k:ac
q:ad
w:ae
e:af
l:ag
g:ah
8:ai
9:aj
9:ag
:9a
*Phải có khoảng trống trước các code mới hiển thị mặt cười


Mã Hóa Code Tạo và xem trước comments Cancel Reply
-->