萬盛學電腦網 >> 腳本專題 >> javascript >> 鼠標滑過出現預覽的大圖提示效果
鼠標滑過出現預覽的大圖提示效果
這篇文章主要介紹了如何實現鼠標滑過出現預覽的大圖提示效果,需要的朋友可以參考下
當鼠標滑過圖片時，圖片會出現預覽的大圖，大圖下面還會有介紹文字。 代碼如下: <%@ 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>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved