jQuery照片伸缩效果不影响其他元素的布局


Posted in Javascript onMay 09, 2014

之前在网上看到这种特效,无奈当时没有收藏网址,导致后来一度不知道这个特效是怎么实现的。今天特意在网上搜罗了一下,果然功夫不负有心人,被我找到了。

我也努力过自己尝试着写:

但只是单纯的图片放大,而且还影响了图片周围的元素的布局(因为图片放大占据了更大的空间)。

后来发现要灵活巧妙的运用overflow和position这两个属性,就能达到目的。其实我觉得CSS(CSS3)中的overflow和position(顺带的top,bottom,left,right)简直是做网页特效无解的组合,当然还是js(jquery)是老大。

废话说了这么多,大家肯定还是很疑惑:这到底是什么特效呢?唉,我的语言表达能力还是很一般,下面我就截图来说明好了:

这个是网页打开的初始模样:
jQuery照片伸缩效果不影响其他元素的布局 
当把鼠标停留在以上6张图片的任意一张图片的时候,会出现我所说的特效(这里我把鼠标放在第3张作为示例):
jQuery照片伸缩效果不影响其他元素的布局 
你会发现图片是缩小了,鼠标放开图片感觉又放大了(回到初始状态),而没有图片溢出的现象,而且不影响其他图片和元素的布局。

下面贴代码了:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jQuery照片伸缩效果</title> 
</head> 
<!-- The Style --> 
<style type="text/css"> 
*{ 
margin: 0; 
padding: 0; 
} 
body{ 
font-family: "Myriad Pro", "Trebuchet MS", Helvetica, sans-serif; 
font-size: 12px; 
color: #fff; 
} 
#col { 
width: 600px; 
height:400px; 
margin: 20px auto 0px auto; 
border: 1px solid #2D353F; 
} 
.pic { 
width: 200px; 
height: 200px; 
margin: 0px; 
overflow: hidden;/*这边定义了overflow为hidden*/ 
position: relative;/*这边定义了position为relative,这其实是为了下面的img的position可以依照pic定位*/ 
float: left; 
} 
/*图片的原始大小是500*333左右*/ 
/*这里并没有对width宽度做文章,是对height高度做文章的*/ 
.pic a img { 
height: 500px; 
border: none; 
position: absolute; /*正因为父标签定义了position,这边img定义position才有定位依据,要不然就是对于整个浏览器进行定位*/ 
top: -66.5px; 
left: -150px; 
opacity: 0.5; 
-moz-opacity: 0.5; 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);/*这边为了兼容浏览器,和opacity属性的作用是一样的*/ 
} </style> 
<!-- The JavaScript --> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
$('#col img').hover( 
function(){ 
var $this = $(this); 
$this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'}); 
}, 
function(){ 
var $this = $(this); 
$this.stop().animate({'opacity':'0.5','height':'500px','top':'-66.5px','left':'-150px'}); 
} 
); 
}); 
</script> 
<body> 
<div id="col"> 
<div class="pic"> 
<a href="#"> 
<img src="Images/1.jpg"/> 
</a> 
</div> 
<div class="pic"> 
<a href="#"> 
<img src="Images/2.jpg"/> 
</a> 
</div> 
<div class="pic"> 
<a href="#"> 
<img src="Images/3.jpg"/> 
</a> 
</div> 
<div class="pic"> 
<a href="#"> 
<img src="Images/4.jpg"/> 
</a> 
</div> 
<div class="pic"> 
<a href="#"> 
<img src="Images/5.jpg"/> 
</a> 
</div> 
<div class="pic"> 
<a href="#"> 
<img src="Images/6.jpg"/> 
</a> 
</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
js四舍五入数学函数round使用实例
May 09 #Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 #Javascript
关于Javascript 对象(object)的prototype
May 09 #Javascript
javascript字母大小写转换的4个函数详解
May 09 #Javascript
js统计页面的来访次数实现代码
May 09 #Javascript
JavaScript Array对象扩展indexOf()方法
May 09 #Javascript
js获取鼠标点击的位置实现思路及代码
May 09 #Javascript
You might like
php cookie的操作实现代码(登录)
2010/12/29 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
常用PHP封装分页工具类
2017/01/14 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
python常用函数与用法示例
2019/07/02 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
Python list和str互转的实现示例
2020/11/16 Python
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
运动会跳远广播稿
2014/02/04 职场文书
年终总结会议主持词
2014/03/17 职场文书
寒假安全保证书
2015/02/28 职场文书
大二学年个人总结
2015/03/03 职场文书
2016高考寄语集锦
2015/12/04 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
vue 自定义组件添加原生事件
2022/04/21 Vue.js