Hiệu ứng con trỏ chuột đẹp cho blog đã được 1 số blogger giới thiệu, tuy nhiên hầu hết các blogger giới thiệu tới các bạn đến những trang tạo hiệu ứng con trỏ chuột có sẵn, điều đó có hơi chút hạn chế. Mặc dù những con trỏ chuột đó đẹp nhưng bạn cần thay đổi thì sẽ gặp khó khăn.
- Ở cuối bài viết mình sẽ giới thiệu đến 1 số trang cho bạn tạo con trỏ chuột đẹp.
Còn bài viết này mình giới thiệu tới các bạn code Javascript giúp cho con chuột trên blog, Website của bạn trở nên sinh động hơn, mang tính bản quyền hơn, tốc độ Load nhanh hơn và đặc biệt bạn có thể sửa theo ý muốn.
DEMO
Cách làm:
- Vào bảng điều khiển blogger
- Lựa chọn Mẫu -> Chỉnh sửa HTML
- Dán đoạn Code dưới đây ngay sau thẻ <body>
Code:
trong đó các giá trị ghi chú màu các bạn cần lưu ý:
- Link màu đỏ: Link hình ảnh sẽ chạy theo con trỏ chuột
- Giá trị màu xanh: 70, 60: tương ứng chiều rộng, chiều cao của hình chạy theo con trỏ chuột.
- Giá trị màu xanh: 30, -10: khoảng cách từ hình tới con trỏ chuột
Bạn cũng có thể làm hiệu ứng chữ bay lượn theo con trỏ chuột tại: http://www.itviet360.com/2013/01/con-tro-chuot-dep-cho-blog-hieu-ung.html
----------------------------------
Trang tạo hiệu ứng con trỏ chuột: http://www.myspacecursor.net/
chúc các bạn thành công !
Còn bài viết này mình giới thiệu tới các bạn code Javascript giúp cho con chuột trên blog, Website của bạn trở nên sinh động hơn, mang tính bản quyền hơn, tốc độ Load nhanh hơn và đặc biệt bạn có thể sửa theo ý muốn.
DEMO
Cách làm:
- Vào bảng điều khiển blogger
- Lựa chọn Mẫu -> Chỉnh sửa HTML
- Dán đoạn Code dưới đây ngay sau thẻ <body>
Code:
<script>
var trailimage=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZur2abIYqdyLkDyD1txeaiBV0Bze21LG-ETuAtpuYZ_9Tm47IIqOOF9BCFNHIfuNz2AnRDrlGlj4g-dQGVKGcGp-AbWY0OTDXeSUdy_mDWYX2PzLchQRo7AlQKX6Skv7aipQheTysJDtH/s300/logo.png", 70, 60]
var offsetfrommouse=[30,-10] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0 //duration in seconds image should remain visible. 0 for always.
if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:0px;width:1px;height:1px"><img src="'+trailimage[0]+'" border="0" width="'+trailimage[1]+'px" height="'+trailimage[2]+'px"></div>')
function gettrailobj(){
if (document.getElementById)
return document.getElementById("trailimageid").style
else if (document.all)
return document.all.trailimagid.style
}
function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function hidetrail(){
gettrailobj().visibility="hidden"
document.onmousemove=""
}
function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]
if (typeof e != "undefined"){
xcoord+=e.pageX
ycoord+=e.pageY
}
else if (typeof window.event !="undefined"){
xcoord+=truebody().scrollLeft+event.clientX
ycoord+=truebody().scrollTop+event.clientY
}
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)
gettrailobj().display="none"
else
gettrailobj().display=""
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}
document.onmousemove=followmouse
if (displayduration>0)
setTimeout("hidetrail()", displayduration*1000)
</script>
trong đó các giá trị ghi chú màu các bạn cần lưu ý:
- Link màu đỏ: Link hình ảnh sẽ chạy theo con trỏ chuột
- Giá trị màu xanh: 70, 60: tương ứng chiều rộng, chiều cao của hình chạy theo con trỏ chuột.
- Giá trị màu xanh: 30, -10: khoảng cách từ hình tới con trỏ chuột
Bạn cũng có thể làm hiệu ứng chữ bay lượn theo con trỏ chuột tại: http://www.itviet360.com/2013/01/con-tro-chuot-dep-cho-blog-hieu-ung.html
----------------------------------
Trang tạo hiệu ứng con trỏ chuột: http://www.myspacecursor.net/
chúc các bạn thành công !
No comments:
Post a Comment
Đã có một nhận xét mới trên Blog,, cần bạn vào suppost