关灯
开启左侧

许愿墙效果

[复制链接]
小川 发表于 2018-11-7 18:00:39 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.   <title>许愿墙</title>
  6.   <style>
  7.     *{
  8.         margin: 0px;
  9.         padding: 0px;
  10.     }
  11.     body{
  12.         background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  13.         background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  14.         font-family: '微软雅黑',
  15.         font-size: 16px;
  16.         position: relative;
  17.         top: 0px;
  18.         left: 0px;
  19.         bottom: 0px;
  20.         right: 0px;
  21.     }
  22.     .item {
  23.         width: 200px;
  24.         height: 200px;
  25.         line-height: 30px;
  26.         -webkit-border-bottom-left-radius: 20px 500px;
  27.         -webkit-border-bottom-right-radius: 500px 30px;
  28.         -webkit-border-top-right-radius: 5px 100px;
  29.         -moz-border-bottom-left-radius: 20px 500px;
  30.         -moz-border-bottom-right-radius: 500px 30px;
  31.         -moz-border-top-right-radius: 5px 100px;
  32.         box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
  33.         -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
  34.         -moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
  35.     }
  36.     #container p{
  37.         height: 80px;
  38.         margin: 30px 10px;
  39.         overflow: hidden;
  40.         word-wrap: break-word;
  41.         line-height: 1.5;
  42.     }
  43.     #container a{
  44.         position: relative;
  45.         left: 150px;
  46.         coler: red;
  47.         font-size: 14px;
  48.     }
  49.     input{
  50.         display:block;
  51.         height: 30px;
  52.         padding: 0 1em;
  53.         line-height: 30px;
  54.         width: 300px;
  55.         margin: 85px auto;
  56.         font-size: 20px;
  57.     }
  58.   </style>
  59.   <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  60. </head>
  61. <body>
  62.   <div id="container" style="height:520px;">
  63.   </div>
  64.   <input id="input" type="text" placeholder="随便说说吧..." />  
  65.   <script>
  66.   (function ($) {

  67.     var container;

  68.     // 可选颜色
  69.     var colors = ['#96C2F1', '#BBE1F1', '#E3E197', '#F8B3D0', '#FFCC00'];

  70.     //创建许愿页
  71.     var createItem = function(text){
  72.         var color = colors[parseInt(Math.random() * 5, 10)]
  73.         $('<div class="item"><p>'+ text +'</p><a href="#">关闭</a></div>').css({ 'background': color }).appendTo(container).drag();
  74.     };

  75.     // 定义拖拽函数
  76.     $.fn.drag = function () {

  77.         var $this = $(this);
  78.         var parent = $this.parent();

  79.         var pw = parent.width();
  80.         var ph = parent.height();
  81.         var thisWidth = $this.width() + parseInt($this.css('padding-left'), 10) + parseInt($this.css('padding-right'), 10);
  82.         var thisHeight = $this.height() + parseInt($this.css('padding-top'), 10) + parseInt($this.css('padding-bottom'), 10);

  83.         var x, y, positionX, positionY;
  84.         var isDown = false;

  85.         var randY = parseInt(Math.random() * (ph - thisHeight), 10);
  86.         var randX = parseInt(Math.random() * (pw - thisWidth), 10);

  87.         parent.css({
  88.             "position": "relative",
  89.             "overflow": "hidden"
  90.         });

  91.         $this.css({
  92.             "cursor": "move",
  93.             "position": "absolute"
  94.         }).css({
  95.             top: randY,
  96.             left: randX
  97.         }).mousedown(function (e) {
  98.             parent.children().css({
  99.                 "zIndex": "0"
  100.             });
  101.             $this.css({
  102.                 "zIndex": "1"
  103.             });
  104.             isDown = true;
  105.             x = e.pageX;
  106.             y = e.pageY;
  107.             positionX = $this.position().left;
  108.             positionY = $this.position().top;
  109.             return false;
  110.         });

  111.         $(document).mouseup(function (e) {
  112.             isDown = false;
  113.         }).mousemove(function (e) {
  114.             var xPage = e.pageX;
  115.             var moveX = positionX + xPage - x;

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

  118.             if (isDown == true) {
  119.                 $this.css({
  120.                     "left": moveX,
  121.                     "top": moveY
  122.                 });
  123.             } else {
  124.                 return;
  125.             }
  126.             if (moveX < 0) {
  127.                 $this.css({
  128.                     "left": "0"
  129.                 });
  130.             }
  131.             if (moveX > (pw - thisWidth)) {
  132.                 $this.css({
  133.                     "left": pw - thisWidth
  134.                 });
  135.             }
  136.             if (moveY < 0) {
  137.                 $this.css({
  138.                     "top": "0"
  139.                 });
  140.             }
  141.             if (moveY > (ph - thisHeight)) {
  142.                 $this.css({
  143.                     "top": ph - thisHeight
  144.                 });
  145.             }
  146.         });
  147.     };

  148.     // 初始化
  149.     var init = function () {

  150.         container = $('#container');

  151.         // 绑定关闭事件
  152.         container.on('click','a',function () {
  153.             $(this).parent().remove();
  154.         }).height($(window).height() -204);

  155.         var tests = ['道友,还处在凝气期吗?', 'I have a dream...', '路漫漫其修远兮。。。', '与自己为敌,与自己为友', '既然选择了远方,便只顾风雨兼程!'];
  156.         $.each(tests, function (i,v) {
  157.             createItem(v);
  158.         });

  159.         // 绑定输入框
  160.         $('#input').keydown(function (e) {
  161.             var $this = $(this);
  162.             if(e.keyCode == '13') {
  163.                 var value = $this.val();
  164.                 if(value) {
  165.                     createItem(value);
  166.                     $this.val('');
  167.                 }
  168.             }
  169.         });

  170.     };

  171.     $(function() {
  172.         init();
  173.     });

  174. })(jQuery);
  175.   </script>
  176. </body>
  177. </html>
复制代码


 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 最佳新人

    注册账号后积极发帖的会员

1关注

1粉丝

105帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )