首頁 > 開發者 > JavaScript

滑鼠滑過出現預覽的大圖提示效果

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

滑鼠滑過出現預覽的大圖提示效果

 這篇文章主要介紹了如何?滑鼠滑過出現預覽的大圖提示效果,需要的朋友可以參考下

當滑鼠滑過圖片時，圖片會出現預覽的大圖，大圖下面還會有介紹文字。 

 代碼如下:

<%@ 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>"; //建立<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> 

 

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More