贵美商城小结
只对这个项目的功能以及用到的技术进行分析和总结:
一、精灵图
网页图片拼接技术,将零星的图片整合到一张完整的图片上,客户端只需加载一张即可,实现加载速度的提升。
如上图所示。
运用到的技术主要为javascript
和精灵图
,结合div盒子模型
以及float
漂浮技术,来实现左右切换动态效果,代码如下:
<script type="text/javascript">
window.onload = function() {
document.getElementById("top1").onmouseover = function() {
this.parentNode.className = "tabbody";
}
document.getElementById("top2").onmouseover = function() {
this.parentNode.className = "tabbody1";
}
}
</script>
<div class="right_bottom">
<div class="tabbody">
<div id="top1"></div>
<div id="top2"