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>