HTML5学堂(码匠):在前端开发中,针对效果层面的开发,使用原生JS往往会因其冗长的代码严重影响到开发进度。比如一个简单的图片翻转效果,我们能否考虑借助某些简单方便的操作来替代原生JS的使用呢?
如上效果,当用户将鼠标移入到每一张图片上,当前的图片会有一个翻转消失的效果,同时有一个图片描述信息的面板会翻转出现。而当鼠标移出图片时,原有的图片会翻转出现,面板信息会翻转消失。针对这样一个简单的效果描述,大家有没有自己的实现方法?
由于需要的功能是随着鼠标移入图片与信息都需要翻转,所以在同一个位置要存在两个标签并发生相应的变化,可以考虑使用定位来实现。
在本文中,采用的是图片img与信息em都参照外层a标签的定位方式,然后再进行相应的样式变化。
首先使用JS实现动态添加翻转后展示的信息面板;
然后借助jQuery的hover方法,实现鼠标移入移出的功能;
最后针对不同的翻转变化,让图片与信息面板发生相反的效果展示。
在鼠标移入相应的图片时,需要让图片可以翻转消失,同时有一个信息面板可以翻转出现。
但是在结构的书写中并没有提供面板信息的标签,所以就需要使用JS动态的添加了一个em标签,借助append方法把相应的标签添加到了对应的img标签的后面。如下图所示:
除了添加标签以外,还把当前图片的alt属性中替代性文本填充成了标签的内容,其范例代码:
// 对每个a标签内部动态添加一个em标签,并使其内容为img的alt属性内容
label.find('.brand a').each(function() {
$(this).append('<em>' + $(this).find('img').attr('alt') + '</em>');
});
实现图片的翻转是借助了jQuery中的hover方法,此方法携带了两个函数,写法如下:
label.find('.brand a').hover(function() {}, function() {});
其中第一个函数表示的是鼠标移入发生的事情;第二个函数表示的是鼠标移出发生的事情。
图片的翻转主要就是在第一个函数中进行书写,通过对外层的a标签绑定hover事件,然后变化其内部img的高度值与定位值,同时使用动画方式show()使得img后面的em标签出现。
代码范例如下:
// 鼠标移入img标签动画变小
$(this).find('img').stop().animate({
'height': 0,
'top': '35px'
}, 200, function() {
// em标签出现
$(this).hide().next().show();
// em标签动画变大
$(this).next().animate({
'height': '70px',
'top': 0
}, 200);
});
实现信息面板的翻转出现主要是hover事件中第二个函数的功能,该函数主要处理的是让鼠标在移出时,em标签变小,原来的img标签要恢复到原本的初始状态。
相应代码如下:
// 鼠标移出em标签动画变小
$(this).find('em').animate({
'height': 0,
'top': '35px'
}, 200, function() {
// img标签出现
$(this).hide().prev().show();
// img动画变大
$(this).prev().animate({
'height': '70px',
'top': '0'
}, 200);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery hover鼠标悬停图片旋转动画展示</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<style type="text/css">
.allbrand .brand {
overflow: hidden;
width: 390px;
height: 225px;
margin: 40px auto 0;
}
.allbrand .brand a {
position: relative;
float: left;
width: 120px;
height: 70px;
margin: 0 6px 5px 0;
color: #fff;
font-size: 14px;
line-height: 70px;
text-align: center;
}
.allbrand .brand a img {
position: absolute;
left: 10px;
width: 118px;
height: 68px;
border: 1px solid #e9e8e8;
}
.allbrand .brand a em {
overflow: hidden;
display: none;
position: absolute;
top: 36px;
left: 10px;
width: 118px;
height: 0;
border: 1px solid #e9e8e8;
background: #999;
opacity: 0.5;
cursor: pointer;
}
</style>
</head>
<body>
<div class="allbrand">
<div class="brand">
<a href=""><img alt="兔子" src="http://img.h5course.cn/codepen/2017.01.05.01.jpg" /></a>
<a href=""><img alt="鹦鹉" src="http://img.h5course.cn/codepen/2017.01.05.02.jpg" /></a>
<a href=""><img alt="萌熊" src="http://img.h5course.cn/codepen/2017.01.05.03.jpg" /></a>
<a href=""><img alt="蝴蝶" src="http://img.h5course.cn/codepen/2017.01.05.04.jpg" /></a>
<a href=""><img alt="HTML5学堂(码匠)" src="http://img.h5course.cn/codepen/2017.01.05.05.jpg" /></a>
<a href=""><img alt="狗狗" src="http://img.h5course.cn/codepen/2017.01.05.06.jpg" /></a>
<a href=""><img alt="树蛙" src="http://img.h5course.cn/codepen/2017.01.05.07.jpg" /></a>
<a href=""><img alt="蜂鸟" src="http://img.h5course.cn/codepen/2017.01.05.08.jpg" /></a>
<a href=""><img alt="灰鸭子" src="http://img.h5course.cn/codepen/2017.01.05.09.jpg" /></a>
</div>
</div>
<script type="text/javascript">
//翻转
function brandAnimate(label) {
if(label.find('.brand em').length != 0) {
return false;
}
// 对每个a标签内部动态添加一个em标签,并使其内容为img的alt属性内容
label.find('.brand a').each(function() {
$(this).append('<em>' + $(this).find('img').attr('alt') + '</em>');
});
label.find('.brand a').hover(function() {
// 鼠标移入img标签动画变小
$(this).find('img').stop().animate({
'height': 0,
'top': '35px'
}, 200, function() {
// em标签出现
$(this).hide().next().show();
// em标签动画变大
$(this).next().animate({
'height': '70px',
'top': 0
}, 200);
});
}, function() {
// 鼠标移出em标签动画变小
$(this).find('em').animate({
'height': 0,
'top': '35px'
}, 200, function() {
// img标签出现
$(this).hide().prev().show();
// img动画变大
$(this).prev().animate({
'height': '70px',
'top': '0'
}, 200);
});
});
}
brandAnimate($('.allbrand'));
</script>
</body>
</html>
图片翻转效果使用jQuery的hover方法即可简单的实现出来。当然除此之外,也还可以借助CSS3的一些方法来进行实现,大家在学习完此方法之后不妨也去使用CSS3试试。