亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

課程代碼——20170503

如果鼠標移出菜單欄，然后再進去時，顯示就會不正確了，是不是因為var leftCorner=mouseTrack[mouseTrack.length-2];計算會出錯。

代碼如下：

<script?src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
??//二進制的正負表示是在最高位，1表示負，0表示正，抑或運算是僅當對應的2位有一位為1時才返回1,反過來如果抑或運算返回的結果是0（正），則一定是2個1，或者2個0.反之，則是一個0，一個1
??function?sameSign(a,b){
????return?(a^b)>=0;
??}
??//向量的定義
??function?vector(a,b){
????return?{
??????x:b.x-a.x,//終點的坐標減去起點的坐標
??????y:b.y-a.y
????}
??}
??//向量叉乘公式
??function?vectorProduct(v1,v2){
????return?v1.x*v2.y-v2.x*v1.y
??}
??//叉乘判斷方法
??function?isPointInTrangle(p,a,b,c){//p：鼠標當前點的坐標，a:鼠標上一次的坐標，b,c：二級菜單上下邊緣坐標
????var?pa=vector(p,a);
????var?pb=vector(p,b);
????var?pc=vector(p,c);

????var?t1=vectorProduct(pa,pb);
????var?t2=vectorProduct(pb,pc);
????var?t3=vectorProduct(pc,pa);

????return?sameSign(t1,t2)&&sameSign(t2,t3);
??}

??function?needDelay(elem,leftCorner,currMousePos){//用offset方法獲取上下邊緣
????var?offset=elem.offset();

????var?topLeft={
??????x:offset.left,
??????y:offset.top
????};

????var?bottomLeft={
??????x:offset.left,
??????y:offset.top+elem.height()
????};
????return?isPointInTrangle(currMousePos,leftCorner,topLeft,bottomLeft)
??}
</script>
<script>
??$(function(){
????var?sub=$('#sub');
????var?activeRow;//選中的行
????var?activeMenu;//選中的行對應的二級菜單
????var?timer;//setTimeout返回的計時器id
????var?mouseInSub=false;//當前鼠標是否在子菜單里
????sub.on('mouseenter',function(e){
??????mouseInSub=true;
????}).on('mouseleave',function(e){
??????mouseInSub=false;
????});

????//創建數組，記錄
????var?mouseTrack=[];//數組跟蹤記錄鼠標的位置
????var?moveHandler=function(e){//鼠標離開菜單時，需要對綁定在document上的mousemove事件解綁,以免影響頁面中其他組件，所以將事件監聽函數獨立出來，方便后續解綁操作
??????mouseTrack.push({
????????x:e.pageX,
????????y:e.pageY
??????});
??????if(mouseTrack.length>3){
????????mouseTrack.shift();
??????}
????};
????$('#test')
??????.on('mouseenter',function(e){
????????//sub.removeClass('none');

????????$(document).bind('mousemove',moveHandler);//mousemove事件一般綁定在document上
??????})
??????.on('mouseleave',function(e){
????????sub.addClass('none');//鼠標移動到一級菜單時，二級菜單隱藏

????????if(activeRow){//鼠標離開一級菜單，如果存在激活的行，樣式要去掉，并把變量置空
??????????activeRow.removeClass('active');
??????????activeRow=null;
????????}
????????if(activeMenu){
??????????activeMenu.addClass('none');
??????????activeMenu=null;
????????}

????????$(document).unbind('mouseove',moveHandler);
??????})
??????.on('mouseenter','li',function(e){//一級菜單的列表項綁定事件
????????sub.removeClass('none');//鼠標移動到一級菜單時，二級菜單顯示
????????if(!activeRow){//移過去沒有激活的一級菜單
??????????activeRow=$(e.target);
??????????activeRow.addClass('active');

??????????activeMenu=$('#'+activeRow.data('id'));
??????????activeMenu.removeClass('none');
??????????return;
????????}
????????//debounce:mouseenter頻繁觸發時，只執行最后一次
????????if(timer){
??????????clearTimeout(timer);
????????}
????????console.log(mouseTrack)
????????var?currMousePos=mouseTrack[mouseTrack.length-1];
????????var?leftCorner=mouseTrack[mouseTrack.length-2];
????????var?delay=needDelay(sub,leftCorner,currMousePos);//是否需要延遲
????????if(delay){//如果在三角形內，需要延遲
??????????timer=setTimeout(function(){
????????????if(mouseInSub){
??????????????return;
????????????}
????????????activeRow.removeClass('active');
????????????activeMenu.addClass('none');

????????????activeRow=$(e.target);
????????????activeRow.addClass('active');
????????????activeMenu=$('#'+activeRow.data('id'));
????????????activeMenu.removeClass('none');
????????????timer=null;//事件觸發時，如果計時器并沒有執行，就把它清掉，這樣能保證事件觸發停止時，會執行最后一次，而其他的都會被忽略
??????????},300);
????????}else{
??????????var?prevActiveRow=activeRow;
??????????var?prevActiveMenu=activeMenu;

??????????activeRow=$(e.target);
??????????activeMenu=$('#'+activeRow.data('id'));

??????????prevActiveRow.removeClass('active');
??????????prevActiveMenu.addClass('none');//上一次二級菜單隱藏
??????????activeRow.addClass('active');
??????????activeMenu.removeClass('none');//上一次二級菜單顯示
????????}
??????});

??});
</script>


正在回答

5 回答

你好， 你90行的代碼有問題，mousemove

0 回復 有任何疑惑可以回復我~
#1

aSuncat 提問者

非常感謝！
2017-05-22 回復 有任何疑惑可以回復我~
#2

aSuncat 提問者

謝謝。
2017-05-22 回復 有任何疑惑可以回復我~

不會報錯么

