双击时如何将壁纸更改为缩略图上的图像？-解网

问：

我一直在修改图片库和可拖动的图标，我想在双击时将背景图像更改为拇指上的图像。怎么做呢？我重写了这个html，以使用来自DeviantArt的图像在stack的编译器中工作，URL很长而且乱码，否则HTML，CSS非常简单。我尝试了几种向、和标签添加背景的方法，并尝试使用纯 html 方法，直接在标签上使用 onclick 属性。<HTML><DIV><BODY><image>

<link charset="UTF-8">
<style>

body {

background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/6d2bd846-3511-48fd-ae5b-8d3b0a644f43/d38k6a9-b1ae0241-cb89-4271-bdc5-d651c2bedc67.png/v1/fill/w_450,h_250,q_80,strp/ryu_streetfighter_v2_by_shad0wfall_d38k6a9-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjUwIiwicGF0aCI6IlwvZlwvNmQyYmQ4NDYtMzUxMS00OGZkLWFlNWItOGQzYjBhNjQ0ZjQzXC9kMzhrNmE5LWIxYWUwMjQxLWNiODktNDI3MS1iZGM1LWQ2NTFjMmJlZGM2Ny5wbmciLCJ3aWR0aCI6Ijw9NDUwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.Tmrhile8PClUVQ9xV-QNycX2WaAEdveHAZLw-VMN-Eg');

background-size: cover;
background-repeat: no-repeat;
z-index:-1;
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
}

.nohigh {
position:absolute;
left:40%;
top:40%;
}

#mydiv {
height:100;
width:200;
-webkit-box-shadow:4px 4px rgba(0,0,0,.8);
-webkit-border-radius:10%;
border:1px solid black;
}

image {
height:*;
width:*;
}

#mydiv:hover {
scale:1.2;
border:1px solid black;
cursor:move;
cursor:grab;
cursor:-moz-grab;
cursor:-webkit-grab;
}

#mydivheader {
cursor:move;
color:#fff;
}

</style>
<body>

<image id="mydiv" class="nohigh" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/99fd58bb-e6ab-4252-a818-dd862610a961/da6mwno-08329547-6321-4262-b7f1-2efbb92016d5.jpg/v1/fill/w_1475,h_542,q_70,strp/fighting_game_powerhouse_tribute_by_themikko_da6mwno-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NTg4IiwicGF0aCI6IlwvZlwvOTlmZDU4YmItZTZhYi00MjUyLWE4MTgtZGQ4NjI2MTBhOTYxXC9kYTZtd25vLTA4MzI5NTQ3LTYzMjEtNDI2Mi1iN2YxLTJlZmJiOTIwMTZkNS5qcGciLCJ3aWR0aCI6Ijw9MTYwMCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.sqM9XMpBInM4B2tXQ9l861njq3SG6wWZLfTpWUwZ_ww">

<image id="mydiv" class="nohigh" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/700fc7af-b991-4fd5-b7b8-ce3cb9a3f733/dd4xdus-eb3fc6d0-f2b2-48eb-a8cf-ac91acd16a04.jpg/v1/fill/w_525,h_350,q_70,strp/street_fighter__i_got_next_by_jeffach_dd4xdus-350t.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9OTMzIiwicGF0aCI6IlwvZlwvNzAwZmM3YWYtYjk5MS00ZmQ1LWI3YjgtY2UzY2I5YTNmNzMzXC9kZDR4ZHVzLWViM2ZjNmQwLWYyYjItNDhlYi1hOGNmLWFjOTFhY2QxNmEwNC5qcGciLCJ3aWR0aCI6Ijw9MTQwMCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.oqEUN4v88WH5RIuWYK8pEfWb4k0tfSzNVqdwe80cLz0">

<image id="mydiv" class="nohigh" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/04450d3b-c999-48a7-a4a4-51ed18e3b01b/d664093-56d95fe4-d8b1-4a55-aa44-96de312cbab4.jpg/v1/fill/w_600,h_212,q_75,strp/street_fighter_sig__chun_li_and_cammy_by_bebekimichi_d664093-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjEyIiwicGF0aCI6IlwvZlwvMDQ0NTBkM2ItYzk5OS00OGE3LWE0YTQtNTFlZDE4ZTNiMDFiXC9kNjY0MDkzLTU2ZDk1ZmU0LWQ4YjEtNGE1NS1hYTQ0LTk2ZGUzMTJjYmFiNC5qcGciLCJ3aWR0aCI6Ijw9NjAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.INYOtFBIZa47UOimAyrfHmP5U58T5MeulEAFbAqQqlI">

