jQuery鼠标悬停图片放大效果

发表日期：2016-01-20 文章编辑：南昌开优网络浏览次数：4811 标签：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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标悬停图片放大效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}
body{ background:#000;}

#kaiu{ width:460px; height:auto; margin:150px auto; overflow:hidden;}
#kaiu li{ width:218px; height:155px; overflow:hidden; position:relative; float:left; margin:0 12px 12px 0;}
#kaiu li img{ position:absolute; left:0; top:0; z-index:1; cursor:pointer;}
#kaiu li h2{ font-size:14px; width:198px; font-weight:normal; text-align:left; display:block; position:absolute; left:0; bottom:0; height:30px; line-height:30px; padding:0 10px; background:#fff; display:block; z-index:2; color:#444;overflow:hidden; white-space: nowrap;text-overflow: ellipsis;}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div id="kaiu">
	<ul>
    	<li><img src="http://www.kaiu.net/images/banner_cases.jpg" width="218" height="155" /><h2>开优网络成功案例</h2></li>
        <li><img src="http://www.kaiu.net/images/banner_blogCon.jpg" width="218" height="155" /><h2>开优网络博客内容</h2></li>
        <li><img src="http://www.kaiu.net/images/banner_casesCon.jpg" width="218" height="155" /><h2>开优网络精采案例内容</h2></li>
        <li><img src="http://www.kaiu.net/images/banner_css.jpg" width="218" height="155" /><h2>开优网络CSS格式化</h2></li>
    </ul>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
	var imgs = $('#kaiu li');
	var imgWidth = 218; //图片的默认宽度，主意不要带单位
	var imgHeight = 155; //图片的默认高度，主意不要带单位
	imgs.hover(function(){
		$(this).find('img').stop().animate({
			left:'-20',
			top:'-20',
			right:'-20',
			bottom:'-10px',
			width:imgWidth+20+'px',
			height:imgHeight+20+'px'
		},500);
	},function(){
		$(this).find('img').stop().animate({
			left:'0',
			top:'0',
			right:'0',
			bottom:'0',
			width:imgWidth+'px',
			height:imgHeight+'px'
		},500);
	});
});
</script>
<!-- 代码部分end -->
</body>
</html>
返回列表
上一篇：Jquery 节点选择器下一篇：Canvas与Image相互转换