进销存后台系统（SSM框架集成layuimini制作的简易网站）（上面附带了3d动态旋转图和大数据页面框架），附带40+后台模板（已经全部开源）

我认不到你

已于 2022-04-24 19:09:52 修改

阅读量2.3k

点赞数 6

分类专栏： SSM 文章标签： spring maven java layui javascript

于 2022-04-23 13:10:42 首次发布

本文链接：https://blog.csdn.net/qq_57581439/article/details/124362484

版权

SSM 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

滑动旋转3d动态图展示

gitee地址：enters_sells_saves: 简易进存销系统（带sql） - Gitee.com

如果不知道git怎么操作的可以看看（git是工作必备的知识，所以我就不放在百度云盘了，如果急需，请在评论区留言点赞，我会私信你）Git使用详解全图文（基于gitee）,看这一篇就够了_我认不到你的博客-CSDN博客_gitee

进销存系统

最近学校让我们用ssm框架搭一个进存销的后台系统，我就想着使用之前的模板改，目前才打完前端代码和后端部分代码，还在创造中，已经开源，不够完善，现在展示一下我写好的页面

登录（背景是动态的）

首页

管理人员页面（可以分页，添加，修改和逻辑删除（根据条件查询没做））

大数据（动态）

3D图片展示（可以放些商品图啥的，这里我随便cope了一下图，等做完系统我会统一，发如何操作）

40+前端后台模板文件有点大，需要的朋友在评论区留言，点赞我私信你

这是第22个模板中的登录页面

附一个3d动态图片的前端代码（3D动态旋转图展示）

<!DOCTYPE html>
<html lang="en" ondragstart="return false">

<head>
      <meta charset="UTF-8">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>boom</title>
      <!-- 如果我有天醒来 -->
      <!-- 层叠样式表 -->
      <style type="text/css">
            /* 去掉默认效果 */
            * {
                  margin: 0;
                  padding: 0;
            }

            body {
                  background: #222;
                  overflow: hidden;
                  /* 取消选中 */
                  user-select: none;

            }

            @keyframes rotate {
                  100% {
                        transform: rotateY(360deg);
                  }
            }

            .perspective {
                  /*子元素透视 场景深度*/
                  perspective: 600px;
            }

            .wrap {
                  /* 3d */
                  width: 940px;
                  height: 540px;
                  margin: 100px auto;
                  position: relative;
                  /* border: 1px solid red; */
                  transform: rotateX(-20deg) rotateY(0deg);
                  transform-style: preserve-3d;

            }

            .wrap img {
                  display: block;
                  /* 绝对定位 */
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  transform: rotateY(0deg) translateZ(0px);
                  background: transparent;
                  box-shadow: 0 0 4px #fff;
                  border-radius: 5px;

                  /* webkit */
            }

            /* 照片底座 */
            .wrap p {
                  width: 1200px;
                  height: 1200px;
                  background: -webkit-radial-gradient(center center, 0px 0px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));
                  position: absolute;
                  border-radius: 50%;
                  left: 50%;
                  top: 100%;
                  margin-left: -600px;
                  margin-top: -600px;
                  /* 沿着x轴按倒 */
                  transform: rotateX(90deg);

            }
      </style>
</head>

<body>
      <!-- 盒子容器 -->
      <div class="perspective">
            <div class="wrap" id="imgwrap">
                  <!-- 引入图片值页面 -->
                  <img class="f1" src="img/1.jpg" />
                  <img class="f1" src="img/2.jpg" />
                  <img class="f1" src="img/3.jpg" />
                  <img class="f1" src="img/4.jpg" />
                  <img class="f1" src="img/5.jpg" />

                  <!-- 引入图片值页面 -->
                 <img class="f2" src="img/6.jpg" />
                  <img class="f2" src="img/7.jpg" />
                  <img class="f2" src="img/8.jpg" />
                  <img class="f2" src="img/9.jpg" />
                  <img class="f2" src="img/10.jpg" />
                  <!-- 引入图片值页面 -->

                  <img class="f3" src="img/11.jpg" />
                  <img class="f3" src="img/12.jpg" />
                  <img class="f3" src="img/13.jpg" />
                  <img class="f3" src="img/14.jpg" />
                  <img class="f3" src="img/15.jpg" />


                  <p></p>
            </div>
      </div>
      <!--  src="JS/photo.js" -->
      <script type="text/javascript">
            var oImg = document.getElementsByClassName('f1')
            var oImg2 = document.getElementsByClassName('f2')
            var oImg3 = document.getElementsByClassName('f3')
            var len = oImg.length;
            console.log(len)
            var deg = 360 / len;

            var oWrap = document.getElementById("imgwrap");
            // var oWrap=document.querySelector('.wrap');

            //页面加载完毕在执行的代码
            window.onload = function () {
                  Array.prototype.forEach.call(oImg, function (ele, index, self) {
                        // 旋转并沿Z轴平移
                        ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";
                        //过渡时间1s
                        ele.style.transition = "1s " + (len - index) * 0.1 + "s";

                  });
                  Array.prototype.forEach.call(oImg2, function (ele, index, self) {
                        // 旋转并沿Z轴平移
                        ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(520px)";
                        //过渡时间1s
                        ele.style.transition = "1s " + (len - index) * 0.1 + "s";

                  });
                  Array.prototype.forEach.call(oImg3, function (ele, index, self) {
                        // 旋转并沿Z轴平移
                        ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(-520px)";
                        //过渡时间1s
                        ele.style.transition = "1s " + (len - index) * 0.1 + "s";

                  });
                  // Array.prototype.forEach.call(oImg, function (ele, index, self) {
                  //       // 旋转并沿Z轴平移
                  //       ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";
                  //       //过渡时间1s
                  //       ele.style.transition = "1s " + (len - index) * 0.1 + "s";

                  // });

            }
            //翻动3D相册
            var newX, newY, lastX, lastY, minusX, minusY, rotX = -20, rotY = 0;

            document.onmousedown = function (e) {
                  // 点击设置初值
                  lastX = e.clientX;
                  lastY = e.clientY;

                  this.onmousemove = function (e) {
                        newX = e.clientX;
                        newY = e.clientY;
                        minusX = newX - lastX;
                        minusY = newY - lastY;

                        rotX -= minusY * 0.2;
                        rotY += minusX * 0.1;
                        oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";
                        lastX = newX;
                        lastY = newY;

                  }
                  this.onmouseup = function (e) {
                        //鼠标松开
                        this.onmousemove = null;//清除鼠标移动
                  }
            }

      </script>
</body>

</html>

我认不到你

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
7
评论
进销存后台系统（SSM框架集成layuimini制作的简易网站）（上面附带了3d动态旋转图和大数据页面框架），附带40+后台模板（已经全部开源）

SSM框架集成layuimini制作的简易网站（进销存后台系统）（上面附带了3d动态旋转图和大数据页面框架），附带40+后台模板（更新中），最近学校让我们用ssm框架搭一个进存销的后台系统，我就想着使用之前的模板改，目前才打完前端代码和后端部分代码，还在创造中，写完后我会开源，现在展示一下我写好的页面
复制链接

扫一扫