首页 jquery案例 正文
jQuery输入文字许愿墙贴纸代码

 2023-12-01    75  

          效果图：

1.gif

当载入页面完成之后 会将默认的数组内容 动态添加为便签  且每次生成的位置 都不同 在输入框中进行输入 通过点击键盘的确认  将内容添加到页面中 

html：

结构分别为 一个承载标签的盒子 另一个为输入框
image.png

在js中先声明一个变量去接收创建完成的标签 colors提供便签的颜色 紧着在createItem函数中创建便签 通过Math.random去随机生成一个颜色 然后将接收的text 和颜色 

添加到创建的标签当中

image.png

将创建的标签添加到container中 然后我们去自定义一个方法 在标签中使用

image.png

在drag方法中 我们将给父子父子元素获取 分别进行定位设置 以及位置的随机生成  以及拖动时获取 鼠标位置 将被点击的标签跟随鼠标进行移动

以及防止标签移除视口进行一个if判断处理

 // 随机生成位置
    $.fn.drag = function () {
      var _this = $(this);
      var parent = _this.parent();
      //获取父级宽高
      var pw = parent.width();
      var ph = parent.height();
      //    自身宽高加上各自的padding
      var thisWidth = _this.width() + parseInt(_this.css("padding-left"), 10) + parseInt(_this.css("padding-right"), 10);
      var thisHeight = _this.height() + parseInt(_this.css("padding-top"), 10) + parseInt(_this.css("padding-bottom"), 10);

      var x, y, positionX, positionY;
      var isDown = false;
      // 生成随机位置
      var randY = parseInt(Math.random() * (ph - thisHeight), 10);
      var randX = parseInt(Math.random() * (pw - thisWidth), 10);
      //   给父级设置好定位以及溢出隐藏
      parent.css({ position: "relative", overflow: "hidden" });
      // 自身设置
      _this
        .css({
          cursor: "move",
          position: "absolute",
        })
        .css({ top: randX, left: randY })
        .mousedown(function (e) {
          parent.children().css({
            zIndex: 0,
          });
        });
      _this
        .css({
          cursor: "move",
          position: "absolute",
        })
        .css({
          top: randY,
          left: randX,
        }) //当鼠标按下时
        .mousedown(function (e) {
          parent.children().css({
            zIndex: "0",
          });
          _this.css({
            zIndex: "1",
          });
          isDown = true;
          x = e.pageX;
          y = e.pageY;
          positionX = _this.position().left;
          positionY = _this.position().top;
          return false;
        });
      //  当松开时
      $(document)
        .mouseup(function (e) {
          isDown = false;
        }) //当鼠标进行拖动
        .mousemove(function (e) {
          var xPage = e.pageX;
          var moveX = positionX + xPage - x;

          var yPage = e.pageY;
          var moveY = positionY + yPage - y;

          if (isDown == true) {
            _this.css({
              left: moveX,
              top: moveY,
            });
          } else {
            return;
          }
          //对便签进行判断 让其不超出浏览器视口
          if (moveX < 0) {
            _this.css({
              left: "0",
            });
          }
          if (moveX > pw - thisWidth) {
            _this.css({
              left: pw - thisWidth,
            });
          }
          if (moveY < 0) {
            _this.css({
              top: "0",
            });
          }
          if (moveY > ph - thisHeight) {
            _this.css({
              top: ph - thisHeight,
            });
          }
        });
    };

最后接收对其进行初始化 先获取到需要操作的demo节点 然后对其子元素 a标签进行监听 当点击对应的a标签时 对其父级进行删除

image.png

接着就是创建一个数组 其内容最为 默认的标签的 通过forEach进行遍历 使用createItem 函数去进行便签创建 以及添加带页面当值中

image.png

最后就是给输入框添加键盘事件 去监听键盘按下时 其keyCode值 是非为13 即回车 是就获取内容 判断内容是否为空  当不为空时 就调动createItem函数 进行标签创建

然后将输入框清空

image.png

然后调动初始化函数

image.png

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery输入文字许愿墙贴纸代码</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
        background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
        font-family: "微软雅黑", sans-serif;
        font-size: 16px;
        position: relative;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
      }
      .item {
        width: 200px;
        height: 200px;
        line-height: 30px;
        border-bottom-left-radius: 20px 500px;
        border-bottom-right-radius: 500px 30px;
        border-top-right-radius: 5px 100px;
        box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
      }
      #container p {
        height: 80px;
        margin: 30px 10px;
        overflow: hidden;
        word-wrap: break-word;
        line-height: 1.5;
      }
      #container a {
        text-decoration: none;
        color: white;
        position: relative;
        left: 150px;
        color: red;
        font-size: 14px;
      }
      #input {
        border: 0;
        border-radius: 5px;
        display: block;
        height: 30px;
        padding: 0 1em;
        line-height: 30px;
        width: 300px;
        margin: 85px auto;
        font-size: 20px;
        outline-color: #0099cc;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <input id="input" type="text" placeholder="随便说说吧...按回车发布" />
  </body>
