jquery hover鼠标悬停品牌图片旋转动画展示

jquery hover鼠标悬停品牌图片旋转动画展示

jquery hover鼠标悬停品牌图片旋转动画展示效果实现源码下载

淘建站为您提供更多_图片代码_广告_旋转_动画,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 333 次

下载资源

56 积分

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。
分类:图片代码 > 广告 难易程度:入门级

var allBrandAnimate = function(t,d){
	if(t.find('.brand b').length != 0){
		return false;
	}
	t.find('.brand a').each(function(){
		$(this).append('<b>' + $(this).find('img').attr('alt') + '</b>')
	});
	t.find('.brand a').hover(function(){
		$(this).find('img').stop().animate({'height':0,'top':'35px'},d,function(){
			$(this).hide().next().show();
			$(this).next().animate({
				'height':'70px',
				'top':'0'
			},d);
		});
	},function(){
		$(this).find('b').animate({'height':0,'top':'35px'},d,function(){
			$(this).hide().prev().show();
			$(this).prev().animate({
				'height':'70px',
				'top':'0'
			},d);
		});
	});
}
allBrandAnimate($('.allbrand'),80);
<div class="allbrand">
	<div class="brand">
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="兰芝" src="images/20121119104931.jpg" /></a>
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="丝塔芙" src="images/20121015052055.jpg" /></a>
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="高丝" src="images/20121210102224.jpg" /></a>
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="美宝莲" src="images/20121220100203.jpg" /></a>
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="水之密语" src="images/20130106112242.jpg" /></a>
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="曼秀雷敦" src="images/20121220100514.jpg" /></a>
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="JUST BB" src="images/20130106112655.jpg" /></a>
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
	</div>
	<div class="brand">
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="兰芝" src="images/20121119104931.jpg" /></a>
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="丝塔芙" src="images/20121015052055.jpg" /></a>
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="高丝" src="images/20121210102224.jpg" /></a>
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="美宝莲" src="images/20121220100203.jpg" /></a>
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="水之密语" src="images/20130106112242.jpg" /></a>
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="曼秀雷敦" src="images/20121220100514.jpg" /></a>
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="JUST BB" src="images/20130106112655.jpg" /></a>
		<a target="_blank" href="http://www.sucaiq.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
	</div>
</div>

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/1210.html
jquery hover鼠标悬停品牌图片旋转动画展示 希望对你有帮助,感谢您的支持!
  • modernizr框架制作html5 CSS3动画属性8种瀑布流...

    modernizr框架制作html5 CSS3动画属性8种瀑布流...

  • Jquery瀑布流图片无限展示源码免费下载

    Jquery瀑布流图片无限展示源码免费下载

  • modernizr html5图片预加载瀑布流布局鼠标悬停动画效果

    modernizr html5图片预加载瀑布流布局鼠标悬停动画效果

  • js淘宝kissy框架制作千百汇家居购物商城购买引导动画效果

    js淘宝kissy框架制作千百汇家居购物商城购买引导动画效果

  • jQuery css3动画分步指引插件guide分步引导页面功能...

    jQuery css3动画分步指引插件guide分步引导页面功能...

  • 回到顶部动画效果

    回到顶部动画效果

  • jquery酷炫的QQ浏览器引导页动画代码

    jquery酷炫的QQ浏览器引导页动画代码

  • html5动漫风格的引导页加载动画特效

    html5动漫风格的引导页加载动画特效

  • jquery制作创建单页动画404页面

    jquery制作创建单页动画404页面

  • html5 svg适用于手机端播放器按钮动画特效

    html5 svg适用于手机端播放器按钮动画特效

  • jQuery仿qq投票统计动画效果

    jQuery仿qq投票统计动画效果

  • jQuery开启百宝箱摇头效果

    jQuery开启百宝箱摇头效果

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2