jQuery许愿墙代码实例

吐槽君 分类:实例代码

曾经流行过一段时间的许愿墙,形式大家都不会陌生。

下面就通过javascript代码实现此功能,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
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%);
  overflow: hidden;
  font-family: '微软雅黑', font-size: 16px;
  height: 1500px;
}
.item {
  width: 200px;
  height: 200px;
  line-height: 30px;
  -webkit-border-bottom-left-radius: 20px 500px;
  -webkit-border-bottom-right-radius: 500px 30px;
  -webkit-border-top-right-radius: 5px 100px;
  box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
  -moz-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 {
  position: relative;
  left: 150px;
  color: red;
  font-size: 14px;
}
input {
  display: block;
  height: 30px;
  padding: 0 1em;
  line-height: 30px;
  width: 300px;
  margin: 85px auto;
  font-size: 20px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
(function ($) {
  var container;
  // 可选颜色
  var colors = ['#96C2F1', '#BBE1F1', '#E3E197', '#F8B3D0', '#FFCC00'];
 
  //创建许愿页
  var createItem = function (text) {
    var color = colors[parseInt(Math.random() * 5, 10)]
    $('<div class="item"><p>' + text + '</p><a href="#">关闭</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();
    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: 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 () {
    container = $('#container');
    // 绑定关闭事件
    container.on('click', 'a', function () {
      $(this).parent().remove();
    }).height(($(window).height() - 200) < 0 ? 520 : ($(window).height() - 200))
      .width(($(window).width() - 200) < 0 ? '100%' : $(window).width());
 
    var tests = ['犀牛前端部落一', '犀牛前端部落二', '犀牛前端部落三', '犀牛前端部落四', '犀牛前端部落五'];
    $.each(tests, function (i, v) {
      createItem(v);
    });
 
    // 绑定输入框
    $('#input').keydown(function (e) {
      var $this = $(this);
      if (e.keyCode == '13') {
        var value = $this.val();
        if (value) {
          createItem(value);
          $this.val('');
        }
      }
    });
  };
  $(function () {
    init();
  });
})(jQuery);
</script>
</head>
<body>
<div id="container" style="height:520px;"></div>
<input id="input" type="text" placeholder="随便说说吧..." />
</body>
</html>

jQuery许愿墙代码实例,这样的场景在实际项目中还是用的比较多的,关于jQuery许愿墙代码实例就介绍到这了。

jQuery许愿墙代码实例属于前端实例代码,有关更多实例代码大家可以查看

jQuery许愿墙代码实例

回复

我来回复
  • 暂无回复内容