2012年8月21日星期二

jQuery学习(一):鼠标移动显示大图

jQuery学习(一):鼠标移动显示大图

鼠标移动,显示大图,在不少网站上都有这种需要,特别是Zol、360buy、Taobao等。平时显示缩略图,在用户需要查看细节的时候,才显示与此图形匹配的大图。使用jQuery实现非常方便。即先显示小图片,当用户鼠标在小图片上移动时,再根据进入、移除或在图片上移动,而添加不同的处理事件,分别显示、删除或移动大图片,其大致代码如下:

1.定义所用到的样式

   1:  
   2:     <style type="text/css">
   3:         *
   4:         {
   5:             margin: 0px;
   6:             padding: 0px;
   7:         }
   8:         img
   9:         {
  10:             border: 1px solid #CCCCCC;
  11:         }
  12:         #imgdiv /*新增加大图样式*/
  13:         {
  14:             margin: 0 auto;
  15:             border: 1px solid #0F0F0F;
  16:             padding: 80px;
  17:             width: 410px;
  18:             background: #FFFFFF;
  19:             display: none;
  20:             position: absolute; /*  这个对显示鼠标的位置很重要,如果不是绝对位置的话,将显示的地方不一样*/
  21:             vertical-align: middle;
  22:             text-align: center;
  23:             font-family: Arial;
  24:         }
  25:         div#imgdiv p /*大图下面的文字标题样式*/
  26:         {
  27:             padding-top: 20px;
  28:             text-align: center;
  29:         }
  30:         ul
  31:         {
  32:             margin: 0 auto;
  33:             margin-left: 50px;
  34:             text-align: center;
  35:             width:100%;
  36:         }
  37:         li
  38:         {
  39:             list-style: none;
  40:             float: left;
  41:             text-align: center;
  42:             margin: 10px 10px 10px 10px;
  43:         }
  44:         li p
  45:         {
  46:             padding-top: 6px;
  47:         }
  48:     </style>

2.添加jQuery引用,并为图片添加mouseover、mouseout和mousemove函数。

   1: <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
   2: <script type="text/javascript">
   3:     $(function () {
   4:         $("img").mouseover(function (e) {
   5:  
   6:             var s = $("<div id = 'imgdiv'><img src = " + this.src + "  width = '300' height='300'/><p>" + this.title + "</p></div>");
   7:             $("body").append(s);
   8:             $("#imgdiv").css({
   9:                 "top": (e.pageY + 20) + "px",
  10:                 "left": (e.pageX + 10) + "px"
  11:             }).show("slow");
  12:  
  13:         }).mouseout(function () {
  14:             $("#imgdiv").remove();
  15:         }).mousemove(function (e) {
  16:  
  17:             $("#imgdiv").css({
  18:                 "top": (e.pageY + 20) + "px",
  19:                 "left": (e.pageX + 10) + "px"
  20:             });
  21:         });
  22:     });
  23: </script>

其中mouseover也可以使用mouseenter函数替换,其效果一样。

3.Html页面代码。

   1: <body>
   2:     <ul>
   3:         <li><a href="">
   4:             <img src="Images/4.png" width="200" height="150" title="Nice girl" alt="Nice girl!" /></a><p>
   5:                 Nice girl</p>
   6:         </li>
   7:         <li><a href="">
   8:             <img src="Images/1.PNG" width="200" height="150" title="Fangfang" alt="Fangfang!" /></a><p>
   9:                 FangFang</p>
  10:         </li>
  11:     </ul>
  12: </body>

4.显示效果。

image


参考文献:

[1] fivecent, 图片提示-鼠标放在图片上会显示图片的大图上。


TAG: