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>

Theo : code1k.com

Thiết kế web chuyên nghiệp giá rẻ

Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn