谁看见我的猫照片了
今天分享一个可自由拖得动的图片效果样式。
先看效果：
谁看见我猫的照片了？
再上源码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>@import url("https://fonts.googleapis.com/css2?family=Caveat");header {position: fixed;display: flex;align-items: center;justify-content: space-between;padding: 0 5%;width: 100%;z-index: 3;height: 7em;font-family: "Bebas Neue", sans-serif;font-size: clamp(0.66rem, 2vw, 1rem);letter-spacing: 0.5em;}a{color: black;text-decoration: none;}.Container {position: absolute;top: 50%;left: 50%;}.Picture {display: inline-block;position: absolute;top: 0;left: 0;border: 5px solid #fff;border-radius: 3px;background: #fff;box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);transform: translate(-50%, -50%);user-select: none;cursor: pointer;}.Picture-img {display: block;width: 300px;height: 300px;pointer-events: none;}.Picture-note {display: flex;align-items: center;justify-content: center;width: 300px;height: 70px;padding: 12px 24px;font-size: 1.5rem;text-align: center;}.Network {display: inline-block;padding: 0 5px;}.Network img {width: 1.5rem;aspect-ratio: 1 / 1;vertical-align: middle;}/* --------------------- *//* Other styles *//* --------------------- */* {box-sizing: border-box;}body {margin: 0;font-family: 'Caveat', serif;overflow: hidden;}</style>
</head>
<body>
<header><div>Animated Sections</div><div><a href="https://blog.csdn.net/qq_35241329?type=blog">Original By TiMi先生</a></div>
</header>
<div class="Container"><!-- last card --><div class="Picture"><img class="Picture-img" src="https://media.licdn.com/dms/image/C4D03AQHjPuY9oi3Www/profile-displayphoto-shrink_800_800/0/1579768452204?e=2147483647&v=beta&t=4ZgTgOkSEu2eKRoLWEVtgL8s2zYu80YMxI_0018U9Dk" alt="" /><div class="Picture-note"><span>@DeyJordan - <a class="Network" href="https://codepen.io/DeyJordan" target="_top"><img src="https://cdn-icons-png.flaticon.com/512/2111/2111501.png" alt="CodePen" /></a><a class="Network" href="https://twitter.com/DeyJordan" target="_top"><img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png" alt="twitter" /></a></span></div></div><!-- other cards --><div class="Picture"><img class="Picture-img" src="https://picsum.photos/id/733/400" alt="" /><div class="Picture-note"><span>Over the clouds</span></div></div><div class="Picture"><img class="Picture-img" src="https://picsum.photos/id/613/400" alt="" /><div class="Picture-note"><span>Golden Gate Bridge - San Francisco</span></div></div><div class="Picture"><img class="Picture-img" src="https://picsum.photos/id/40/400" alt="" /><div class="Picture-note"><span>Cat nose</span></div></div><div class="Picture"><img class="Picture-img" src="https://picsum.photos/id/465/400" alt="" /><div class="Picture-note"><span>Mountain</span></div></div><div class="Picture"><img class="Picture-img" src="https://picsum.photos/id/1029/400" alt="" /><div class="Picture-note"><span>Central Park - New York</span></div></div><div class="Picture"><img class="Picture-img" src="https://picsum.photos/id/923/400" alt="" /><div class="Picture-note"><span>Autumn</span></div></div><div class="Picture"><img class="Picture-img" src="https://picsum.photos/id/425/400" alt="" /><div class="Picture-note"><span>Coffee</span></div></div><div class="Picture"><img class="Picture-img" src="https://picsum.photos/id/200/400" alt="" /><div class="Picture-note"><span>An Irish cow enjoying the wind on the beach</span></div></div><div class="Picture"><img class="Picture-img" src="https://picsum.photos/id/244/400" alt="" /><div class="Picture-note"><span>pelicans at the water's edge</span></div></div><div class="Picture"><img class="Picture-img" src="https://picsum.photos/id/15/400" alt="" /><div class="Picture-note"><span>Waterfall</span></div></div>
</div>
</body>
<script>const pictures = document.querySelectorAll('.Picture');var previousTouch = undefined;function updateElementPosition(element, event) {var movementX, movementY;if (event.type === 'touchmove') {const touch = event.touches[0];movementX = previousTouch ? touch.clientX - previousTouch.clientX : 0;movementY = previousTouch ? touch.clientY - previousTouch.clientY : 0;console.log('touch', { movementX: movementX, newX: touch.clientX, oldX: previousTouch && previousTouch.clientX });previousTouch = touch;} else {movementX = event.movementX;movementY = event.movementY;}const elementY = parseInt(element.style.top || 0) + movementY;const elementX = parseInt(element.style.left|| 0) + movementX;element.style.top = elementY + "px";element.style.left = elementX + "px";}function startDrag(element, event) {const updateFunction = (event) => updateElementPosition(element, event);const stopFunction = () => stopDrag({update: updateFunction, stop: stopFunction});document.addEventListener("mousemove", updateFunction);document.addEventListener("touchmove", updateFunction);document.addEventListener("mouseup", stopFunction);document.addEventListener("touchend", stopFunction);}function stopDrag(functions) {previousTouch = undefined;document.removeEventListener("mousemove", functions.update);document.removeEventListener("touchmove", functions.update);document.removeEventListener("mouseup", functions.stop);document.removeEventListener("touchend", functions.stop);}pictures.forEach(picture => {const range = 100;const randomX = Math.random() * (range * 2) - range;const randomY = Math.random() * (range * 2) - range;const randomRotate = Math.random() * (range / 2) - range / 4;const startFunction = (event) => startDrag(picture, event);picture.style.top = `${randomY}px`;picture.style.left = `${randomX}px`;picture.style.transform = `translate(-50%, -50%) rotate(${randomRotate}deg)`;picture.addEventListener("mousedown", startFunction);picture.addEventListener("touchstart", startFunction);});
</script>
</html>