贵美商城小结

贵美商城小结

只对这个项目的功能以及用到的技术进行分析和总结：

一、精灵图

网页图片拼接技术，将零星的图片整合到一张完整的图片上，客户端只需加载一张即可，实现加载速度的提升。

如上图所示。

运用到的技术主要为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"