html+js+css实现拖拽式便签留言

前些日子在网上冲浪时,看到一个便签式留言墙,让人耳目一新。心想这个看着不错,额想要。于是便开始搜寻是否有相应开源插件,想将其引入自己的博客中。但是搜寻了一圈,都没有符合预期的,要么功能不符合。有的功能符合,样式差强人意。我想两者结合一下就好了~于是乎,我开始自己动手,先整理一个独立的html留言版页面来试试效果。

1.便签效果图

功夫不负有心人,最终实现效果如图:

 怎么样,是不是一眼就喜欢上了,纯js版出来了,后面要引入到博客中也简单了。最近lz一直在建设自己的博客,也了解了一些开源的博客框架,诸如Hexo、WordPress、VuePress、Hugo、Solo、Halo。

        lz用的博客用的typecho框架,选择的主题是jasmine,这个主题是比较朴素的,功能很少,很干净。这正是lz所看重的,同时也是遗憾的点,太过于简洁以致于百废待兴。要“装饰”的地方很多,不过这种一点点从无到有的感觉也挺让人充满成就感的。因此最近一直在“装饰”博客。后面有时间lz会整理一个关于博客装修的系列博文说明。

2.单html源码

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>#messagewall {margin: 0 auto;width: 960px;background: url(https://ktcry.cn/blog/messbg.png);background-size: cover;height: 627px;position: relative;}#messagewall .tip1, #messagewall .tip2, #messagewall .tip3, #messagewall .tip4, #messagewall .tip5, #messagewall .tip6, #messagewall .tip7, #messagewall .tip8 {position: absolute;width: 227px;left: 200px;top: 100px;background: rgb(187, 78, 117);box-shadow: 0 2px 10px 1px rgba(0,0,0,0.2);opacity: 0.88;border-radius: 400px 20px 30px 30px / 40px 400px 500px 300px;}#messagewall .tip1 .tip_h, #messagewall .tip2 .tip_h, #messagewall .tip3 .tip_h, #messagewall .tip4 .tip_h, #messagewall .tip5 .tip_h, #messagewall .tip6 .tip_h, #messagewall .tip7 .tip_h, #messagewall .tip8 .tip_h {width: 207px;padding: 10px 10px 5px;height: 23px;text-align: left;cursor: move;color: #fff;border-bottom: 1px dashed rgba(255,255,255,0.85);font-size: 15px;}#messagewall .tip1 .tip_c, #messagewall .tip2 .tip_c, #messagewall .tip3 .tip_c, #messagewall .tip4 .tip_c, #messagewall .tip5 .tip_c, #messagewall .tip6 .tip_c, #messagewall .tip7 .tip_c, #messagewall .tip8 .tip_c {width: 200px;padding-top: 20px;padding-left: 15px;padding-right: 15px;min-height: 40px;color: #fff;font-size: 14px;text-align: left;line-height: 20px;max-height: 160px;word-wrap: break-word;word-break: break-all;overflow: hidden;}#messagewall .tip1 .tip_f, #messagewall .tip2 .tip_f, #messagewall .tip3 .tip_f, #messagewall .tip4 .tip_f, #messagewall .tip5 .tip_f, #messagewall .tip6 .tip_f, #messagewall .tip7 .tip_f, #messagewall .tip8 .tip_f {width: 227px;height: 53px;padding-top: 20px;}.clr {clear: both;overflow: auto;display: block;height: 0px;}#messagewall .icon {float: left;width: 35px;padding-left: 15px;height: 35px;text-align: center;}#messagewall .name {float: right;padding-right: 15px;text-align: right;font-size: 14px;line-height: 35px;color: #C0F;}#messagewall .num {float: left;padding-left: 7px;width: 195px;}</style>
</head>
<body><p style="text-align: center;"><strong><span style="font-size: 20px;">为你停留,因你回首</span></strong></p><p style="text-align: center;">你站在桥上看风景,看风景的人却在楼上看你。 明月装饰了你的房子,你装饰了我的梦。</p><!--纸条墙--><div id="messagewall"></div><!-- 悬浮播放器:https://musicplayer.xfyun.club/ --><div id="xf-MusicPlayer" data-cdnName="https://player.xfyun.club/js"  data-memory="1"></div><script src="https://player.xfyun.club/js/xf-MusicPlayer/js/xf-MusicPlayer.min.js"></script><script src="https://player.xfyun.club/js/yinghua.js"></script>
<script>//模拟数据库,获取信息var messages = [{"id":1,"name":"mahu","content":"今天你拿苹果支付了么","time":"2024-06-17"},{"id":2,"name":"haha","content":"今天天气不错,风和日丽的","time":"2024-06-18"},{"id":3,"name":"jjjj","content":"常要说的事儿是乐生于苦","time":"2016-03-18"},{"id":4,"name":"9.8的妹纸","content":"把朋友家厕所拉堵了 不敢出去 掏了半小时了都","time":"2016-03-18"},{"id":5,"name":"雷锋ii.","content":"元宵节快乐","time":"2024-06-22"},{"id":6,"name":"哎呦哥哥.","content":"据说今晚央视的元宵晚会导演和春晚导演是同一个人,真是躲得过初一,躲不过十五。","time":"2024-06-22"},{"id":7,"name":"没猴哥,不春晚","content":"班主任:“小明,你都十二岁了,还是三年级,不觉得羞愧吗”?。小明:“一点也不觉得,老师你都四十多岁了,不也是年年在三年级混日子吗?羞愧的应该是你”。老师:……","time":"2024-06-22"},{"id":8,"name":"哎呦杰杰.","content":"真搞不懂你们地球人,月亮有什么好看的,全是坑,还是对面那哥们好看,","time":"2024-06-22"},{"id":9,"name":"哎呦哎呦","content":"今天哪里的烟花最好看!!?答:朋友圈。。。","time":"2024-06-22"}];//需求1:模拟数据库获取信息,然后在页面上生成数组的长度个tip,然后分别问起内容进行修改。//需求2:点击内容,提高层级;点击关闭按钮,删除tip标签;双击顶部,删除标签.....//需求1:模拟数据库获取信息,然后在页面上生成数组的长度个tip,然后分别问起内容进行修改。//步骤://获取相关元素var content = document.getElementById("messagewall");var containerWidth = content.offsetWidth;  //获取容器位置,限制便签生成位置在容器内var containerHeight = content.offsetHeight;//循环生成div标签,然后为innerHTML属性添加内容for(var i=0;i<messages.length;i++){//生成新标签var newDiv = document.createElement("div");//绑定类名和IDnewDiv.className = "tip1 draggable";newDiv.id = "tip"+messages[i].id;//改变位置var topValue = parseInt(Math.random()*(containerHeight-250));var leftValue = parseInt(Math.random()*(containerWidth-250));newDiv.style.top = topValue+"px";newDiv.style.left = leftValue+"px";//赋值内容newDiv.innerHTML = '<div class="tip_h" title="双击关闭纸条">'+'<div class="num">'+messages[i].time+'</div>'+'<div class="clr"></div>'+'</div>'+'<div class="tip_c">'+messages[i].content+'</div>'+'<div class="tip_f">'+'<div class="icon">'+'<img src="https://cravatar.cn/avatar/00c96b1072831e92d1ab6ffd361a0b94?d=mm&s=35" alt="" title="">'+'</div>'+'<div class="name">'+messages[i].name+'</div>'+'<div class="clr"></div>'+'</div>';//把新创建的元素放入content里面content.appendChild(newDiv);//随机背景色var elements = document.querySelectorAll('.tip1');const colors = ['#F8D800', '#0396FF', '#EA5455', '#7367F0', '#32CCBC', '#F6416C', '#28C76F', '#9F44D3', '#F55555', '#736EFE', '#E96D71', '#DE4313', '#D939CD', '#4C83FF', '#F072B6', '#C346C2', '#5961F9', '#FD6585', '#465EFB', '#FFC600', '#FA742B', '#5151E5', '#BB4E75', '#FF52E5', '#49C628', '#00EAFF', '#F067B4', '#F067B4', '#ff9a9e', '#00f2fe', '#4facfe', '#f093fb', '#6fa3ef', '#bc99c4', '#46c47c', '#f9bb3c', '#e8583d', '#f68e5f'];const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;// 为每个元素生成随机 RGB 背景色elements.forEach(function(el) {// 生成随机 RGB 值const background = colors[random(0, colors.length - 1)];// 应用样式el.style.backgroundColor = background;})//绑定事件,提高层级//newDiv.onclick = fn;//双击关闭按钮类名叫做tip_hvar dbDiv = newDiv.getElementsByClassName("tip_h")[0];dbDiv.ondblclick = function () {//不能用newDiv,因为在页面加载的时候newDiv,已经变成最后一个了,当你点击的时候,用远关闭的是最后的那个div。//content.removeChild(newDiv);content.removeChild(this.parentNode);}}var index = 1;function fn(){this.style.zIndex = index;index++;}// 如果你有多个.draggable元素// 首先获取所有的拖拽元素var draggableElems = document.querySelectorAll('.draggable');// 设置一个数组用来存放初始化后的所有拖拽元素var draggies = []// 初始化for ( var i=0, len = draggableElems.length; i < len; i++ ) {var draggableElem = draggableElems[i];var draggie = new Draggabilly( draggableElem, {containment:'#messagewall'});// 设置拖拽开始时的事件处理函数draggie.on('dragStart', function() {this.element.style.zIndex = index++;});draggies.push( draggie );}
</script></html>