</html>
<script src="./js/jquery.js"></script>
<script>
  $(function () {
    var container;
    // 便签 可选颜色
    var colors = ["#96C2F1", "#BBE1F1", "#E3E197", "#F8B3D0", "#FFCC00"];
    //创建便签
    var createItem = function (text) {
      // 随机生成颜色
      var color = colors[parseInt(Math.random() * colors.length)];
      $(`<div class="item"><p>${text}</p><a href="javascript:void(0)">关闭</a></div>`).css({ background: color }).appendTo(container).drag();
    };
    // 随机生成位置
    $.fn.drag = function () {
      var _this = $(this);
      var parent = _this.parent();
      //获取父级宽高
      var pw = parent.width();
      var ph = parent.height();
      //    自身宽高加上各自的padding
      var thisWidth = _this.width() + parseInt(_this.css("padding-left"), 10) + parseInt(_this.css("padding-right"), 10);
      var thisHeight = _this.height() + parseInt(_this.css("padding-top"), 10) + parseInt(_this.css("padding-bottom"), 10);

      var x, y, positionX, positionY;
      var isDown = false;
      // 生成随机位置
      var randY = parseInt(Math.random() * (ph - thisHeight), 10);
      var randX = parseInt(Math.random() * (pw - thisWidth), 10);
      //   给父级设置好定位以及溢出隐藏
      parent.css({ position: "relative", overflow: "hidden" });
      // 自身设置
      _this
        .css({
          cursor: "move",
          position: "absolute",
        })
        .css({ top: randX, left: randY })
        .mousedown(function (e) {
          parent.children().css({
            zIndex: 0,
          });
        });
      _this
        .css({
          cursor: "move",
          position: "absolute",
        })
        .css({
          top: randY,
          left: randX,
        }) //当鼠标按下时
        .mousedown(function (e) {
          parent.children().css({
            zIndex: "0",
          });
          _this.css({
            zIndex: "1",
          });
          isDown = true;
          x = e.pageX;
          y = e.pageY;
          positionX = _this.position().left;
          positionY = _this.position().top;
          return false;
        });
      //  当松开时
      $(document)
        .mouseup(function (e) {
          isDown = false;
        }) //当鼠标进行拖动
        .mousemove(function (e) {
          var xPage = e.pageX;
          var moveX = positionX + xPage - x;

          var yPage = e.pageY;
          var moveY = positionY + yPage - y;

          if (isDown == true) {
            _this.css({
              left: moveX,
              top: moveY,
            });
          } else {
            return;
          }
          //对便签进行判断 让其不超出浏览器视口
          if (moveX < 0) {
            _this.css({
              left: "0",
            });
          }
          if (moveX > pw - thisWidth) {
            _this.css({
              left: pw - thisWidth,
            });
          }
          if (moveY < 0) {
            _this.css({
              top: "0",
            });
          }
          if (moveY > ph - thisHeight) {
            _this.css({
              top: ph - thisHeight,
            });
          }
        });
    };
    // 初始化
    var init = function () {
      // 获取demo
      container = $("#container");
      // 删除便签
      container
        .on("click", "a", function () {
          $(this).parent().remove();
        })
        .height($(window).height() - 200);

      // 默认便签
      var test = ["道友，还处在凝气期吗？", "I have a dream...", "路漫漫其修远兮。。。", "与自己为敌，与自己为友", "既然选择了远方，便只顾风雨兼程！"];
      //    进行遍历 生成便签
      test.forEach(function (i) {
        createItem(i);
      });
      // 绑定输入框 点击键盘时
      $("#input").keydown(function (e) {
        var _this = $(this);
        // 判断触发键盘的keyCode码
        if (e.keyCode == "13") {
          var value = _this.val();
          if (value) {
            createItem(value);
            _this.val("");
          }
        }
      });
    };
    // 调动函数初始化
    init();
  });
</script>


  •  标签：  

发表评论：

原文链接：http://1.15.94.33/?id=237

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。

热门文章
热门标签
最新留言
友情链接

您的备案号皖ICP备2023021143号-1

本网站用于日常作责，学习记录，供大家使用参考

Copyright © 2012-2020，Powered By Z-Blog， Theme By zblog模板