jquery鼠标移入图片翻转显示文字效果

原创 Dale111 随笔 jquery 690阅读 2017-06-27 10:44:18 举报

<div style="width:720px;margin:0 auto;">

<!--水平翻转-->
<div id="vertical" class="brand vertical">
<a target="_blank" href="#"><img alt="" src="images/1.jpg" /><div class="info">这是一段文字</div></a>
<a target="_blank" href="#"><img lta="" src="images/2.jpg" /><div class="info">这是一段文字</div></a>
<a target="_blank" href="#"><img alt="" src="images/3.jpg" /><div class="info">这是一段文字</div></a>
</div>

<div style="clear:both;"></div>

<!--垂直翻转-->
<div id="horizontal" class="brand horizontal">
<a target="_blank" href="#"><img alt="" src="images/1.jpg" /><div class="info">这是一段文字</div></a>
<a target="_blank" href="#"><img alt="" src="images/2.jpg" /><div class="info">这是一段文字</div></a>
<a target="_blank" href="#"><img alt="" src="images/3.jpg" /><div class="info">这是一段文字</div></a>
</div>

</div>

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//品牌翻转
var turn = function(target,time,opts){
target.find('a').hover(function(){
$(this).find('img').stop().animate(opts[0],time,function(){
$(this).hide().next().show();
$(this).next().animate(opts[1],time);
});
},function(){
$(this).find('.info').animate(opts[0],time,function(){
$(this).hide().prev().show();
$(this).prev().animate(opts[1],time);
});
});
}
var verticalOpts = [{'width':0},{'width':'180px'}];
turn($('#vertical'),100,verticalOpts);
var horizontalOpts = [{'height':0,'top':'120px'},{'height':'240px','top':0}];
turn($('#horizontal'),100,horizontalOpts);
</script>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复