jquery實(shí)現(xiàn)網(wǎng)站超鏈接和圖片提示效果

更新時(shí)間：2013年03月21日 14:53:01 作者：

超鏈接提示效果可以通過title實(shí)現(xiàn);圖片提示效果可以通過alt實(shí)現(xiàn)，本文將會(huì)介紹下使用jquery實(shí)現(xiàn)超鏈接與圖片提示效果，感興趣的朋友們可以參考下哈

超鏈接提示效果：

 
<script type="text/javascript"> 
//<![CDATA[ 
$(function(){ 
var x = 10; 
var y = 20; 
$("a.tooltip").mouseover(function(e){ 
this.myTitle = this.title; 
this.title = ""; 
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //創(chuàng)建 div 元素 
$("body").append(tooltip); //把它追加到文檔中 
$("#tooltip") 
.css({ 
"top": (e.pageY+y) + "px", 
"left": (e.pageX+x) + "px" 
}).show("fast"); //設(shè)置x坐標(biāo)和y坐標(biāo)，并且顯示 
}).mouseout(function(){ 
this.title = this.myTitle; 
$("#tooltip").remove(); //移除 
}).mousemove(function(e){ 
$("#tooltip") 
.css({ 
"top": (e.pageY+y) + "px", 
"left": (e.pageX+x) + "px" 
}); 
}); 
}) 
//]]> 
</script> 

圖片提示效果：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
//<![CDATA[ 
$(function(){ 
var x = 10; 
var y = 20; 
$("a.tooltip").mouseover(function(e){ 
this.myTitle = this.title; 
this.title = ""; 
var imgTitle = this.myTitle? "<br/>" + this.myTitle : ""; 
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='產(chǎn)品預(yù)覽圖'/>"+imgTitle+"<\/div>"; //創(chuàng)建 div 元素 
$("body").append(tooltip); //把它追加到文檔中 
$("#tooltip") 
.css({ 
"top": (e.pageY+y) + "px", 
"left": (e.pageX+x) + "px" 
}).show("fast"); //設(shè)置x坐標(biāo)和y坐標(biāo)，并且顯示 
}).mouseout(function(){ 
this.title = this.myTitle; 
$("#tooltip").remove(); //移除 
}).mousemove(function(e){ 
$("#tooltip") 
.css({ 
"top": (e.pageY+y) + "px", 
"left": (e.pageX+x) + "px" 
}); 
}); 
}) 
//]]> 
</script> 

您可能感興趣的文章:

相關(guān)文章

使用異步controller與jQuery實(shí)現(xiàn)卷簾式分頁
這篇文章主要介紹了使用異步controller與jQuery實(shí)現(xiàn)卷簾式分頁，使用異步controller與jQuery按需加載內(nèi)容，當(dāng)用戶開始通過網(wǎng)站的內(nèi)容滾動(dòng)時(shí)進(jìn)一步加載內(nèi)容。,需要的朋友可以參考下
2019-06-06
jQueryUI 拖放排序遇到滾動(dòng)條時(shí)有可能無法執(zhí)行排序的小bug及解決方案
前些日子不是在做使用Jquery-UI實(shí)現(xiàn)一次拖拽多個(gè)選中的元素操作嘛，在持續(xù)完善這個(gè)組件時(shí)遇到了一個(gè)關(guān)于拖放排序的bug。今天就著圖片和代碼重現(xiàn)一下，也順便告訴大家如何解決這個(gè)問題
2016-12-12
基于jQuery+Cookie實(shí)現(xiàn)的防止刷新的在線考試倒計(jì)時(shí)
這篇文章主要介紹了基于jQuery+Cookie實(shí)現(xiàn)的防止刷新的在線考試倒計(jì)時(shí)的方法和示例，有需要的小伙伴可以參考下
2015-06-06
jquery 跨域訪問問題解決方法(筆記)
對于js跨域訪問，在先前也曾碰到過，但可能并沒有認(rèn)真去對待，可能查看過相關(guān)資料，但當(dāng)著兩天再次碰到這個(gè)問題時(shí)，走了不少彎路才找到問題原因。記下這次解決過程，為自己不再強(qiáng)大的記憶力默哀一下。
2011-06-06
jQuery實(shí)現(xiàn)輪播圖效果demo
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01
jquery實(shí)現(xiàn)滑動(dòng)樓梯效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)滑動(dòng)樓梯效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
jQuery實(shí)現(xiàn)放大鏡效果實(shí)例代碼
在一些電商網(wǎng)站我們都見到使用過放大鏡來查看商品詳情，那么基于jquery代碼是如何實(shí)現(xiàn)放大鏡效果的呢？下面由腳本之家小編給大家分享jquery代碼實(shí)現(xiàn)放大鏡效果
2016-03-03
jQuery插件ImageDrawer.js實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫（附源碼下載）
ImageDrawer.js是一款可以實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫的jQuery插件，接下來通過本文給大家介紹jQuery插件ImageDrawer.js實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫（附源碼下載），需要的朋友參考下
2016-02-02
分享十五個(gè)最佳jQuery 幻燈插件和教程
在網(wǎng)站前端中使用jQuery庫已經(jīng)變得越來越流行，前端開發(fā)人員發(fā)布或撰寫的相關(guān)的插件和教程也與日俱增。
2010-03-03
jquery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后展開列表內(nèi)容的導(dǎo)航欄效果
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后展開列表內(nèi)容的導(dǎo)航欄效果,通過簡單的jQuery鏈?zhǔn)讲僮鲗?shí)現(xiàn)針對頁面元素的遍歷及樣式動(dòng)態(tài)變換功能,需要的朋友可以參考下
2015-09-09