第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

附加到光標(biāo)然后返回到原始位置

附加到光標(biāo)然后返回到原始位置

婷婷同學(xué)_ 2023-04-01 17:22:46
我試圖做到這一點(diǎn),以便在將鼠標(biāo)懸停在一個(gè) div 上時(shí),該 div 的子項(xiàng)附加到光標(biāo)上,當(dāng)您離開(kāi)該 div 時(shí),該子項(xiàng)返回到其原始位置。這是我到目前為止所擁有的:$('div').each(function() {          var img = $(this).find( "figure" );    var offset = img.offset();    var originLeft = offset.left;    var originTop = offset.top;    $('div').mousemove(function(e) {            img.addClass('active');        img.css({              transform: 'translateX(' + (e.pageX - originLeft/2 ) + 'px) translateY(' + (e.pageY - originTop) + 'px)'            });    }).mouseleave(function() {            img.removeClass('active');        img.css({              transform: 'translateX(0) translateY(0)'            });    });});div {     height: 250px;    width: 250px;    background: #eee;}div:nth-child(2) {  background: #ccc;}figure {  display: block;  height: 50px;  width: 50px;  background: blue;  margin: 0;  transition: transform 500ms ease;}.active {   transition: none; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div>    <figure></figure></div><div>    <figure></figure></div>問(wèn)題是,如果頁(yè)面上有多個(gè)事件,它就不起作用,而且 mouseleave 事件似乎有問(wèn)題:有時(shí)它需要一秒鐘或者在返回到原始位置之前有一些閃爍。
查看完整描述

2 回答

?
慕仙森

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊

使用 mouseenter 添加 mousemove 偵聽(tīng)器并在 mouseleave 中將其刪除可以解決大部分問(wèn)題。另一部分是,如果圖像離開(kāi)容器時(shí)鼠標(biāo)正下方,則鼠標(biāo)仍在 child 上方。


相對(duì)于鼠標(biāo)向圖像位置添加一些額外的偏移量有助于消除其余的錯(cuò)誤


$('div').on('mouseenter', function() {

  var img = $(this).find("figure");

  var offset = img.offset();

  var originLeft = offset.left;

  var originTop = offset.top;

  // only listen to move on this instance

  $(this).mousemove(function(e) {

    img.addClass('active').css({

      transform: 'translateX(' + (e.pageX - originLeft / 2) + 'px) translateY(' + (e.pageY+10  - originTop) + 'px)'

    });

  })


}).on('mouseleave', function() {

  // remove the mousemove listener

  $(this).off('mousemove').find("figure").removeClass('active').css({

    transform: 'translateX(0) translateY(0)'

  });

});

div {

  height: 150px;

  width: 150px;

  background: #eee;

  margin-bottom: 30px

}


div:nth-child(2) {

  background: #ccc;

}


figure {

  display: block;

  height: 50px;

  width: 50px;

  background: blue;

  margin: 0;

  transition: transform 500ms ease;

}


.active {

  transition: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>

  <figure></figure>

</div>



<div>

  <figure></figure>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-04-01
?
炎炎設(shè)計(jì)

TA貢獻(xiàn)1808條經(jīng)驗(yàn) 獲得超4個(gè)贊

您的問(wèn)題在這一行:


$('div').mousemove(function(e) {

將其更改為:


$(this).on('mousemove', function(e) {

那是因?yàn)槟枰鉀Q每個(gè)循環(huán)中您所在的當(dāng)前 div 元素:


$('div').each(function() {

片段:


$('div').each(function() {

  var img = $(this).find( "figure" );

  var offset = img.offset();

  var originLeft = offset.left;

  var originTop = offset.top;

  $(this).on('mousemove', function(e) {

      img.addClass('active');

      img.css({

          transform: 'translateX(' + (e.pageX - originLeft/2 ) + 'px) translateY(' + (e.pageY - originTop) + 'px)'

      });

  }).on('mouseout', function(e) {

      img.removeClass('active');

      img.css({

          transform: 'translateX(0) translateY(0)'

      });

  });

});

div {

    height: 250px;

    width: 250px;

    background: #eee;

}


div:nth-child(2) {

    background: #ccc;

}


figure {

    display: block;

    height: 50px;

    width: 50px;

    background: blue;

    margin: 0;

    transition: transform 500ms ease;

}

.active {

    transition: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div>

    <figure></figure>

</div>



<div>

    <figure></figure>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-04-01
  • 2 回答
  • 0 關(guān)注
  • 395 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)