鼠標滑過出現預覽的大圖提示效果
更新時間：2014年02月26日 15:44:00 作者：
這篇文章主要介紹了如何實現鼠標滑過出現預覽的大圖提示效果,需要的朋友可以參考下
當鼠標滑過圖片時，圖片會出現預覽的大圖，大圖下面還會有介紹文字。
<%@ 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='產品預覽圖'/>" + 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>
</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>
復制代碼 代碼如下:
<%@ 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='產品預覽圖'/>" + 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>
</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>
相關文章
這篇文章詳細介紹了GET、POST、PUT和DELETE四種HTTP請求方法的使用方式、優(yōu)缺點及應用場景,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2025-01-01
這篇文章主要為大家詳細介紹了原生js實現下拉刷新和上拉加載更多，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要為大家詳細介紹了JavaScript實現左側菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要為大家詳細介紹了JS實現表單驗證案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了原生JS實現列表內容自動向上滾動效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
forEach是沒有返回值并且不直接改變原數組的,今天發(fā)現是不能直接改變,下面這篇文章主要給大家介紹了關于Js中forEach修改原數組與sort排序經典場景的相關資料,需要的朋友可以參考下2022-05-05
最近做項目需要這樣的需求，當用戶點擊標簽欄按鈕，向下彈出菜單，再次點擊，收回菜單。接下來通過本文給大家介紹微信小程序實現彈出菜單功能，感興趣的朋友一起看看吧2018-06-06
這篇文章主要介紹了微信小程序下拉加載和上拉刷新兩種實現方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細介紹了微信小程序實現底部彈出模態(tài)框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
javascript Firefox與IE 替換節(jié)點的方法
Firefox 與 IE 替換節(jié)點的方法2010-02-02