描述:
1.图片自动轮换
2.当鼠标放到菜单上时,菜单向上升起,同时显示相对应的图片
3.鼠标离开菜单,图片继续自动轮换
效果图:
说明:
菜单卡片绝对定位在大容器底部, 卡片下部分.bd元素通过高度的变化达到菜单升起降落的效果.
使用了JQuery1.3
HTML:
CSS:
JS:
问题及解决方法:
1.写菜单的升降时遇到冒泡问题,使用 cancalBubble = true及event.stopPropagation()都不得解?
GOOGLE后发现使用mouseenter代替mouseover;用mouseleave代替mouseout后正常;
最后发现使用JQ中的hover,问题得解(救星啊!);
2.菜单多次滑动后出现图片空白,暂停不动的情况
发现原因:
原来写法: $("#aimg" + n).siblings().fadeOut("slow", function(){$("#aimg" + n).fadeIn("fast"); }); //这段调用fadeIn()方法两次(两个兄弟结点)...
修改为: $("#aimg" + n).siblings().fadeOut("slow");
$("#aimg" + n).fadeIn("fast");
正常
3.菜单滑动反应灵敏, 鼠标快速反复滑过,然后离开,菜单条依然多次滑动
这个是常见问题,改为使用setTimeout函数,如果在指定时间内鼠标离开,就clearTimeout,菜单不做反应.