html中图片鼠标滑过偏移,jQuery和css3鼠标滑过网格相邻图片浮动效果
这是一款效果十分炫酷的jQuery和css3鼠标滑过网格相邻图片浮动效果。插件中使用了jQuery Proximity plugin。
有很多种方法使用纯css来制作手风琴效果,其中使用最多的是使用:target伪类来实现。使用:target伪类的问题是我们不能够再次关闭内容区域或同时显示多个内容区域。但是通过使用checkbox,我们可以控制内容区域的打开和关闭。如果只想在某一时刻只显示一个内容,可以使用radio按钮来实现。
HTML
下面的例子demo2的html结构:
-
Time
Since time, and his predestinated end
JAVASCRIPT
该插件要做的事情是当鼠标滑过缩略图时计算出相邻区域的大小和位置。
// 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);
$('
').load( function() {
++loaded;
if( loaded === total )
callback.call();
}).attr( 'src', $el.attr('src') );
});
};
return {
init : init
};
html中图片鼠标滑过偏移,jQuery和css3鼠标滑过网格相邻图片浮动效果相关推荐
- html图片幕墙特效,jQuery和CSS3炫酷可交互的图片墙特效
Polaroid_Gallery是一款效果非常酷的可交互的jQuery和CSS3图片墙特效插件.该照片墙插件可以使用圆点导航按钮将相应的图片旋转居中显示,当点击居中的图片时,图片会翻转到反面,显示图片 ...
- 基于JQuery实现鼠标滑过(类似hover)图片(或Canvas),实时获取鼠标坐标位置
前言: 尝试制作web端物体标注的时候,虽然利用Canvas可以标注物体,但缺少像LabelImg那样可以利用十字星定位鼠标起点的辅助功能.一直认为可以通过鼠标hover事件实时获取鼠标位置,尝试后无 ...
- css炫酷标题,纯css3鼠标滑过图片炫酷标题显示特效
很多网站的图片鼠标滑过显示标题效果都是使用jQuery来完成的,现在,我们可以使用CSS3 animations来完成同样惊艳的效果.如果你对CSS3 animations还不了解,请先阅读CSS3 ...
- html5鼠标滑过图片 图片弹出层,纯CSS3鼠标滑过图片遮罩层动画特效
简要教程 这是一款使用纯CSS3制作的鼠标滑过图片遮罩层动画特效.该特效中,当鼠标滑过或悬停在图片上面时,会在图片上出现遮罩层动画,展示出图片的描述信息和链接图标按钮. 使用方法 在页面中引入boot ...
- html鼠标移上去变色放大,CSS3 鼠标滑过图片突出放大效果 | 腾讯云
今天给大家分享一款简单实用的CSS3鼠标滑过图片放大特效,我们可以将它应用在相册中,或者是轮播展示的图片中,这样可以将鼠标移到图片上进行快速预览图片.同时你也可以在此基础上扩展它,比如给图片加投影和边 ...
- ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题
ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题 如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置contentO ...
- 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...
- html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
- html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效
这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效.该特效基于Bootstrap网格系统来布局,通过简单的CSS3代码,在鼠标滑过图片时对图片进行3D翻转,效果非常的酷. 使用方法 HTML结 ...
最新文章
- 。net面试题(2)
- cocos2d-html5 简易 下拉表单 控件
- 最近微信方面的更新 getUserInfo:fail scope unauthorized
- 四、物理优化(1)范式化
- 唯有自己变得强大_真正的自立,唯是让自己变得更加强大
- 【Python】Paramiko模块实现Linux服务器远程文件操作
- es获取最大时间的记录_Python日志写入ES之五种方案比较
- 数据结构与算法之递推算法 C++与PHP实现
- 查询手机号码归属地区等信息API接口
- 脑皮质算法(2)一种基于新皮层网格细胞的智能和皮质功能的框架
- C语言科学计数法字符串转化为实数
- C# Winfrom Chart 图表控件 柱状图、折线图
- 圆我一个游戏梦,XNA版超级玛丽
- CTFSHOW-WEB详解
- esim工业路由器,爱陆通4G工业路由器5G工业路由器全网通工业路由器
- 前端学习第八弹:制作一个精美书签
- 【剑指offer】解题思路汇总
- __init__.py 文件用法
- ValueError: binary mode doesn‘t take an encoding argument
- Centos7环境下安装WPS以及遇到的问题解决
热门文章
- android新浪微博客户端 开机Logo动画实现
- Eclipse中创建第一个窗口程序
- UE4的自定义输入设备插件制作方法
- 好心情精神心理:睡眠不足,这几点你必须注意!
- SA1456C HG8245C2 HG8245H华为系列光猫通用教材
- 施耐德高压电源维修高压发生器NHRR01001K
- Android中顶部Tab带滑动选项卡之二选一,仿淘宝宝贝收藏和店铺收藏
- 鸿蒙手机王者荣耀怎么充值,苹果手机王者荣耀怎么充值?苹果系统充值王者荣耀教程...
- 计算机系期中教学检查,2016-2017学年度第二学期期中教学检查实施方案
- uni-app 非H5端,手机顶部状态栏区域设置