主要的想法是当鼠标悬浮后计算所有的描述容器大小和位置。主要依赖于缩略图的最大尺寸及其居于主要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.3,
maxOpacity : 0.9,
minOpacity : Number( $elems.css('opacity') )
},
init = function() {
// minScale will be set in the CSS
settings.minScale = _getScaleVal() || 1;
// preload the images (thumbs)
_loadImages( function() {
_calcDescrp();
_initEvents();
});
},
// Get Value of CSS Scale through JavaScript:
// http://css-tricks.com/get-value-of-css-rotation-through-javascript/
_getScaleVal= function() {
var st = window.getComputedStyle($elems.get(0), null),
tr = st.getPropertyValue("-webkit-transform") ||
st.getPropertyValue("-moz-transform") ||
st.getPropertyValue("-ms-transform") ||
st.getPropertyValue("-o-transform") ||
st.getPropertyValue("transform") ||
"fail...";
if( tr !== 'none' ) {
var values = tr.split('(')[1].split(')')[0].split(','),
a = values[0],
b = values[1],
c = values[2],
d = values[3];
return Math.sqrt( a * a + b * b );
}
},
// calculates the style values for the description containers,
// based on the settings variable
_calcDescrp = function() {
$descrp.each( function(i) {
var $el = $(this),
$img = $el.prev(),
img_w = $img.width(),
img_h = $img.height(),
img_n_w = settings.maxScale * img_w,
img_n_h = settings.maxScale * img_h,
space_t = ( img_n_h - img_h ) / 2,
space_l = ( img_n_w - img_w ) / 2;
$el.data( 'space_l', space_l ).css({
height : settings.maxScale * $el.height(),
top : -space_t,
left : img_n_w - space_l
});
});
},
_initEvents = function() {
$elems.on('proximity.Photo', { max: 80, throttle: 10, fireOutOfBounds : true }, function(event, proximity, distance) {
var $el = $(this),
$li = $el.closest('li'),
$desc = $el.next(),
scaleVal = proximity * ( settings.maxScale - settings.minScale ) + settings.minScale,
scaleExp = 'scale(' + scaleVal + ')';
// change the z-index of the element once
// it reaches the maximum scale value
// also, show the description container
if( scaleVal === settings.maxScale ) {
$li.css( 'z-index', 1000 );
if( $desc.offset().left + $desc.width() > listL + listW ) {
$desc.css( 'left', -$desc.width() - $desc.data( 'space_l' ) );
}
$desc.fadeIn( 800 );
}
else {
$li.css( 'z-index', 1 );
$desc.stop(true,true).hide();
}
$el.css({
'-webkit-transform' : scaleExp,
'-moz-transform' : scaleExp,
'-o-transform' : scaleExp,
'-ms-transform' : scaleExp,
'transform' : scaleExp,
'opacity' : ( proximity * ( settings.maxOpacity - settings.minOpacity ) + settings.minOpacity )
});
});
},
_loadImages = function( callback ) {
var loaded = 0,
total = $elems.length;
$elems.each( function(i) {
var $el = $(this);
$('<img>').load( function() {
++loaded;
if( loaded === total )
callback.call();
}).attr( 'src', $el.attr('src') );
});
};
return {
init : init
};
分享到:
相关推荐
仿淘宝的一种鼠标悬浮商品之后图片被放大。采用jquery实现,非常简单,思路清晰。
jQuery悬浮图片上13种超炫效果
jQuery实现的悬浮网站右侧带微信二维码图片的返回底部及顶部效果代码.zip
jquery css3鼠标悬停图片放大显示效果代码
jQuery鼠标移到图片悬浮提示,jQuery,提示工具,悬浮效果,响应式,jQuery鼠标移到图片悬浮提示是一款基于jquery实现的响应式大图悬浮弹窗提示工具
jquery实现鼠标悬停图片预览功能的效果下载
jquery实现图片翻牌旋转特效是一款当鼠标悬浮到图片上的时候,图片与文字间进行翻转切换。
本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: 一、主体程序 <!DOCTYPE html> <html> <head> <meta charset=utf...
鼠标悬停在图片上后,显示隐藏的另外一张图片,鼠标移走后返回之前图片,整个过程带有翻转效果 原理: 附件提供了7个单元的翻转效果,其原理只有一个,其他的只是相对定位绝对定位实现而已。 ...
本文实例讲述了jQuery实现悬浮在右上角的网页客服效果代码。分享给大家供大家参考,具体如下: 这是款网页在线客服代码,应用了jquery插件,兼容性不错。默认状态下,客服只显示一个图片Button,用鼠标点击时展开...
jQuery鼠标经过图片背景滑动切换效果基于jquery1.10.2.js实现,鼠标经过图片滑动切换背景动态效果。
jquery鼠标悬浮高亮开关灯是一款基于jquery实现的相册图片鼠标悬浮高亮开关灯特效。
实现效果: 实用图片悬停悬浮展示文字JS特效代码,常用图片介绍文字的简介,当然...内容可以是二维码,文字常用的表现形式,特效基于jQuery实现,基于stop、animate,还是非常简单 的,大家可以改成自己的特效代码
这是一款很具立体视觉效果的jQuery全屏图片3D翻转切换代码,点击右侧悬浮标题菜单控制图片切换。
那个箭头不要以为是用图片做的,其实并没有,完全用 CSS 实现。 我把代码分享出来,新手们赶快研究一下,超实用的效果。 演示1:http://www.paihang.6om.cn/upan/ 演示2:http://www.paihang.6om.cn/huazhuangpin/ ...
jQuery鼠标移到图片悬浮提示,jQuery,提示工具,悬浮效果,响应式,jQuery鼠标移到图片悬浮提示是一款基于jquery实现的响应式大图悬浮弹窗提示工具
jquery实现html5图片上传 jquery小火箭返回顶部 jquery左侧导航滑动网页定位效果 jQuery带进度条和标题左右箭头渐变幻灯片 jQuery抖动导航菜单效果 jQuery横向向上弹出导航菜单 jquery虚拟桌面图片拖拽 jquery角色...
这是一款很实用的jQuery焦点图插件,它的最大特点就是使用非常方便,而且实现相对...焦点图的图片下方悬浮文字链接,鼠标滑过文字时即可切换至相应的图片,在图片切换的过程中出现淡入淡出的动画效果,简单而不乏韵味。