Welcome, Old Sport!

照片伸缩效果 CSS & jQuery

by ilikecss ON 2010/11/09 7420

今天,将向您展示如何创建一个简单的图像缩小效果。这个效果是图片最初是放大的,然后鼠标移动上去会自动收缩。此效果可用于摄影网站或图片展示的画廊。我的例子使用了彩色照片,黑白会更加艺术。

Step1. 创建HTML

代码只需要下面几行,Class=”pic” 这段Div就是图片,你需要放几张就插入几段Div

<div id="col">
<div class="pic">
    <a href="http://www.flickr.com/photos/airos_king/4997719165/" target="_blank">
        <img src="images/veerles-blog_1.jpg" alt="veerles-blog"/>
    </a>
</div>
</div>

Step2. 创建CSS

#col {
width: 600px;
margin: 20px auto 0px auto;
border: 10px solid #2D353F;
overflow: hidden;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.pic {
width: 200px;
height: 200px;
margin: 0px;
overflow: hidden;
position: relative;
float: left;
}
.pic a img {
height: 500px;
border: none;
position: absolute;
top: -66.5px;
left: -150px;
opacity: 0.5;
-moz-opacity: 0.5;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}

Step3. 插入jQuery和脚本包

脚本:

<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':'-50px'}); // 参数变幻后: 滤镜,高度,距上,距左
		}
	);
});
</script>

脚本包:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
3条评论
  1. Keep posting stuff like this i really like it

  2. Was looking for this – so I just tweeted your site on my account – thanks




TOP