<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
width:350px;
margin:0 auto;
}
#screen{
width:350px;
height:550px;
background:#CCC;
}
.cboxl{ /*左侧对话样式*/
position:absolute;
left:30px;
display:inline-block;
background:#0FF;
margin:5px;
padding:8px;
border:#ccc 1px solid;
border-radius:8px;
text-align:left;
}
.cboxr{ /*右侧对话样式*/
position:absolute;
right:30px;
display:inline-block;
background:#0F0;
margin:5px;
padding:8px;
border:#ccc 1px solid;
border-radius:8px;
text-align:right;
}
.left{
float:left;
}
.right{
float:right;
}
.img1{
position:absolute;
left:3px;
top:10px;
}
.img2{
position:absolute;
right:3px;
top:10px;
}
.chatbox{
position:relative;
padding:2px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
var a = 1; //定义图片索引值
var $img1 = '<img src="pics/01.png">'; //左图片
var $img2 = '<img src="pics/02.png">'; //右图片
$('img').toggle( //图片切换函数
function(){
$('img').attr('src','pics/02.png');
a = 2;
},
function(){
$('img').attr('src','pics/01.png');
a = 1;
});
$('button').click( //按钮发送函数
function(){
if($('input').val() == '') //输入内容为空时弹出提示
{
alert('不能为空');
}
else
{
if(a == 1) //图片为img1时屏幕的输出内容
{
$('#screen').html( '<div>' + $img1 + '<div>' + $('input').val() + '</div>' + '</div>' + '<br>'+ '<br>' + $('#screen').html() );
$('input').val(''); //输入框清空
}
else //图片为img2时屏幕的输出内容
{
$('#screen').html( '<div>' + '<div>' + $('input').val() + '</div>' + $img2 + '</div>' + '<br>'+ '<br>' + $('#screen').html() );
$('input').val(''); //输入框清空
}
}
})
})
</script>
</head>
<body>
<div id=box>
<div id="screen"></div> <!-- 屏幕主体 -->
<img src="pics/01.png">
<input type="text">
<button>sub</button>
</div>
</body>
</html>这段代码想实现的功能，点击图片切换，对话框也会切换，模拟两个人发短信的效果
存在的问题：
1、点击切换图片后，对话框里的图片也会跟着切换
2、对话框里的文字换行后，会被上一条的文字挡住
请问如何解决呢
不知名的前端程序猴
相关分类