前端实现图片悬浮_jquery兑现图片悬浮效果

jquery实现图片悬浮效果

主要的想法是当鼠标悬浮后计算所有的描述容器大小和位置。主要依赖于缩略图的最大尺寸及其居于主要wrapper中的位置。例如，当缩略图接近边缘，我们就使得描述区域显示在缩略图左边

然后我们将帮定逼近事件到图片。主要想法是根据鼠标位置来变化图片大小。一旦图片达到最大尺寸，我们设置z-index最高，因此位于最高层次，并且显示分开的描述。风之境地

// list of thumbs

var $list        = $('#pe-thumbs'),

// list's width and offset left.

// this will be used to know the position of the description container

listW        = $list.width(),

listL        = $list.offset().left,

// the images

$elems        = $list.find('img'),

// the description containers

$descrp        = $list.find('div.pe-description'),

// maxScale : maximum scale value the image will have

// minOpacity / maxOpacity : minimum (set in the CSS) and maximum values for the image's opacity

settings    = {

maxScale    : 1