网页高级许愿墙开源代码

15 篇文章 0 订阅
4 篇文章 0 订阅

<!DOCTYPE html>

<html>

 <head>

 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

 <title>许愿墙</title>

 <style>

         *{

                   margin:0px;

                   padding:0px;

         }

         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:'微软雅黑',

                   font-size:16px;

                   position:relative;

                   top:0px;

                   left:0px;

                   bottom:0px;

                   right:0px;

         }

         .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;

                   -moz-border-bottom-left-radius:20px 500px;

                   -moz-border-bottom-right-radius:500px 30px;

                   -moz-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);

         }

         #containerp{

                   height:80px;

                   margin:30px 10px;

                   overflow:hidden;

                   word-wrap:break-word;

                   line-height:1.5;

         }

         #containera{

                   position:relative;

                   left:150px;

                   coler:red;

                   font-size:14px;

         }

         input{

                   display:block;

                   height:30px;

                   padding:0 1em;

                   line-height:30px;

                   width:300px;

                   margin:85px auto;

                   font-size:20px;

         }

 </style>

 <scriptsrc="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

 </head>

 <body>

 <div id="container" style="height:520px;">

 </div>

 <input id="input" type="text" placeholder="随便说说吧..."/> 

 <script>

 (function ($) {

        

         varcontainer;

        

         //可选颜色

         varcolors = ['#96C2F1', '#BBE1F1', '#E3E197', '#F8B3D0', '#FFCC00'];

        

         //创建许愿页

         varcreateItem = function(text){

                   varcolor = colors[parseInt(Math.random() * 5, 10)]

                   $('<divclass="item"><p>'+ text +'</p><ahref="#">关闭</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

                });

           }

       });

   };

        

         //初始化

         varinit = function () {

                  

                   container= $('#container');

                  

                   //绑定关闭事件

                   container.on('click','a',function() {

                            $(this).parent().remove();

                   }).height($(window).height()-204);

 

                   vartests = ['web前端学习部落22群与你风雨同舟?', 'I have adream...', '路漫漫其修远兮。。。', '需要web前端资料,加群120342833', '既然选择了远方,便只顾风雨兼程!'];

                   $.each(tests,function (i,v) {

                            createItem(v);

                   });

                  

                   //绑定输入框

                   $('#input').keydown(function(e) {

                            var$this = $(this);

                            if(e.keyCode== '13') {

                                     varvalue = $this.val();

                                     if(value){

                                               createItem(value);

                                               $this.val('');

                                     }

                            }

                   });

                  

         };

        

         $(function(){

                   init();

         });

        

})(jQuery);

 </script>

 </body>

</html>

需要web前端课程工具和电子书,可以加群120342833,或者扫码

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值