3.小结

        还是老规矩,直接单文件,拿来即用。了解我的人都知道,我是一个“懒人”。能凑一块发出来的,并不细分。方便你我他。另外,该便签留言效果已引入博客中,也欢迎各种有识之士来访留言,多多交流,下面附上博客地址:

流情无水的博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/469658.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

模型压缩相关技术概念澄清(量化/剪枝/知识蒸馏)

1.模型压缩背景 随着深度学习技术的不断发展&#xff0c;模型的规模和复杂度也随之增加。大型模型往往具有更高的精度和更强的泛化能力&#xff0c;但在实际应用中&#xff0c;模型的大小却成为了一个制约因素。模型体积过大会导致存储、传输和推理速度等方面的瓶颈&#xff0…

Linux入门:环境变量与进程地址空间

一. 环境变量 1. 概念 1️⃣基本概念&#xff1a; 环境变量(environment variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数 如&#xff1a;我们在编写C/C代码的时候&#xff0c;在链接的时候&#xff0c;从来不知道我们的所链接的动态静态库在哪里&#x…

Mysql前言

文章目录 Mysql 数据库简介SQL 基础语法什么是 SQL语句SQL 的作用SQL 语句的分类SQL 通用语法查询状态 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Mysql专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年11月12日18点20分 SQL是数据库…