<image id="mydiv" class="nohigh" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9a6e1df4-2581-4aff-9e0e-1f67d8981f84/d5mos1w-6b2b0f7b-b24b-4723-bbd7-daeec47c26cf.jpg/v1/fill/w_623,h_350,q_70,strp/street_fighter_x_king_of_fighters_wallpaper_ver_a__by_the_red_jack03_d5mos1w-350t.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzY4IiwicGF0aCI6IlwvZlwvOWE2ZTFkZjQtMjU4MS00YWZmLTllMGUtMWY2N2Q4OTgxZjg0XC9kNW1vczF3LTZiMmIwZjdiLWIyNGItNDcyMy1iYmQ3LWRhZWVjNDdjMjZjZi5qcGciLCJ3aWR0aCI6Ijw9MTM2NiJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.eqN8ehHe1dp6m6thBqbdQ-lz9SKI7JAMfxnXLx8ozlo">

<image id="mydiv" class="nohigh" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/95ae03fd-2eb2-4f85-a5d3-a3446ff4c71a/dcgjcui-fe61a22c-254c-48f6-8db1-4aa6cd76d013.jpg/v1/fill/w_444,h_250,q_70,strp/ibuki_vs__valentine_by_omnicidalclown1992_dcgjcui-250t.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NTc3IiwicGF0aCI6IlwvZlwvOTVhZTAzZmQtMmViMi00Zjg1LWE1ZDMtYTM0NDZmZjRjNzFhXC9kY2dqY3VpLWZlNjFhMjJjLTI1NGMtNDhmNi04ZGIxLTRhYTZjZDc2ZDAxMy5qcGciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19._k0CKXukppf95qAqn1pR5qrryIhP7donb0rhDPrZd84">

<image id="mydiv" class="nohigh" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a9207c92-cc1a-41d2-86fe-f37407751cd9/dfktomv-e44a48ad-b6ae-4c0b-abdf-d1239481232b.png/v1/fill/w_622,h_350,q_70,strp/cammy_white_chun_li_street_fighter_by_yuiofire_by_ayrton31_dfktomv-350t.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzIxIiwicGF0aCI6IlwvZlwvYTkyMDdjOTItY2MxYS00MWQyLTg2ZmUtZjM3NDA3NzUxY2Q5XC9kZmt0b212LWU0NGE0OGFkLWI2YWUtNGMwYi1hYmRmLWQxMjM5NDgxMjMyYi5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.-h4kHCMFvoZjPI9SJ48qA8fg-aT23_YmmOtdZimY9PE">

</body>

<script>
<!-- Darg Icons to a Location -->
document.addEventListener("mousedown",mouseDown);
function mouseDown(info) {
    var elmnt
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    if (info.target.id == "mydiv") {
    elmnt = info.target
    dragMouseDown()
    }
    function dragMouseDown(e) {
    console.log(e)
    e = e || window.event;

    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
    }
    function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();

    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }
    function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
    }
}
</script>
</body>

javascript html css 图标 image-gallery

0赞 David Thomas 9/15/2023

Using an event-handler is still using JavaScript, but it's doing so in a relatively outdated way; you'd be better off looking at EventTarget.addEventListener() instead. Every in the document must be unique, otherwise errors are encountered, and JavaScript tends to have trouble since any should occur only once (at most).onclickidid

0赞 David Thomas 9/15/2023

...Further, the <image> element is deprecated, and should not be used; instead you should probably use the <img> element, or - maybe - the <picture> element.

0赞 Jedininja28 9/15/2023

I had settled on <image> as the container <div> need when using <img> did a lot of wired stuff in conjunction with the drag script. also those changes completely botched this script.

答： 暂无答案

上一个：为什么当我在 jetpack compose 中将参数作为参数传递到另一个屏幕时，我的 imageUri 会发生变化？

下一个：我可以在平铺图像部分中移动图像位置吗？

双击时如何将壁纸更改为缩略图上的图像？

How to change wallpaper to the image on the thumbnail when Double-clicked?

评论