jquery模拟手机短信发送 

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <script src="../js/jquery-3.1.1.min.js"></script>
  7     <style>
  8         ul,li{
  9             margin: 0;
 10             border: 0;
 11             padding: 0;
 12         }
 13 
 14         .wrap{
 15             width: 289px;
 16             height: 594px;
 17             margin: auto;
 18         }
 19         .div1{
 20             width: 289px;
 21             height: 594px;
 22             background-image: url("../images/phone/1.png");
 23             margin: auto;
 24             position: relative;
 25         }
 26         .content{
 27             width: 236px;
 28             height: 384px;
 29             position: absolute;
 30             left:27px;
 31             top:88px;
 32             overflow: hidden;
 33             background-image: url("../images/phone/4.jpg");
 34             overflow:scroll;
 35         }
 36         ul{
 37             overflow:auto;
 38         }
 39         .content li{
 40             list-style: none;
 41             word-wrap:break-word;
 42             border: 1px white solid;
 43             margin-bottom: 5px;
 44         }
 45         .content li:after {content: " ";display: block;clear: both;}
 46 
 47         .content li span{
 48             word-wrap:break-word;
 49             word-break: break-all;
 50         }
 51         .content li span.fleft{
 52             background-color: greenyellow;
 53         }
 54         .content li span.fright{
 55             background-color: lightgray;
 56         }
 57 
 58         .fleft{
 59            float: left;
 60         }
 61         .fright{
 62             float: right;
 63         }
 64         .send{
 65             width: 236px;
 66             height: 34px;
 67             position: absolute;
 68             background-color:gray;
 69             left:26px;
 70             top:474px;
 71         }
 72         .send img{
 73             position: absolute;
 74             /*left:0px;*/
 75             bottom:0px;
 76         }
 77         .send input{
 78             position: absolute;
 79             left:36px;
 80             bottom:5px;
 81         }
 82         .send button{
 83             position: absolute;
 84             right:5px;
 85             bottom:5px;
 86         }
 87     </style>
 88 </head>
 89 <body>
 90 <div class="wrap">
 91 <div class="div1">
 92     <div class="content">
 93         <ul>
 94             <!--<li ><img src="../images/phone/2.png" class="f_l"><span class="f_l">1212121333333333333333333332121212</span></li>-->
 95             <!--<li><img src="../images/phone/3.png" class="f_r"><span class="f_r">123332121212</span></li>-->
 96         </ul>
 97     </div>
 98     <div class="send">
 99         <img src="../images/phone/2.png">
100         <img src="../images/phone/3.png">
101         <input type="text">
102         <button>发送</button>
103     </div>
104 </div>
105 </div>
106 <script>
107     $(function(){
108         var i=0;
109         var imgNum,pos;
110 //        $(".send img").eq(1).hide()
111 //        切换头像
112      $(".send img").click(function(){
113          i=$(this).index();
114          $(this).hide().siblings().show();
115      })
116 //        发送
117         $("button").click(function(){
118              send();
119         })
120         $(document).keydown(function (event) {
121            if(event.keyCode==13){
122                send();
123            }
124         });
125         function send(){
126             var infor=$("input").val();
127             if(i==0){
128                 imgNum=i+3;
129                 pos="fright";
130 
131             }else{
132                 imgNum=i+1;
133                 pos="fleft";
134             }
135             var content="<li ><img src='../images/phone/"+imgNum+".png' class='"+pos+"'><span class='"+pos+"'>"+infor+"</span></li>";
136             $("ul").append(content);
137             $("input").val("");
138             var hei=$(".content ul").height();
139             var sRcollT=hei-384;
140             if(sRcollT>=0){
141                 sRcollT+=20
142                 $(".content").scrollTop(sRcollT);
143             }
144             console.log("hei=="+hei+" sRcollT== "+sRcollT);
145         }
146     })
147 </script>
148 </body>
149 </html>

 

 

 

posted @ 2017-02-07 17:04  夏沫浅语  阅读(284)  评论(0)    收藏  举报