目录
1.高亮显示
2.王者荣耀风琴
1.高亮显示
- 利用透明度修改,突出选中的图片
- 鼠标进入的时候,其他的li标签透明度:0.5
- 鼠标离开,其他li 透明度改为 1
- 关键利用fadeTo修改透明度
效果展示
实现代码
javascript"><script src="jquery.min.js"></script>
<script>
$(function() {
//鼠标进入的时候,其他的li标签透明度:0.5
$(".wrap li").hover(function() {
$(this).siblings().stop().fadeTo(400, 0.5);
}, function() {
// 鼠标离开,其他li 透明度改为 1
$(this).siblings().stop().fadeTo(400, 1);
})
});
</script>
2.王者荣耀风琴
利用淡出淡入实现风琴案例
鼠标经过某个li有两步操作
1.当前li宽度变为224px同时小图片淡出大图片淡入
2.其余兄弟li宽度变为69px小图片淡入大图片淡出
注意:
为了保证页面不溢出效果好不多次动画同时展现需要使用stop()方法。
实现效果
实现代码
javascript"><script src="jquery.min.js"></script>
<script>
$(function(){
//鼠标经过某个li有两部操作
$(".king li").mouseenter(function(){
//1.当前li宽度变为224px同时小图片淡出大图片淡入
$(this).stop().animate({
width:224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
//2.其余兄弟li宽度变为69px小图片淡入大图片淡出
$(this).siblings("li").stop().animate({
width:69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
})
</script>