谁看见我的猫照片了
今天分享一个可自由拖得动的图片效果样式。
先看效果：
谁看见我猫的照片了？
再上源码：
<!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>
相关文章：
谁看见我的猫照片了
今天分享一个可自由拖得动的图片效果样式。 先看效果： 谁看见我猫的照片了？ 再上源码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><st…...
数据结构与算法之深度优先算法详解
深度优先算法（Depth First Search，DFS）是一种常见的图形算法，它是一种用于遍历或搜索树或图的算法。在深度优先搜索中，我们首先探索一个子树的深度，然后再回溯到父节点，接着探索另一个子树的深度…...
C# 给winfrom窗体添加皮肤控件
如何快速给C# winform添加好看的皮肤C# Winform中窗体的美化 SkinEngine的应用 皮肤控件换肤素材包，IrisSkin2.dll皮肤素材资源下载 压缩包内一共有22种皮肤素材，使用说明：把控件拖到你的form上，只需一行代码，即可实…...
数据分析真的很火吗？真的有很多企业需要这样的岗位吗？求大佬指点。
“我是去年毕业的，因为疫情影响，整个就业环境都很不好，很多企业都裁员了。加上疫情三年基本都是玩过去，也没啥一技之长，就业就更难了。听说现在做数据分析的人很多，我身边的朋友都在转行做数据分析。 其实…...
100 个 Go 错误以及如何避免：9~12
协议：CC BY-NC-SA 4.0 译者：飞龙 本文来自【OpenDocCN 饱和式翻译计划】，采用译后编辑（MTPE）流程来尽可能提升效率。 真相一旦入眼，你就再也无法视而不见。——《黑客帝国》 九、并发实践 本章涵盖 防止 …...
用户/用户组管理
用户管理 * useradd 命令添加用户，会在/etc/passwd生成用户信息，信息分为7列，被6个冒号隔开 第一列 username (login name) 第二列 密码，但是该列已经被移除，用x表示，密码信息已经存放在了/etc/shadow文…...
如何进行TCP抓包调试？
网络调试工具——Wireshark Wireshark 是世界上应用最广泛的网络协议分析器，它让我们在微观层面上看到整个网络正在发生的事情。 Wireshark 本身是一个开源项目，所以也得到了很多志愿者的支持。同时，Wireshark 具有丰富的功能集，…...
分享一个国内可用的ChatGPT网站，免费无限制，支持AI绘画 - AI 百晓生
背景 ChatGPT作为一种基于人工智能技术的自然语言处理工具，近期的热度直接沸腾🌋。 作为一个AI爱好者，翻遍了各大基于ChatGPT的网站，终于找到一个免费！免登陆！手机电脑通用！国内可直接对话的C…...
API安全性的要素与开发人员必修课测试
一、API安全性的要素主要包括以下几点： 1.身份验证和访问控制：API应该通过身份验证来验证请求的源，确保只有授权的用户或应用程序才能访问API。这可以通过使用API密钥、访问令牌、OAuth令牌或其他身份验证机制实现。 2.数据加密：A…...
leetcode 651. 4键键盘
651. 4键键盘 中等 102 company 微软 Microsoft company 谷歌 Google company 亚马逊 假设你有一个特殊的键盘包含下面的按键： A：在屏幕上打印一个 ‘A’。Ctrl-A：选中整个屏幕。Ctrl-C：复制选中区域到缓冲区。Ctrl-V：…...
Python垃圾回收机制
Python 运行过程中会不停的创建各种变量，而这些变量是需要存储在内存中的，随着程序的不断运行，变量数量越来越多，所占用的空间势必越来越大，如果对变量所占用的内存空间管理不当的话，那么肯定会出现 out of…...
Grafana插件安装并接入zabbix数据源(03)
一、在线安装插件 如果不指定插件安装位置，则默认安装位置为/var/lib/grafana/plugins；插件安装后需要重启grafana-server 安装zabbix插件alexanderzobnin-zabbix-app # grafana-cli plugins install alexanderzobnin-zabbix-app 使用--pluginsDir指定安装路径 # grafana…...
简述 JavaScript 中 prototype
简述 JavaScript 中 prototype 这篇笔记主要捋一下这么几个概念： JS 的继承构造函数new 的作用及简易实现__proto__ & prototype同样的方法，class 和 prototype 中分别是怎么实现的 基础概念 JS 是通过 prototype chaining 实现继承的语言&#…...
一觉醒来Chat gpt就被淘汰了
目录 什么是Auto GPT？ 与其他语言生成模型相比，Auto GPT具有以下优点 Auto GPT的能力 Auto GPT的能力非常强大，它可以应用于各种文本生成场景，包括但不限于以下几个方面 Auto GPT的历史 马斯克说：“ChatGPT 好得吓…...
13款JavaScript图像处理库，建议收藏备用
pica： 一个在浏览器中调整图像大小，而不会出现像素失真，处理速度非常快的图片处理库，仓库地址https://github.com/nodeca/picahtml2canvas： 强大的使用js开发的浏览器网页截图工具，仓库地址https://github.…...
uniapp m3u8格式视频加载
uniapp一：mui-player：三方 h5 web app uniapp 使用 mui-player 插件播放 m3u8/flv 视频流_翘翘红的博客-CSDN博客 uniapp 开发的h5项目，需要播放m3u8/flv后缀的视频，网上有很多视频插件，但是样式和效果不尽如人意&am…...
iOS描述文件(.mobileprovision)一键申请
iOS描述文件(.mobileprovision)一键申请 在主界面上点击描述文件按钮。 新建ios描述文件 然后点击新建，然后输入描述文件名称，描述文件名称字符和数字，自己好辨识就可以。然后选择描述文件类型，再选择bundle ID，如果…...
进行性能压力测试的原因、目的和好处
性能压力测试是指在模拟高负载、高并发情况下对软件系统进行测试，以衡量系统在实际使用过程中的性能表现。这些测试可以为生产环境中的应用程序提供关键数据，并帮助开发人员从根本上了解系统的实际性能。在本文中，我们将探讨进行性能压力测试…...
【计算机视觉】如何利用 CLIP 做简单的人脸任务？（含源代码）
文章目录 一、数据集介绍二、源代码 结果三、代码逐行解读 一、数据集介绍 CELEBA 数据集（CelebFaces Attributes Dataset）是一个大规模的人脸图像数据集，旨在用于训练和评估人脸相关的计算机视觉模型。该数据集由众多名人的脸部图像组成&a…...
基于显扬科技3D视觉相机的医疗试管分拣系统
行业现状： 医疗试管分拣是医疗行业中的一个重要环节，指将医疗实验室或生物技术研究中的试管按照一定的规则进行分拣，并对试管的类型、位置、数量等信息进行识别和管理。 随着医疗技术的不断发展和诊断治疗的精细化，医疗试管分拣…...
微信小程序的大学生心理健康测试职位推荐系统
目录同行可拿货,招校园代理 ,本人源头供货商功能模块划分系统特色功能辅助功能设计项目技术支持源码获取详细视频演示 ：文章底部获取博主联系方式！同行可合作同行可拿货,招校园代理 ,本人源头供货商 功能模块划分 心理健康测试模块 提供标准化心理量表…...
Cesium中Polylines的3种路径类型详解：直线、球面线与恒向线
Cesium中Polylines的3种路径类型详解：直线、球面线与恒向线 在三维地理可视化领域，Cesium作为领先的开源引擎，其Polylines图元功能为开发者提供了强大的路径绘制能力。今天我们将深入探讨三种核心路径类型——NONE（直线࿰…...
我用 AI 辅助开发了一系列小工具（）：文件提取工具对
从0构建WAV文件：读懂计算机文件的本质 虽然接触计算机有一段时间了，但是我的视野一直局限于一个较小的范围之内，往往只能看到于算法竞赛相关的内容，计算机各种文件在我看来十分复杂，认为构建他们并能达到目的是一件困难…...
【计量经济学学习指南】“入门” vs 进阶版，如何选择你的最佳拍档？
1. 计量经济学入门与进阶的核心差异 刚接触计量经济学时，很多人会被满屏的希腊字母和矩阵运算吓退。其实入门和进阶的核心差异，就像学做菜时"看菜谱操作"和"理解火候原理"的区别。 入门级学习的关键是快速建立直觉。比如习明明的《&…...
避坑指南：STM32G474 HRTIM配置50KHz PWM时，如何根据频率正确选择倍频系数（PrescalerRatio）
STM32G474 HRTIM配置实战：从50KHz到1MHz的PWM频率精准控制 在嵌入式系统开发中，精确的PWM控制往往是实现电机驱动、电源转换等关键功能的基础。STM32G474系列单片机搭载的高精度定时器HRTIM，以其184ps的超高时间分辨率，为开发者提…...
引言：从中心化到去中心化——互联网存储的范式革命
从HTTP到CID：地址的哲学转变 传统互联网用位置寻址：https://company.com/data/file.pdf 这个URL指向的是某个服务器上的某个路径。服务器宕机、域名过期、公司倒闭，内容就没了。而IPFS这类分布式存储用的是内容寻址：QmXoypizjW3Wk…...
Clawdbot惊艳效果：Qwen3-32B在创意写作（小说分章/剧本生成）中的连贯性展示
Clawdbot惊艳效果：Qwen3-32B在创意写作（小说分章/剧本生成）中的连贯性展示 1. 为什么创意写作特别需要“连贯性”这个能力 写小说和剧本，最难的从来不是开头那几句话，而是让故事像一条活水一样自然流淌下去。你有没有…...
如何免费解锁网盘全速下载：3步终极指南
如何免费解锁网盘全速下载：3步终极指南 【免费下载链接】baiduyun 油猴脚本 - 一个免费开源的网盘下载助手 项目地址: https://gitcode.com/gh_mirrors/ba/baiduyun 你是否曾因网盘下载速度只有100KB/s而焦急等待？明明拥有高速宽带，下…...
AirSim实战指南（3）PythonAPI环境搭建与VehicleClient核心功能解析
1. PythonAPI环境搭建全攻略 第一次接触AirSim的PythonAPI时，我花了整整两天时间才把环境配通。现在回想起来，那些报错信息其实都有明确的解决方案。咱们用Anaconda新建一个Python3.7环境（实测3.6-3.8版本兼容性最好），…...
三步轻松实现手机号码精准定位：让每一通电话都有迹可循
三步轻松实现手机号码精准定位：让每一通电话都有迹可循 【免费下载链接】location-to-phone-number This a project to search a location of a specified phone number, and locate the map to the phone number location. 项目地址: https://gitcode.com/gh_mir…...