<!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{???????????????????????????????????????????????/*左側(cè)對(duì)話樣式*/
position:absolute;
left:30px;
display:inline-block;
background:#0FF;
margin:5px;
padding:8px;
border:#ccc?1px?solid;
border-radius:8px;
text-align:left;
}
.cboxr{?????????????????????????????????????????????/*右側(cè)對(duì)話樣式*/
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(??????????????????????????????????????????????//圖片切換函數(shù)
function(){
$('img').attr('src','pics/02.png');
a?=?2;
},
function(){
$('img').attr('src','pics/01.png');
a?=?1;
});
$('button').click(????????????????????//按鈕發(fā)送函數(shù)
function(){
if($('input').val()?==?'')???????//輸入內(nèi)容為空時(shí)彈出提示
{
alert('不能為空');
}
else?
{
if(a?==?1)???????????????????????//圖片為img1時(shí)屏幕的輸出內(nèi)容
{
$('#screen').html(?'<div>'?+?$img1?+?'<div>'??+?$('input').val()?+?'</div>'?+?'</div>'??+?'<br>'+?'<br>'?+?$('#screen').html()?);
$('input').val('');????????????//輸入框清空
}
else????????????????????????????????//圖片為img2時(shí)屏幕的輸出內(nèi)容
{
$('#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>這段代碼想實(shí)現(xiàn)的功能，點(diǎn)擊圖片切換，對(duì)話框也會(huì)切換，模擬兩個(gè)人發(fā)短信的效果存在的問(wèn)題：1、點(diǎn)擊切換圖片后，對(duì)話框里的圖片也會(huì)跟著切換2、對(duì)話框里的文字換行后，會(huì)被上一條的文字擋住請(qǐng)問(wèn)如何解決呢
- 1 回答
- 0 關(guān)注
- 1574 瀏覽
添加回答
舉報(bào)
0/150
提交
取消