鼠标移上去图片切换且慢慢放大JS特效

最新推荐文章于 2022-06-29 11:01:54 发布

神夜大侠

最新推荐文章于 2022-06-29 11:01:54 发布

阅读量2k

点赞数

分类专栏： JQUERY + JS + CSS

本文链接：https://blog.csdn.net/u012015434/article/details/16111961

版权

JQUERY + JS + CSS 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

<!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>
</head>
<style type="text/css">
.proSeriest {
	height:171px;
	background:url(mbg.jpg) repeat-x top;
	overflow:hidden;
	position:relative;
}
.proSeriest .proSeriestbox {
	width:1060px;
	margin:15px auto;
	padding-left:60px;
}
.item {
	width:186px;
	height:136px;
	margin-right:78px;
	overflow:hidden;
	position:relative;
	float:left;
}
.item .caption {
	width:186px;
	height:136px;
	background:url(dianbg.png);
	_background:#000000;
	color:#fff;
	font-weight:bold;
	position:absolute;
	left:0;
	display:none;/*background:#000000;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;*/
}
.item img {
	border:0;
	position:absolute;
}
</style>

<script type="text/javascript">
/***需要调用JQUERY.js文件***/
$(document).ready(function(){
	var move = -15;
	var zoom = 1.2;
	$('.item').hover(function(){
		width = $('.item').width() * zoom;
		height = $('.item').height() * zoom;
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
		$(this).find('div.caption').stop(false,true).fadeIn(200);
	},function(){
		$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});	
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});
});
</script> 

<body>
<div class="proSeriest">
  <div class="proSeriestbox" style="overflow:hidden;">
    <div class="item"> <a href="#"><img src="images/01.jpg" οnmοuseοver="this.src='images/02.jpg'" οnmοuseοut="this.src='images/01.jpg'" /></a> </div>
  </div>
</div>
</body>
</html>