DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 鼠標滑過出現預覽的大圖提示效果
鼠標滑過出現預覽的大圖提示效果
編輯: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>     
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved