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.mzph.cn/web/59397.shtml

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

相关文章

Linux编程:基于 Unix Domain Socket 的进程/线程间通信实时性优化

文章目录 0. 引言1. 使用 epoll 边缘触发模式非不要不选择阻塞模式边缘触发&#xff08;ET&#xff09;模式优点示例 2. 使用实时调度策略3. CPU 绑定4. 使用无锁缓冲区5. 优化消息传递的大小和频率6. 使用 SO_RCVTIMEO 和 SO_SNDTIMEO7. 示例代码其他阅读 0. 引言 前几天被问…

LeetCode【0039】组合总和

本文目录 1 中文题目2 求解方法&#xff1a;回溯法2.1 方法思路2.2 Python代码2.3 复杂度分析 3 题目总结 1 中文题目 给定一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#…

C++入门基础知识147—【关于C++ 一元运算符重载】

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于C 一元运算符重载的相关内容&#xff0…

2022年蓝桥杯JavaB组 省赛 题目解析(含AC_Code)

目录 前言&#xff08;必读&#xff09;第一题&#xff1a;星期计算 &#xff08;简单&#xff09;问题描述思路AC代码总结 第二题 山 &#xff08;简单&#xff09;问题描述题目分析山形数定义解题思路代码实现解析代码详解回文和“山形”判断函数主函数 AC代码复杂度分析 总结…

NLP论文速读(微软出品)|使用GPT-4进行指令微调(Instruction Tuning with GPT-4)

论文速读|Instruction Tuning with GPT-4 论文信息&#xff1a; 简介&#xff1a; 这篇论文试图解决的问题是如何通过指令调优&#xff08;instruction-tuning&#xff09;提升大型语言模型&#xff08;LLMs&#xff09;在执行新任务时的零样本&#xff08;zero-shot&#xff0…

C++20 概念与约束(3)—— 约束的进阶用法

《C20 概念与约束&#xff08;1&#xff09;—— SFINAE》 《C20 概念与约束&#xff08;2&#xff09;—— 初识概念与约束》 ●《C20 概念与约束&#xff08;3&#xff09;—— 约束的进阶用法》 1、再谈约束主句与从句 上一篇文章中提到过约束可以无限嵌套。末尾也提到不…

c#使用COM接口设置excel单元格宽高匹配图片,如何计算?

c#使用COM接口设置excel单元格宽高如何换算 在实际工作中&#xff0c;经常需要在excel中插入图片。并设置单元格与图片对齐。但是excel单元格的宽度和高度使用不同的单位。单元格的宽度以字符宽度为单位&#xff0c;而高度以点为单位。如果按照实际值来设置&#xff0c;例如设…

pySpark乱码

1.现象 python的变量包含中文&#xff0c;用format放入SQL中时&#xff0c;出现乱码 2.原因 python2默认编码是ascii 3.解决办法 使用python3&#xff0c;并且把所有print&#xff0c;改成带括号的 4.在pyspark中加入参数 spark.pyspark.driver.python/usr/bin/python3 …

从 MySQL 5.7 到 8.0:理解 GROUP BY 的新规则与实战优化20241112

&#x1f3af; 从 MySQL 5.7 到 8.0&#xff1a;理解 GROUP BY 的新规则与实战优化 &#x1f50e; 引言 随着 MySQL 的不断升级&#xff0c;从 5.7 到 8.0&#xff0c;不仅性能得到提升&#xff0c;其对 SQL 标准的严格执行也显著提高。GROUP BY 的行为变化就是一个典型例子。…

【activiti工作流源码集成】springboot+activiti+mysql+vue+redis工作流审批流集成整合业务绑定表单流程图会签驳回

工作流集成实际项目案例&#xff0c;demo提供 源码获取方式&#xff1a;本文末个人名片直接获取。 前言 activiti工作流引擎项目&#xff0c;企业erp、oa、hr、crm等企事业办公系统轻松落地&#xff0c;请假审批demo从流程绘制到审批结束实例。 一、项目形式 springbootvue…

