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

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

1.定义所用到的样式

1: 

>

   3:         *

   4:         {

0px;

0px;

   7:         }

img

   9:         {

1px solid #CCCCCC;

  11:         }

/*新增加大图样式*/

  13:         {

0 auto;

1px solid #0F0F0F;

80px;

410px;

#FFFFFF;

none;

/*  这个对显示鼠标的位置很重要，如果不是绝对位置的话，将显示的地方不一样*/

middle;

center;

Arial;

  24:         }

/*大图下面的文字标题样式*/

  26:         {

20px;

center;

  29:         }

ul

  31:         {

0 auto;

50px;

center;

100%;

  36:         }

li

  38:         {

none;

left;

center;

10px 10px 10px 10px;

  43:         }

p

  45:         {

6px;

  47:         }

>