先上图吧
，
点击头像更换说话对象，简单说下实现原理，html中创建一个ul用于存放所有说话的内容，对话内容是有javascript 动态生成，
主要难点：先布局好css，当时奥巴马发送时候，让这个li有浮动，当是小胖时候，让这个li左浮动。
代码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模拟短信发送</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 font-family: '微软雅黑' 12 } 13 #container { 14 width: 450px; 15 height: 780px; 16 background: #eee; 17 margin: 80px auto 0; 18 position: relative; 19 box-shadow: 20px 20px 55px #777; 20 } 21 .header { 22 background: #000; 23 height: 34px; 24 color: #fff; 25 line-height: 34px; 26 font-size: 20px; 27 padding: 0 10px; 28 } 29 .footer { 30 width: 430px; 31 height: 50px; 32 background: #666; 33 position: absolute; 34 bottom: 0; 35 padding: 10px; 36 } 37 .footer input { 38 width: 275px; 39 height: 45px; 40 outline: none; 41 font-size: 20px; 42 text-indent: 10px; 43 position: absolute; 44 border-radius: 6px; 45 right: 80px; 46 } 47 .footer span { 48 display: inline-block; 49 width: 62px; 50 height: 48px; 51 background: #ccc; 52 font-weight: 900; 53 line-height: 45px; 54 cursor: pointer; 55 text-align: center; 56 position: absolute; 57 right: 10px; 58 border-radius: 6px; 59 } 60 .footer span:hover { 61 color: #fff; 62 background: #999; 63 } 64 #icon { 65 display: inline-block; 66 background: red; 67 width: 60px; 68 height: 60px; 69 border-radius: 30px; 70 position: absolute; 71 bottom: 6px; 72 left: 14px; 73 cursor: pointer; 74 overflow: hidden; 75 } 76 img { 77 width: 60px; 78 height: 60px; 79 } 80 .content { 81 font-size: 20px; 82 width: 435px; 83 height: 662px; 84 overflow: auto; 85 padding: 5px; 86 } 87 .content li { 88 margin-top: 10px; 89 padding-left: 10px; 90 width: 412px; 91 display: block; 92 clear: both; 93 overflow: hidden; 94 } 95 .content li img { 96 float: left; 97 } 98 .content li span{ 99 background: #7cfc00; 100 padding: 10px; 101 border-radius: 10px; 102 float: left; 103 margin: 6px 10px 0 10px; 104 max-width: 310px; 105 border: 1px solid #ccc; 106 box-shadow: 0 0 3px #ccc; 107 } 108 .content li img.imgleft { 109 float: left; 110 } 111 .content li img.imgright { 112 float: right; 113 } 114 .content li span.spanleft { 115 float: left; 116 background: #fff; 117 } 118 .content li span.spanright { 119 float: right; 120 background: #7cfc00; 121 } 122 </style> 123 <script> 124 window.onload = function(){ 125 var arrIcon = ['img/1.jpg','img/2.jpg']; 126 var num = 0; //控制头像改变 127 var iNow = -1; //用来累加改变左右浮动 128 var icon = document.getElementById('icon').getElementsByTagName('img'); 129 var btn = document.getElementById('btn'); 130 var text = document.getElementById('text'); 131 var content = document.getElementsByTagName('ul')[0]; 132 var img = content.getElementsByTagName('img'); 133 var span = content.getElementsByTagName('span'); 134 135 icon[0].onclick = function(){ 136 if(num==0){ 137 this.src = arrIcon[1]; 138 num = 1; 139 }else if(num==1){ 140 this.src = arrIcon[0]; 141 num = 0; 142 } 143 } 144 btn.onclick = function(){ 145 if(text.value ==''){ 146 alert('发送内容不能为空'); 147 }else { 148 content.innerHTML += '<li><img src="'+arrIcon[num]+'"><span>'+text.value+'</span></li>'; 149 iNow++; 150 if(num==0){ 151 img[iNow].className += 'imgright'; 152 span[iNow].className += 'spanright'; 153 }else { 154 img[iNow].className += 'imgleft'; 155 span[iNow].className += 'spanleft'; 156 } 157 text.value = ''; 158 } 159 } 160 } 161 </script> 162 </head> 163 <body> 164 <div id="container"> 165 <div class="header"> 166 <span style="float: left;">白超华-博客园</span> 167 <span style="float: right;">20:30</span> 168 </div> 169 <ul class="content"></ul> 170 <div class="footer"> 171 <div id="icon"> 172 <img src="img/1.jpg" alt=""> 173 </div> 174 <input id="text" type="text" placeholder="说点什么吧..."> 175 <span id="btn">发送</span> 176 </div> 177 </div> 178 </body> 179 </html>