<!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(????????????????????//按鈕發(fā)送函數
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>這段代碼想實現的功能，點擊圖片切換，對話框也會切換，模擬兩個人發(fā)短信的效果存在的問題：1、點擊切換圖片后，對話框里的圖片也會跟著切換2、對話框里的文字換行后，會被上一條的文字擋住請問如何解決呢
- 1 回答
- 0 關注
- 1559 瀏覽
添加回答
舉報
0/150
提交
取消