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

xjwolaile

浏览: 341151 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

学习
jQuery
前端技术

find each hover stop animate

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、效果图

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>

images.rar (34.1 KB)
下载次数: 11

查看图片附件

分享到：

jQuery 鼠标滑过产品图片背景高亮闪烁显示 ... | jQuery hover事件鼠标滑过图片半透明标题文 ...

2013-07-17 00:06
浏览 1907
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>