VCSVerdi:KDB文件的生成和导入

相关阅读 VCShttps://blog.csdn.net/weixin_45791458/category_12828763.html Verdihttps://blog.csdn.net/weixin_45791458/category_12829428.html?spm1001.2014.3001.5482 前言 在复杂的设计中&#xff0c;很难在HDL或测试平台级别&#xff08;如使用系统函数&#xff…

2024年【汽车修理工(高级)】考试试卷及汽车修理工(高级)证考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 汽车修理工&#xff08;高级&#xff09;考试试卷是安全生产模拟考试一点通总题库中生成的一套汽车修理工&#xff08;高级&#xff09;证考试&#xff0c;安全生产模拟考试一点通上汽车修理工&#xff08;高级&#…

灵活就业,真的等同于失业吗?“三无人员”如何齐短板获贷款

现在灵活就业的人越来越多&#xff0c;目前有约2亿人选择灵活就业&#xff0c;今天咱们就来好好聊聊&#xff0c;灵活就业&#xff0c;它真的等同于失业吗&#xff1f; 咱们可以看看那些跑外卖的、做网约车司机的&#xff0c;虽然他们看起来在忙忙碌碌地工作&#xff0c;但细究…

python识别ocr 图片和pdf文件

#识别图片 pip3 install paddleocr pip3 install paddlepaddle#识别pdf pip3 install PyMuPDF 重点&#xff1a;路径不能有中文&#xff0c;不然pdf文件访问不了 from paddleocr import PaddleOCR from rest_framework.response import Response from rest_framework.views im…

由于找不到mfc120u.dll, 无法继续执行代码。重新安装程序可能解决引问题。

运行MFC程序报下面错误,无法到找运行库mfc120u.dll msvcr120.dll也找不到 下载C++运行库安装程序 mfc12对应2013运行库 运行库安装成功

介绍和安装及数据类型

1、介绍和安装 1.1、简介 ClickHouse是俄罗斯的Yandex于2016年开源的列式存储数据库&#xff08;DBMS&#xff09;&#xff0c;使用C语言编写&#xff0c;主要用于在线分析处理查询&#xff08;OLAP&#xff09;&#xff0c;能够使用SQL查询实时生成分析数据报告。 OLAP&…

【Pikachu】越权访问实战

