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>
