div + css

welcomechenqi 2009-07-27 05:25:38

www.qq.com

人家这个是怎么做的？

...全文

117 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

End 2009-07-28

打赏
举报

[Quote=引用 9 楼 jzcldy 的回复:]
我刚做过，美工就是参考的qq设计的效果图。
这是一种称为 CSS Sprites 的技术，就是背景图一次加载。
把说有的背景图放到一张图片里面，然后去读它的坐标和偏移量来确定。
动态效果是js搞得，js很复杂。
[/Quote]
以前听搞美工的朋友说过的，一整张图片，然后通过坐标和偏移量确定
说的简单点就类似于截图

slund 2009-07-28

打赏
举报

可以用JS进行控制。
参考
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.tabnav ul{margin:0;padding:0;list-style:none;}
.tabnav li{padding:5 10px;border:1px solid red;float:left;}
.tabid {border:1px solid #000;clear:both;}
</style>
<script language='javascript'>
function tab(n){
var tabnav="tab"+n;
var tabid="tabid"+n;
cleardisplay();
document.getElementById(tabid).style.display="block";
}
function cleardisplay(){
for (i=1;i<3;i++)
{
var cleartabid="tabid"+i;
document.getElementById(cleartabid).style.display="none";
}
}
</script>
</HEAD>

<BODY>
<div>
<div class='tabnav'>
<ul>
<li id='tab1' onclick='tab(1)'>TAB1</li>
<li id='tab2' onclick='tab(2)'>TAB2</li>
</ul>
</div>
<div id='tabid1' class='tabid'>tab1</div>
<div id='tabid2' class='tabid' style='display:none;'>tab2</div>
</div>
</BODY>
</HTML>