所谓理想&#xff0c;只是同时拥有实力的人才能说的“现实”。所谓弱就是一种罪。 1.Over Permission概述 如果使用A用户的权限去操作B用户的数据&#xff0c;A的权限小于B的权限&#xff0c;如果能够成功操作&#xff0c;则称之为越权操作。 越权漏洞形成的原因是后台使用了…

KubeVirt入门介绍

KubeVirt入门介绍 KubeVirt 是一个开源项目&#xff0c;旨在通过 Kubernetes 管理虚拟机&#xff08;VM&#xff09;&#xff0c;使得 Kubernetes 不仅支持容器化工作负载&#xff0c;还支持虚拟机的部署和管理。这种双重支持的目标是提供一个统一的云原生平台&#xff0c;让开…

分布式----Ceph部署

目录 一、存储基础 1.1 单机存储设备 1.2 单机存储的问题 1.3 商业存储解决方案 1.4 分布式存储&#xff08;软件定义的存储 SDS&#xff09; 1.5 分布式存储的类型 二、Ceph 简介 三、Ceph 优势 四、Ceph 架构 五、Ceph 核心组件 #Pool中数据保存方式支持两种类型&…

智慧仓储物流可视化平台

通过图扑 HT 对仓储与物流流程进行动态可视化管理。实时跟踪库存状态和物流路径&#xff0c;优化资源配置与调度&#xff0c;提升运营效率及准确性&#xff0c;支持全流程决策优化及管理。

万字长文解读深度学习——卷积神经网络CNN

推荐阅读&#xff1a; 卷积神经网络&#xff08;CNN&#xff09;详细介绍及其原理详解 CNN笔记&#xff1a;通俗理解卷积神经网络 文章目录 &#x1f33a;深度学习面试八股汇总&#x1f33a;主要组件输入层卷积层 (Convolutional Layer)批归一化层&#xff08;Batch Normalizat…

100+SCI科研绘图系列教程(R和python)

科研绘图系列&#xff1a;箱线图加百分比点图展示组间差异-CSDN博客科研绘图系列&#xff1a;箱线图加蜜蜂图展示组间数据分布-CSDN博客科研绘图系列&#xff1a;小提琴图和双侧小提琴图展示组间差异-CSDN博客科研绘图系列&#xff1a;组间差异的STAMP图的ggplot2实现-CSDN博客…

【在Linux世界中追寻伟大的One Piece】多路转接epoll

目录 1 -> I/O多路转接之poll 1.1 -> poll函数接口 1.2 -> poll的优点 1.3 -> poll的缺点 1.4 -> poll示例 1.4.1 -> 使用poll监控标准输入 2 -> I/O多路转接之epoll 2.1 -> 初识epoll 2.2 -> epoll的相关系统调用 2.2.1 -> epoll_cre…

招聘app开发,人才招聘、求职首要方式

随着互联网的快速发展&#xff0c;各种线上应用成为了大众生活中不可或缺的一部分&#xff0c;不管是购物、娱乐、找工作等都可以通过手机应用进行。因此&#xff0c;对于企业说&#xff0c;线上招聘app至关重要&#xff0c;能够快速帮助企业找到合适的人才。企业直接与求职者交…

学习方法——看差的书籍

CSAPP证明从1中午2点到下午3&#xff1a;40&#xff0c;但是还是只是推理证明而已&#xff0c;但是想起来了课上老师讲的东西了 还可以知道补码运算的大前提知识&#xff01;&#xff01;&#xff01; 但是最好不要一下学这个一下子学哪个&#xff0c;学哪一个都不能尽情投入。…

【人工智能】Transformers之Pipeline(二十三):文档视觉问答(document-question-answering)

​​​​​​​ 目录 一、引言 二、文档问答&#xff08;document-question-answering&#xff09; 2.1 概述 2.2 impira/layoutlm-document-qa 2.2.1 LayoutLM v1 2.2.2 LayoutLM v2 2.2.3 LayoutXLM 2.2.4 LayoutLM v3 2.3 pipeline参数 2.3.1 pipeline对象实例化…

Python酷库之旅-第三方库Pandas(206)

目录 一、用法精讲 961、pandas.IntervalIndex.mid属性 961-1、语法 961-2、参数 961-3、功能 961-4、返回值 961-5、说明 961-6、用法 961-6-1、数据准备 961-6-2、代码示例 961-6-3、结果输出 962、pandas.IntervalIndex.length属性 962-1、语法 962-2、参数 …