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

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

光標(biāo)應(yīng)位于 .click() 上圖像的中心

光標(biāo)應(yīng)位于 .click() 上圖像的中心

慕絲7291255 2023-08-18 17:03:05
我正在舉這個小例子,我試圖將圖像置于光標(biāo)的中心,基本上,當(dāng)您單擊時,光標(biāo)應(yīng)該位于圖像的中心。由于我是初學(xué)者,我真的不知道如何才能實現(xiàn)這一目標(biāo)。也許是通過使用類似的東西$(".theImg").height,但我認(rèn)為我做錯了,因為它不起作用。也許我必須使用transform...$(document.body).click(function(event) {        x = event.pageX;        y = event.pageY;        console.log(x +", "+ y);        console.log(('theImg').height);        $(".paysage") .css({'position' : 'absolute', 'top': y, 'left' : x})                      .prepend($('<img>',{  class:'theImg',                                            src:'https://www.30millionsdamis.fr/uploads/pics/conseils-erreurs-chat-1171.jpg'}))         $(".theImg").prev().remove();                     });body{  width: 100vw;  height: 100vh}.theImg{  width :20em;  height: auto;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class = "paysage"> </div>
查看完整描述

1 回答

?
慕慕森

TA貢獻(xiàn)1856條經(jīng)驗 獲得超17個贊

使用transformcss 屬性img

transform:?translate(-50%,?-50%)

$(document.body).click(function(event) {

? x = event.pageX;

? y = event.pageY;

? console.log(x + ", " + y);

? console.log(('theImg').height);


? $(".paysage").css({

? ? ? 'position': 'absolute',

? ? ? 'top': y,

? ? ? 'left': x

? ? })

? ? .prepend($('<img>', {

? ? ? class: 'theImg',

? ? ? src: 'https://www.30millionsdamis.fr/uploads/pics/conseils-erreurs-chat-1171.jpg'

? ? }))


? $(".theImg").prev().remove();

});

body {

? width: 100vw;

? height: 100vh

}


.theImg {

? width: 20em;

? height: auto;

? transform: translate(-50%, -50%)

}

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


<div class="paysage"></div>


查看完整回答
反對 回復(fù) 2023-08-18
?
瀟湘沐

TA貢獻(xiàn)1816條經(jīng)驗 獲得超6個贊

將此帶有規(guī)則的選擇器添加到您的 css 中:


.paysage {

  transform: translate(-50%, -50%);

}

有必要嗎?


$(document.body).click(function(event) {

        x = event.pageX;

        y = event.pageY;

        console.log(x +", "+ y);

        console.log(('theImg').height);


        $(".paysage") .css({'position' : 'absolute', 'top': y, 'left' : x})

                      .prepend($('<img>',{  class:'theImg',

                                            src:'https://www.30millionsdamis.fr/uploads/pics/conseils-erreurs-chat-1171.jpg'})) 

        $(".theImg").prev().remove();       

              

});

body{

  width: 100vw;

  height: 100vh

}


.theImg{

  width :20em;

  height: auto;

}


.paysage {

  transform: translate(-50%, -50%);

}

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

<div class = "paysage"> </div>


查看完整回答
反對 回復(fù) 2023-08-18
  • 1 回答
  • 0 關(guān)注
  • 150 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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