Blog Hiệu ứng Gallery Thủ thuật Blogspot 

Ảnh động chạy theo con trỏ chuột

Để tạo cho Blog mình thêm sinh động, bạn có thể gắn thêm hình ảnh cho con trỏ chuột, các hình ảnh này sẽ chạy theo con trỏ chuột đến bất kỳ nơi nào trên Blog…

Mời các bạn bấm vào xem thử phía dưới sẽ thấy rõ hơn.

Xem thử

Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML, và dán tất cả các code phía dưới vào.

<script type=’text/javascript’>
/* <![CDATA[ */
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var e_img = new Image();
e_img.src = “http://3.bp.blogspot.com/-Iv19ZA-CI_U/Tt8YLPDQLsI/AAAAAAAAIog/ZDGWWE10Q5o/s1600/bats11.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:150px;height:120px”/>’
+'<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ây giờ, bạn thay đổi các dòng lệnh màu đỏ:

“http://3.bp…………./bats11.gif” : Link ảnh chạy theo chuột của bạn
Width: 150px Chiều rộng của ảnh

Height: 120 px Chiều cao của ảnh

và bấm LƯU lại là xong
LƯU Ý: Thủ thuật này áp dụng thành công cho giao diện Blog V2 (giao diện tải trên mạng). Nếu giao diện blog của bạn là giao diện mặc định, thì bạn đăng nhập vào Blog > chọn Thiết kế > chọn chỉnh sửa HTML, sau đó bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào đó dòng lệnh <head>, bây giờ bạn chép code dán vào sau dòng lệnh <head> đó, bấm Lưu mẫu là xong.
Chúc các bạn thành công

Nguồn: dunghennessy

Leave a Comment

sơn epoxy / sơn sàn epoxy / cửa lưới chống muỗi / vách ngăn lướii chống muỗi / cửa lùa chống muỗi / vệ sinh công nghiệp / đánh bóng sàn bê tông / vệ sinh nhà máy / dịch vụ giặt thảmm / vệ sinh nhà hàng / vệ sinh tòa nhà / dịch vụ vệ sinh kính / vệ sinh khách sạn / vệ sinh chung cư / dịch vụ cắt cỏ / đánh bóng kính / diệt côn trùng / diệt mối / diệt kiến / diệt muỗi / diệt ruồi / diệt gián / diệt chuột / dọn bể nước ngầm / phụ kiện mái che / cơ khí chế tạo / mái che di động / rèm nhựa / vách nhựa ngăn phòng lạnh / rèm nhựa phòng lạnh / dù che nắng / mái kéo di động / nhà bạt di động / mái xếp di động / mái hiên di động / thay bạt mái hiên di động / bạt che nắng / phụ kiện mái che di động / mái che sân thượng / mái che quán cafe / mái che di động miền bắc / mái che di động miền nam / bạt che di động hcm /