效果
这是一个由前端技术实现界面。有部分动态的效果。
代码
index.html
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QQ</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="qq">
<div class="input">
<div class="pic"><img src="images/user1.png" alt="miaov"></div>
<p><input type="text" value="116279832" /></p>
<div class="link"></div>
</div>
<ul>
<li>
<div class="pic"><img src="images/user1.png" alt="妙味" ></div>
<p>
<span class="name">CSDN--追光者</span>
<span class="number">123456789</span>
</p>
</li>
<li>
<div class="pic"><img width="32" src="images/user2.png" alt="妙味" /></div>
<p>
<span class="name">kkk</span>
<span class="number">123456789</span>
</p>
</li>
<li class="bg">
<div class="pic"><img width="44" src="images/user3.png" alt="妙味" /></div>
<p>
<span class="name">666</span>
<span class="number">123456789</span>
</p>
</li>
<li>
<div class="pic"><img width="32" src="images/user4.png" alt="妙味" /></div>
<p>
<span class="name">user11</span>
<span class="number">123456789</span>
</p>
</li>
</ul>
</div>
<div id="tmp_container" style="height:0px; overflow:hidden;"></div>
</body>
</html>
script.js
var oDropDown=null;
var oDropDownBtn=null;
var aLi=[];
var oImgInitSize={
x:0, y:0};
var aTimer=[];
var aScale=[];
window.onload=function ()
{
var oDiv=document.getElementById('qq');
var aDiv=oDiv.getElementsByTagName('div');
var oTmpContainer=document.getElementById('tmp_container');
var oTmpParent=null;
var oInput=oDiv.getElementsByTagName('input')[0];
var oImgTitle=oDiv.getElementsByTagName('img')[0];
var oImg=null;
var i=0;
oDropDown=oDiv.getElementsByTagName('ul')[0];
aLi=oDropDown.getElementsByTagName('li');
for(i=0;i<aDiv.length;i++)
{
switch(aDiv[i].className)
{
case 'link':
oDropDownBtn=aDiv[i];
break;
}
}
oImg=aLi[0].getElementsByTagName('img')[0];
oTmpParent=oImg.parentNode;
oTmpContainer.appendChild(oImg);
oImgInitSize.x=oImg.offsetWidth;
oImgInitSize.y=oImg.offsetHeight;
oTmpParent.appendChild(oImg);
oTmpContainer.parentNode.removeChild(oTmpContainer);
oDropDownBtn.onmousedown=function (ev)
{
if(this.className=='active')
{
hideDropDown(ev);
oDropDownBtn.className='hover';
}
else
{
showDropDown(ev);
}
};
oDropDownBtn.onmouseover=function ()
{
if(oDropDownBtn.className!='active')
{
this.className='hover';
}
};
oDropDownBtn.onmouseout=function ()
{
if(oDropDownBtn.className!='active')
{
this.className='link';
}
};
document.body.onmousedown=hideDropDown;
for(i=0;i<aLi.length;i++)
{
aLi[i].miaovIndex=i;
aLi[i].onmouseover=doScale;
aLi[i].onmousedown=function ()
{
oImgTitle.src=this.getElementsByTagName('img')[0].src;
oInput.value=this.getElementsByTagName('span')[1].innerHTML;
};
aTimer[i]=null;
aScale[i]=10;
}
aScale[1]=16;
aScale[2]=20;
aScale[3]=16;
};
function showDropDown(ev)
{
var oEvent=window.event || ev;
oDropDown.style.display='block';
oDropDownBtn.className='active';
oEvent.cancelBubble=true;
}
function hideDropDown(ev)
{
var oEvent=window.event || ev;
oDropDown.style.display='none';
oDropDownBtn.className='link';
oEvent.cancelBubble=true;
}
function doScale()
{
var iScale=0;
var iPading=0;
for(i=0;i<aLi.length;i++)
{
switch(Math.abs(i-this.miaovIndex))
{
case 1:
iScale=16;
iPading=6;
break;
case 0:
iScale=22;
iPading=10;
break;
default:
iScale=10;
iPading=4;
}
aLi[i].className='';
aLi[i].getElementsByTagName('span')[0].style.paddingTop=iPading+'px';
setScale(i, iScale);
}
this.className='bg';
}
function setScale(index, iScale)
{
if(aTimer[index])
{
clearInterval(aTimer[index]);
}
aTimer[index]=setInterval("setScaleInner("+index+", "+iScale+")", 30);
}
function setScaleInner(index, iTarget)
{
var iScale=aScale[index];
var oImg=aLi[index].getElementsByTagName('img')[0];
if(iScale==iTarget)
{
clearInterval(aTimer[index]);
aTimer[index]=null;
}
else
{
if(iScale>iTarget)
{
iScale--;
}
else
{
iScale++;
}
oImg.style.width=oImgInitSize.x*iScale/10+'px';
oImg.style.height=oImgInitSize.y*iScale/10+'px';
aScale[index]=iScale;
}
}
style.css
@charset "utf-8";
*{
padding:0;margin:0;list-style-type:none;}
body{
background:#3a6ea5 url(images/desktop.png) no-repeat 0px 10px;}
#qq{
width:340px;height:250px;background:url(images/bg.png);position:absolute;top:50%;left:50%;margin:-125px 0 0 -170px;}
#qq .input{
position:absolute;top:110px;left:67px;}
#qq .input .pic{
float:left;}
#qq .input p{
float:left;padding-left:3px;}
#qq .input .link, #qq .input .active, #qq .input .hover{
width:23px;height:22px;cursor:pointer ;float:left;position:relative;top:-1px;right:-1px;}
#qq .input .link{
background:url(images/btn.gif) no-repeat 0px -22px;}
#qq .input .active{
background:url(images/btn.gif) no-repeat 0px 0px;}
#qq .input .hover{
background:url(images/btn.gif) no-repeat 0px -44px;}
#qq ul{
width:182px;padding:1px;background:#fff;border:1px solid #0093d1;position:absolute;top:133px;left:65px;display:none;}
#qq li{
width:182px;display:inline-block;margin-bottom:1px;float:left;list-style:none;}
#qq ul .pic{
float:left;}
#qq ul p{
float:left;font-size:12px;padding-left:3px;font-family:arial;}
.bg{
background:url(images/li_bg.gif) repeat-x 0 bottom;}
.bg .number{
display:block;}
#qq ul p span{
display:block;}
#qq .number{
display:none;color:#fff;}
#qq input{
width:136px;font-size:12px;color:#000;height:20px;line-height:20px;border:none;background:none;}