0 回復 有任何疑惑可以回復我~

?非常感謝哦。。我正好非常懶得寫。。復制粘貼了。我真的非常懶啊啊啊啊啊啊啊啊啊

0 回復 有任何疑惑可以回復我~

border-right-width? !===?border-raight-width

css 第十四行

0 回復 有任何疑惑可以回復我~

html和css代碼：

??<style>
????.wrap{
??????position:relative;
??????width:200px;
??????left:50px;
??????top:50px;
????}
????ul{
??????padding:15px?0;
??????margin:9px;
??????list-style:none;
??????background:#6c6669;
??????color:#fff;
??????border-raight-width:0;
????}
????li{
??????display:block;
??????height:30px;
??????line-height:30px;
??????padding-left:12px;
??????cursor:pointer;
??????font-size:14px;
??????position:relative;
????}
????li.active{
??????background:#999395;
????}
????li?span:hover{
??????color:#c81623;
????}
????.none{
??????display:none;
????}
????#sub{
??????width:600px;
??????position:absolute;
??????border:1px?solid?#f7f7f7;
??????background:#f7f7f7;
??????box-shadow:2px?0?5px?rgba(0,0,0,.3);
??????left:200px;
??????top:0;
??????box-sizing:border-box;
??????margin:0;
??????padding:10px;
????}
????.sub_content?a{
??????font-size:12px;
??????color:#666;
??????text-decoration:none;
????}
????.sub_content?dd?a{
??????border-left:1px?solid?#e0e0e0;
??????padding:0?10px;
??????margin:4px?0;
????}
????.sub_content?dl{
??????overflow:hidden;
????}
????.sub_content?dt{
??????float:left;
??????width:70px;
??????font-weight:bold;
??????clear:left;
??????position:relative;
????}
????.sub_content?dd{
??????float:left;
??????margin-left:5px;
??????border-top:1px?solid?#eee;
??????margin-bottom:5px;
????}
????.sub_content?dt?i{
??????width:4px;
??????height:14px;
??????font:400?9px/14px?consolas;
??????position:absolute;
??????right:5px;
??????top:5px;
????}
??</style>
</head>
<body>
<div?class="wrap"?id="test">
??<ul>
????<li?data-id="a">
??????<span>家用電器</span>
????</li>
????<li?data-id="b">
??????<span>家用電器</span>
????</li>
????<li?data-id="c">
??????<span>家用電器</span>
????</li>
????<li?data-id="d">
??????<span>家用電器</span>
????</li>
????<li?data-id="e">
??????<span>家用電器</span>
????</li>
??</ul>
??<div?id="sub"?class="none">
????<div?id="a"?class="sub_content?none">
??????<dl>
????????<dt>
??????????<a?href="#">電視<i>&gt;</i></a>
????????</dt>
????????<dd>
??????????<a?href="#">合資品牌</a>
??????????<a?href="#">國產品牌</a>
??????????<a?href="#">互聯網品牌</a>
????????</dd>
??????</dl>
??????<dl>
????????<dt>
??????????<a?href="#">電視<i>&gt;</i></a>
????????</dt>
????????<dd>
??????????<a?href="#">合資品牌</a>
??????????<a?href="#">國產品牌</a>
??????????<a?href="#">互聯網品牌</a>
????????</dd>
????????<dd>
??????????<a?href="#">合資品牌</a>
??????????<a?href="#">國產品牌</a>
??????????<a?href="#">互聯網品牌</a>
????????</dd>
??????</dl>
????</div>
????<div?id="b"?class="sub_content?none">
??????<dl>
????????<dt>
??????????<a?href="#">電視<i>&gt;</i></a>
????????</dt>
????????<dd>
??????????<a?href="#">合資品牌</a>
??????????<a?href="#">國產品牌</a>
??????????<a?href="#">互聯網品牌</a>
????????</dd>
??????</dl>
????</div>
????<div?id="c"?class="sub_content?none">
??????<dl>
????????<dt>
??????????<a?href="#">電視<i>&gt;</i></a>
????????</dt>
????????<dd>
??????????<a?href="#">合資品牌</a>
??????????<a?href="#">國產品牌</a>
??????????<a?href="#">互聯網品牌</a>
????????</dd>
????????<dd>
??????????<a?href="#">合資品牌</a>
??????????<a?href="#">國產品牌</a>
??????????<a?href="#">互聯網品牌</a>
????????</dd>
??????</dl>
????</div>
????<div?id="d"?class="sub_content?none">
??????<dl>
????????<dt>
??????????<a?href="#">電視<i>&gt;</i></a>
????????</dt>
????????<dd>
??????????<a?href="#">合資品牌</a>
??????????<a?href="#">國產品牌</a>
??????????<a?href="#">互聯網品牌</a>
????????</dd>
????????<dd>
??????????<a?href="#">合資品牌</a>
??????????<a?href="#">國產品牌</a>
??????????<a?href="#">互聯網品牌</a>
????????</dd>
??????</dl>
????</div>
????<div?id="e"?class="sub_content?none">
??????<dl>
????????<dt>
??????????<a?href="#">電視<i>&gt;</i></a>
????????</dt>
????????<dd>
??????????<a?href="#">合資品牌</a>
??????????<a?href="#">合資品牌</a>
??????????<a?href="#">國產品牌</a>
??????????<a?href="#">互聯網品牌</a>
????????</dd>
????????<dd>
??????????<a?href="#">合資品牌</a>
??????????<a?href="#">國產品牌</a>
??????????<a?href="#">互聯網品牌</a>
??????????<a?href="#">互聯網品牌</a>
??????????<a?href="#">互聯網品牌</a>
????????</dd>
??????</dl>
????</div>
??</div>

</div>


1 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

課程代碼——20170503

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號