如何判断FPGA能够接入几个Camera

摘要&#xff1a;仅记录判断FPGA能够接入几个Camera的思路 在FPGA中&#xff0c;"quad"和"bank"是两个不同的概念&#xff0c;它们通常用于描述FPGA中的高速串行收发器&#xff08;如Xilinx的GTX或GTH收发器&#xff09;的组织方式。 Quad: 一个Quad包含…

CKA认证 | Day2 K8s内部监控与日志

第三章 Kubernetes监控与日志 1、查看集群资源状态 在 Kubernetes 集群中&#xff0c;查看集群资源状态和组件状态是非常重要的操作。以下是一些常用的命令和解释&#xff0c;帮助你更好地管理和监控 Kubernetes 集群。 1.1 查看master组件状态 Kubernetes 的 Master 组件包…

推荐一款好用的postman替代工具2024

Apifox 是国内团队自主研发的 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台&#xff0c;是非常好的一款 postman 替代工具。 它通过一套系统、一份数据&#xff0c;解决多个系统之间的数据同步问题。只要定义好接口文档&#xff0c;接口调试、数据 Mock、接口…

《自动化运维》

一、引言 在当今信息技术飞速发展的时代&#xff0c;企业的 IT 系统规模不断扩大&#xff0c;复杂性日益增加。传统的手工运维方式已经无法满足高效、稳定、可靠的运维需求。自动化运维作为一种先进的运维理念和技术手段&#xff0c;正逐渐成为企业提升 IT 运维效率和质量的关键…

相机光学(四十二)——sony的HDR技术

1.概述 索尼的HDR技术包括以下几种,这些技术共同构成了索尼在HDR领域的技术矩阵&#xff0c;旨在提供更宽广的动态范围、更丰富的色彩表现以及更真实的光影效果: Multi-frame HDR&#xff08;多帧异曝光HDR&#xff09;&#xff1a;这是一种通过不同曝光时间图像的多帧合成来实…

Springboot环境搭建详解

springboot学习视频记录&#xff1a; 笔记&#xff1a; a&#xff1a;Springboot maven常见依赖、配置文件笔记-CSDN博客 b&#xff1a;Springboot环境搭建详解-CSDN博客 day01 6&#xff1a;springboot的parent和starter依赖- a 7&#xff1a;启动类的位置配置- b 8&am…

uniapp+vue2 设置全局变量和全局方法 (兼容h5/微信小程序)

一&#xff0c;Vue.prototype.xxx 问题&#xff1a;js可以使用&#xff0c;但是微信小程序&#xff0c;在template 模板无法使用 二&#xff0c;globalData 问题同上&#xff0c;优点就是&#xff0c;.js文件也可以使用。但是微信小程序&#xff0c;在template 模板无法使用…

gdb调试redis。sudo

1.先启动redis-server和一个redis-cli。 2.ps -aux|grep reids查看redis相关进程。 3.开始以管理员模式附加进程调试sudo gdb -p 2968.注意这里不能不加sudo&#xff0c;因为Redis 可能以 root 用户启动&#xff0c;普通用户无法附加到该进程。否则就会出现可能下列情形&#…

uniapp 设置安全区域

<!-- 获取安全区域 --> <script setup lang"ts"> import { computed, ref } from vuelet systemType ref(1) // #ifdef APP-PLUS || H5 || APP-PLUS-NVUE systemType.value 1 const { safeAreaInsets } uni.getSystemInfoSync() console.log(safeAre…

YUM 的使用

YUM 是一个用于 Fedora 和 Red Hat 以及 CentOS 操作系统的前端软件包管理器&#xff0c;它可以自动处理依赖关系并一次性安装所有必需的软件包。 镜像站点选择 1. 备份原有的镜像源配置文件 系统默认的 yum 镜像源配置文件存储在 /etc/yum.repos.d/ 目录下&#xff0c;可以…