jquery许愿墙

jQuery 技术

JavaScript

2017-06-23 19:15:13

227

作者:黑夜男神

html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>许愿墙</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>
    <style type="text/css">
            *{ margin: 0; padding: 0 }
            html{ width: 100%; height: 100%; }
            body{ width: 100%; height: 100%;
               position: relative;
              background:-webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);}
            .box{
                background: #ccc; 
                position: absolute;
                height: 200px;
                width: 200px;
                box-shadow: 0 0px 10px rgba(0, 0, 0, 0.4);
                background: #BBE1F1;
                -webkit-border-bottom-right-radius:110px 10px;
                -webkit-border-bottom-left-radius:10px 200px;
                -webkit-border-top-left-radius:110px 10px;
                -webkit-border-top-right-radius:10px 200px;
                position: absolute;
                cursor: move;
                padding: 10px;
                line-height: 50px;
                font-family: "微软雅黑"
             }
             .box span{
                cursor: pointer;             
                text-align: right;
                display: inline-block;
                float: right;
                padding-right: 10px;
                color: #fff;
                font-size:18px;
             }
              .box span:active{
                   color: #f00;
              }
              .box p{
                   padding-top: 30px;
              }
             .inputbox{
                position: fixed;
                bottom: 50px;
                width: 50%;
                display: flex;
                display: -webkit-flex;
                left: 20%;
                border-radius: 1px solid #f00
             }
            .inputbox .text{
                flex: 1;
                -webkit-flex: 1;
                padding-left: 10px;
                outline: none;
                border: 1px solid #5449F9;
                border-radius: 4px ;        
                font-size: 16px;
                padding:10px;
            }
            div{
                -moz-user-select:none;
                -webkit-user-select:none;
                user-select:none;    
            }
    </style>
</head>
<body>
<div class="inputbox">
    <input  class="text" type="" name="">
</div>
</body>
<script type="text/javascript">
    $(function(){
        ;(function($,w,d){
            function WishWall (){
                this.flag =false;
                this.body =$(document.body);
                this.winW =$(window).width()-220;
                this.winH =$(window).height()-400;
                this.textArr=["2016许愿墙....","能像老姚一样牛逼......","学如逆水行舟"]//初始化文本            
                this.init();
            } 
            WishWall.prototype = {
                init:function(){
                    var _this =this;
                    this.createWish();                
                    this.eventDarg(_this);
                    this.eachWish();
                },
                getColor:function(){  //获取颜色值
                    var color="#";
                    var colorArr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
                    for(i=0;i<6;i++){
                            var cur=randomNum(15,0);
                            color+=colorArr[cur];
                        }
                        function randomNum(max,min){
                            return Math.floor(Math.random()*(max-min+1)+min)
                        }
                    return color;
                },            
                moldbox:function(top,left,col,text){ // 许愿模板
                    var  moldbox='<div class="box" style="top:'+top+'px; left:'+left+'px;background:'+col+'">'+
                                  '<span>×</span>'+
                                  '<p class="close">'+text+'</p>'+
                                  '</div>'
                    this.body.append(moldbox); 
                },
                createWish:function(){        //创建许愿
                     var  _this = this                      
                      $(".text").bind('keyup', function (e) {
                            var key = e.which;                                          
                            if (key == 13) {
                                if(!$(".text").val()==""){                                         
                                        e.preventDefault();
                                        var color =_this.getColor()    
                                        var text =$(".text").val();
                                        var top =parseInt(Math.random()*_this.winH) //获取随机数X 轴坐标
                                        var left=parseInt(Math.random()*_this.winW)  //获取随机数Y 轴坐标
                                        $(".text").val("")
                                        console.log(top)
                                        _this.moldbox(top,left,color,text);    
                                        _this.closeWish();    
                                        return false                             
                                    }else{
                                        return false;

                                }
                            }
                       });
                 },
                eventDarg:function(m){  //拖动事件
                  $(document).delegate(".box","mousedown",function(e){  
                          var  event = e || event
                           $this=$(this)
                           m.flag =true
                         T= e.clientY - $(this).offset().top;
                         L= e.clientX - $(this).offset().left;                                                 
                        $(document).mousemove(function(e){
                            if(m.flag){
                                var  event = e || event
                                 X=    event.clientX -L;
                                 Y=    event.clientY -T;                                
                                if(X<0){                                          
                                    X=0
                                }else if(X>m.winW){
                                    X =m.winW;
                                }
                                if(Y<0){
                                    Y=0
                                }else if(Y> m.winH){
                                    Y = m.winH;
                                }
                                $this.css({
                                    "top":Y+"px",    
                                    "left":X+"px",
                                    "z-index":"1"
                                });                                
                                $this.siblings().css({ "z-index":"0"  });                            
                             }
                         });    
                    });
                    $(document).on("mouseup",function(){
                        m.flag =false;    
                     });
                },
                closeWish:function(){   //移除许愿事件
                    $(".box").on("click","span",function(){ 
                         $(this).parent().remove();
                    }); 
                },
                eachWish:function(){   //随机创建许愿文本
                    var _this =this
                    $.each(_this.textArr,function(i,d){
                        var col=_this.getColor()                            
                        var top =parseInt(Math.random()*_this.winH); //获取随机数X 轴坐标
                        var left=parseInt(Math.random()*_this.winW);  //获取随机数Y 轴坐
                        _this.moldbox(top,left,col,d);
                        _this.closeWish();
                    });
                },
            }
            window.WishWall=WishWall
        })(jQuery,window,document);

        new WishWall();
    });    
</script>
</html>

评论 (0)

用户名
邮箱
评论

    Copyright © 2020 darkNightMan All Rights Reserved Pro 黔ICP备20005477号