鼠標(biāo)滑過出現(xiàn)預(yù)覽的大圖提示效果

更新時間：2014年02月26日 15:44:00 作者：

這篇文章主要介紹了如何實現(xiàn)鼠標(biāo)滑過出現(xiàn)預(yù)覽的大圖提示效果,需要的朋友可以參考下

當(dāng)鼠標(biāo)滑過圖片時，圖片會出現(xiàn)預(yù)覽的大圖，大圖下面還會有介紹文字。

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="圖片提示效果.aspx.cs" Inherits="圖片提示效果" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type ="text/css" > 
.aa{ 
width:88px; 
height :100px; 
} 

</style> 
<script type ="text/javascript" src ="Scripts/jquery-1.7.1.js" ></script> 
<script type ="text/javascript" > 
$(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> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div > 

<a href ="image/4.jpg" class ="tooltip" title ="鞋子"><img src="image/4.jpg" alt="鞋子" class="aa"/> </a> 
<a href ="image/5.jpg" class ="tooltip" title ="手套"><img src="image/5.jpg" alt="手套" class="aa"/> </a> 
<a href ="image/6.jpg" class ="tooltip" title ="裙子"><img src="image/6.jpg" alt="裙子" class="aa"/> </a> 
<a href ="image/7.jpg" class ="tooltip" title ="包包"><img src="image/7.jpg" alt="包包" class="aa"/> </a> 

</div> 
</form> 
</body> 
</html> 

相關(guān)文章

前端常用的4種請求方式實例總結(jié)
這篇文章詳細(xì)介紹了GET、POST、PUT和DELETE四種HTTP請求方法的使用方式、優(yōu)缺點及應(yīng)用場景,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
2025-01-01
原生js實現(xiàn)下拉刷新和上拉加載更多
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)下拉刷新和上拉加載更多，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
JavaScript實現(xiàn)左側(cè)菜單效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)左側(cè)菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-12-12
JS實現(xiàn)表單驗證案例
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)表單驗證案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
原生JS實現(xiàn)列表內(nèi)容自動向上滾動效果
這篇文章主要介紹了原生JS實現(xiàn)列表內(nèi)容自動向上滾動效果，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-05-05
Js中forEach修改原數(shù)組與sort排序經(jīng)典場景詳解
forEach是沒有返回值并且不直接改變原數(shù)組的,今天發(fā)現(xiàn)是不能直接改變,下面這篇文章主要給大家介紹了關(guān)于Js中forEach修改原數(shù)組與sort排序經(jīng)典場景的相關(guān)資料,需要的朋友可以參考下
2022-05-05
微信小程序?qū)崿F(xiàn)彈出菜單功能
最近做項目需要這樣的需求，當(dāng)用戶點擊標(biāo)簽欄按鈕，向下彈出菜單，再次點擊，收回菜單。接下來通過本文給大家介紹微信小程序?qū)崿F(xiàn)彈出菜單功能，感興趣的朋友一起看看吧
2018-06-06
微信小程序下拉加載和上拉刷新兩種實現(xiàn)方法詳解
這篇文章主要介紹了微信小程序下拉加載和上拉刷新兩種實現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-09-09
微信小程序?qū)崿F(xiàn)底部彈出模態(tài)框
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)底部彈出模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-11-11
javascript Firefox與IE 替換節(jié)點的方法
Firefox 與 IE 替換節(jié)點的方法
2010-02-02