jQuery滚动广告 解决子div绝对定位与父div重叠引起的闪烁问题
这两天做了一个滚动广告栏的demo 功能有自动轮播 左右箭头移动 导航点选中图片移动效果 模仿的是新浪体育的广告
最难的问题就是子div绝对定位于父div 鼠标移入子div 系统会判定鼠标移出了父div 所以会触发子div消失的效果 消失完因为鼠标在父div中 所以又触发了子div出现的效果
这样就会导致子div一直重复消失出现 形成闪烁的效果 在网上没有找到合适的解决问题办法 我通过设定状态和js的setTimeout解决了此问题
效果如图
需要设定两个状态
var arrow = false; //判断是否进入了箭头区域
var isDiv = false;//判断是否进入了父div
附上关键代码
1 $("#content").mouseenter(function () { 2 if ($("#left").is(":animated") || $("#right").is(":animated"))//当箭头处于动画时 不执行鼠标移入事件 3 { 4 return false;//防止鼠标一直进出导致的动画累计 5 } 6 if (arrow == true) {//移入div同时移入箭头 这个条件永远不会触发 因为两个区域不会相交 7 alert("永远不触发"); 8 $("#left").fadeIn(moveTime); 9 $("#right").fadeIn(moveTime); 10 } 11 else {//移入div且不在箭头区域 正常触发 12 $("#left").fadeIn(moveTime); 13 $("#right").fadeIn(moveTime); 14 } 15 isDiv = true;//鼠标移入div状态 16 flag = false; //停止轮播 17 }); 18 $("#content").mouseleave(function () { 19 var t = setTimeout(a, 1); //晚一点执行 先执行进入箭头区域的事件 把状态改过来 手动改变事件本身的执行顺序 20 function a() { 21 if (arrow == true) {//由于先执行了箭头移入事件 箭头区域就不会消失 22 $("#left").fadeIn(moveTime); 23 $("#right").fadeIn(moveTime); 24 } 25 else {//移出div且不在箭头区域 26 $("#left").fadeOut(moveTime); 27 $("#right").fadeOut(moveTime); 28 } 29 isDiv = false; 30 } 31 flag = true; 32 }); 33 34 $("#left").mouseover(function () { 35 arrow = true; 36 flag = false; 37 $("#left").css("background-position", "-10px -65px"); 38 $("#left").css("cursor", "pointer"); 39 }); 40 $("#left").mouseout(function () { 41 $("#left").css("background-position", "-10px -5px"); 42 var t = setTimeout(a, 1);//让div的mouseover先执行 以便取到isDiv的值 43 function a() { 44 if (isDiv == false) {//移出箭头区域 且不在div中 箭头消失 45 $("#left").fadeOut(moveTime); 46 $("#right").fadeOut(moveTime); 47 } 48 } 49 arrow = false; 50 flag = true; 51 }); 52 $("#right").mouseover(function () { 53 arrow = true 54 flag = false; 55 $("#right").css("background-position", "-10px -65px"); 56 $("#right").css("cursor", "pointer"); 57 }); 58 $("#right").mouseout(function () { 59 $("#right").css("background-position", "-10px -5px"); 60 var t = setTimeout(a, 1); 61 function a() { 62 if (isDiv == false) { 63 $("#left").fadeOut(moveTime); 64 $("#right").fadeOut(moveTime); 65 } 66 } 67 arrow = false; 68 flag = true; 69 });
第一次在博客园写文章 也不知道写的好不好 凡事都有个第一次吗
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。