jquery實現(xiàn)網(wǎng)站超鏈接和圖片提示效果
更新時間：2013年03月21日 14:53:01 作者：
超鏈接提示效果可以通過title實現(xiàn);圖片提示效果可以通過alt實現(xiàn)，本文將會介紹下使用jquery實現(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"); //設置x坐標和y坐標，并且顯示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
//]]>
</script>
圖片提示效果：
<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)品預覽圖'/>"+imgTitle+"<\/div>"; //創(chuàng)建 div 元素
$("body").append(tooltip); //把它追加到文檔中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //設置x坐標和y坐標，并且顯示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
//]]>
</script>
復制代碼 代碼如下:
<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"); //設置x坐標和y坐標，并且顯示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
//]]>
</script>
圖片提示效果：
復制代碼 代碼如下:
<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)品預覽圖'/>"+imgTitle+"<\/div>"; //創(chuàng)建 div 元素
$("body").append(tooltip); //把它追加到文檔中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //設置x坐標和y坐標，并且顯示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
//]]>
</script>
相關文章
使用異步controller與jQuery實現(xiàn)卷簾式分頁
這篇文章主要介紹了使用異步controller與jQuery實現(xiàn)卷簾式分頁，使用異步controller與jQuery按需加載內(nèi)容，當用戶開始通過網(wǎng)站的內(nèi)容滾動時進一步加載內(nèi)容。,需要的朋友可以參考下2019-06-06
jQueryUI 拖放排序遇到滾動條時有可能無法執(zhí)行排序的小bug及解決方案
前些日子不是在做使用Jquery-UI實現(xiàn)一次拖拽多個選中的元素操作嘛，在持續(xù)完善這個組件時遇到了一個關于拖放排序的bug。今天就著圖片和代碼重現(xiàn)一下，也順便告訴大家如何解決這個問題2016-12-12
基于jQuery+Cookie實現(xiàn)的防止刷新的在線考試倒計時
這篇文章主要介紹了基于jQuery+Cookie實現(xiàn)的防止刷新的在線考試倒計時的方法和示例，有需要的小伙伴可以參考下2015-06-06
對于js跨域訪問，在先前也曾碰到過，但可能并沒有認真去對待，可能查看過相關資料，但當著兩天再次碰到這個問題時，走了不少彎路才找到問題原因。記下這次解決過程，為自己不再強大的記憶力默哀一下。2011-06-06
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要為大家詳細介紹了jquery實現(xiàn)滑動樓梯效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
在一些電商網(wǎng)站我們都見到使用過放大鏡來查看商品詳情，那么基于jquery代碼是如何實現(xiàn)放大鏡效果的呢？下面由腳本之家小編給大家分享jquery代碼實現(xiàn)放大鏡效果2016-03-03
jQuery插件ImageDrawer.js實現(xiàn)動態(tài)繪制圖片動畫（附源碼下載）
ImageDrawer.js是一款可以實現(xiàn)動態(tài)繪制圖片動畫的jQuery插件，接下來通過本文給大家介紹jQuery插件ImageDrawer.js實現(xiàn)動態(tài)繪制圖片動畫（附源碼下載），需要的朋友參考下2016-02-02
在網(wǎng)站前端中使用jQuery庫已經(jīng)變得越來越流行，前端開發(fā)人員發(fā)布或撰寫的相關的插件和教程也與日俱增。2010-03-03
jquery實現(xiàn)鼠標點擊后展開列表內(nèi)容的導航欄效果
這篇文章主要介紹了jquery實現(xiàn)鼠標點擊后展開列表內(nèi)容的導航欄效果,通過簡單的jQuery鏈式操作實現(xiàn)針對頁面元素的遍歷及樣式動態(tài)變換功能,需要的朋友可以參考下2015-09-09