jQuery hover鼠标悬停品牌图片旋转动画展示-20130716

程序员文章站 2022-07-12 21:35:48

...

1、效果及功能说明

hover鼠标悬停图片特效，品牌图片列表通过鼠标滑过品牌图片旋转动画展示，鼠标离开品牌图片旋转回来

2、实现原理

利用图片上下开始减少px知道变成一条直线后，让黑色背景的第二章图片通过动画效果从最下面出现后来把原本第一条直线替代成第二章图片的黑线在增加黑线的上下px，和现在白色的字体给用户带来旋转的效果

主要的方法

$(this).find('img').stop().animate({'height':0,'top':'35px'},d,function()
//就是让原本图变成一条居中的直线
$(this).find('b').animate({'height':0,'top':'35px'},d,function()
//就是让第二章背景黑色图片变成一条直线

3、效果图

jQuery hover鼠标悬停品牌图片旋转动画展示-20130716

博客分类：学习jQuery前端技术 findeachhoverstopanimate

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* allbrand */
.allbrand .brand{width:390px;height:225px;overflow:hidden;margin:40px auto 0 auto;}
.allbrand .brand a{display:inline;position:relative;float:left;width:120px;height:70px;line-height:70px;text-align:center;color:#fff;font-size:14px;margin:0 6px 5px 0;}
.allbrand .brand a img{position:absolute;left:10px;width:118px;height:68px;border:1px solid #e9e8e8;}
.allbrand .brand a b{display:none;position:absolute;top:36px;left:10px;width:118px;height:0;background:#000;border:1px solid #e9e8e8;cursor:pointer;overflow:hidden;}
</style>

<div class="allbrand">
	<div class="brand">
		<a target="_blank" href="http://www.17sucai.com/"><img alt="兰芝" src="images/20121119104931.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="丝塔芙" src="images/20121015052055.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="高丝" src="images/20121210102224.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="美宝莲" src="images/20121220100203.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="水之密语" src="images/20130106112242.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="曼秀雷敦" src="images/20121220100514.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="JUST BB" src="images/20130106112655.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
	</div>
	<div class="brand">
		<a target="_blank" href="http://www.17sucai.com/"><img alt="兰芝" src="images/20121119104931.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="丝塔芙" src="images/20121015052055.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="高丝" src="images/20121210102224.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="美宝莲" src="images/20121220100203.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="水之密语" src="images/20130106112242.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="曼秀雷敦" src="images/20121220100514.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="JUST BB" src="images/20130106112655.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
	</div>
</div>
	

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
//品牌翻转
var allBrandAnimate = function(t,d){
//通过参数定义方法
	if(t.find('.brand b').length != 0){
	//如果t调用遍历选择brand类里的b标签的长度不等0
		return false;
		//就返回false
	}
	t.find('.brand a').each(function(){
	//t调用遍历选择brand里面的a标签调用遍历定义方法
		$(this).append('<b>' + $(this).find('img').attr('alt') + '</b>')
		//在尾部插入b标签就是在黑底上显示出来的白色字体
	});
	t.find('.brand a').hover(function(){
	//定义一个伪类方法
		$(this).find('img').stop().animate({'height':0,'top':'35px'},d,function(){
//定义遍历获得img所有元素调用停止动画方法后在调用一个动画效果让黑色的背景颜色出现背景从下到上
			$(this).hide().next().show();
			//定义当鼠标触及图片后第一张图片开始消失效果
			$(this).next().animate({
			//定义当鼠标触及在第一张图片上效果
				'height':'70px',
				//的长度还是70px
				'top':'0'
				//高度变成0
			},d);
			//里面含有黑色背景出来的时间
		});
	},function(){
	//定义方法
		$(this).find('b').animate({'height':0,'top':'35px'},d,function(){
		//当鼠标离开已经出来的黑色背景图片后背景开始效果
			$(this).hide().prev().show();
			//定义黑色背景消失到一条直线，直线在中间
			$(this).prev().animate({
			//定义黑色背景效果的动画
				'height':'70px',
				//宽度不变
				'top':'0'
				//高度为0
			},d);
			//黑色背景消失的时间
		});
	});
}
allBrandAnimate($('.allbrand'),80);
//定于原图片出现的方法和时间
</script>

</body>
</html>