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"); //設(shè)置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"); //設(shè)置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"); //設(shè)置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"); //設(shè)置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>
相關(guān)文章
基于jquery實現(xiàn)的上傳圖片及圖片大小驗證、圖片預覽效果代碼
基于jquery實現(xiàn)的上傳圖片及圖片大小驗證、圖片預覽效果代碼,需要的朋友可以參考下。2011-04-04jQuery實現(xiàn)form表單序列化轉(zhuǎn)換為json對象功能示例
這篇文章主要介紹了jQuery實現(xiàn)form表單序列化轉(zhuǎn)換為json對象功能,結(jié)合實例形式分析了表單數(shù)據(jù)傳輸中使用serializeJson進行序列化操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-05-05Jquery+ajax請求data顯示在GridView上(asp.net)
Jquery ajax請求data顯示在asp.net中GridView控件上,需要的朋友可以參考下。2010-08-08jQuery插件slick實現(xiàn)響應式移動端幻燈片圖片切換特效
jQuery插件slick是一款響應式、適用于移動設(shè)備觸摸屏、可滑動顯示的jQuery幻燈片插件。該幻燈片插件可以設(shè)置多種顯示效果,可以自動播放,是一款移動優(yōu)先的jQuery幻燈片插件。2015-04-04jQuery使用animate實現(xiàn)ul列表項相互飄動效果示例
這篇文章主要介紹了jQuery使用animate實現(xiàn)ul列表項相互飄動效果,結(jié)合實例形式分析了jQuery使用animate動畫切換的操作技巧,需要的朋友可以參考下2016-09-09vue登錄頁面cookie的使用及頁面跳轉(zhuǎn)代碼
這篇文章主要介紹了vue登錄頁面cookie的使用及頁面跳轉(zhuǎn)代碼功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07