Script hiệu ứng jQuery Fake bằng chú thích cho liên kết

Giúp đưa thêm nội dung chú thích vào liên kết & sẽ hiện ra khi được rê chuột vào. Thích hợp cho các website thủ thuật.

Code có sử dụng tệp jQuery phiên bản 1.3.2. Hãy gỡ bỏ nếu website của bạn đã có phiên bản cao hơn.

Xem thử

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type='text/javascript'>
this.vtip = function() {
this.xOffset = -10; // x distance from mouse
this.yOffset = 10; // y distance from mouse

$(".vtip").unbind().hover(
function(e) {
this.t = this.title;
this.title = '';
this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset);

$('body').append( '<p id="vtip"><img id="vtipArrow" />' + this.t + '</p>' );

$('p#vtip #vtipArrow').attr("src", 'http://4.bp.blogspot.com/_BmIFAHM3wdk/TQTZT3PstQI/AAAAAAAAAxY/LilEJ3B1qUQ/s1600/vtip_arrow.png');
$('p#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow");

},
function() {
this.title = this.t;
$("p#vtip").fadeOut("slow").remove();
}
).mousemove(
function(e) {
this.top = (e.pageY + yOffset);
this.left = (e.pageX + xOffset);

$("p#vtip").css("top", this.top+"px").css("left", this.left+"px");
}
);

};

jQuery(document).ready(function($){vtip();})
</script>
<style type='text/css'>
p#vtip { margin-top: 15px; display: none; position: absolute; padding: 15px; left: 5px; font-size: 0.8em; background-color: #262626; border: 1px solid #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999; color: #fff; }
p#vtip #vtipArrow { position: absolute; top: -10px; left: 5px }
</style>



<a href="http://code1k.com" class="vtip" title="Code1k.com">Vui lòng rê chuột vào đây!</a>