贵美商城小结

程序员文章站 2022-07-16 16:06:16

...

贵美商城小结

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

一、精灵图

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

如上图所示。

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

/*图片切换*/
			
			#top1 {
				width: 100px;
				height: 40px;
				float: left;
			}
			
			#top2 {
				width: 142px;
				height: 40px;
				float: left;
			}
			
			.tabbody {
				background: url(img/bg.gif) no-repeat -743px -440px;/*此处使用到精灵图技术*/
				width: 250px;
				height: 203px;
			}
			
			.tabbody1 {
				width: 247px;
				height: 180px;
				background: url(img/bg.gif) no-repeat -209px -11px;/*此处使用到精灵图技术*/
			}

二、轮播图

此次项目轮播图使用css3技术实现代码如下,写了备注希望对大家有帮助：

			.slide_imgs {
				/*----------图片轮播相框容器----------*/
				position: relative;
				/*--绝对定位，方便子元素的定位*/
				width: 524px;
				height: 190px;
				overflow: hidden;
				/*--相框作用，只显示一个图片---*/
				margin: auto;
				z-index: 1;
				/*border: 1px solid red;*/
			}
			
			#slide_photos img {
				float: left;
				width: 524px;
				height: 190px;
			}
			
			#slide_photos {
				/*---设置总的图片宽度--通过位移来达到轮播效果----*/
				position: absolute;
				width: calc(524px * 4);
				/*---修改图片数量的话需要修改下面的动画参数*/
			}
			
			.slide_play {
				animation: ma 8s ease-out infinite alternate;
				/**/
			}
			
			@keyframes ma {
				/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/
				0%,
				25% {
					margin-left: 0px;
				}
				28%,
				50% {
					margin-left: -524px;
				}
				52%,
				75% {
					margin-left: -1048px;
				}
				77%,
				100% {
					margin-left: -1572px;
				}
			}

					<div class="slide_imgs">
						<div id="slide_photos" class="slide_play">
							<img src="img/ad-01.jpg" alt="9月新品新气象" />
							<img src="img/ad-02.jpg" alt="流行服饰魅力场" />
							<img src="img/ad-03.jpg" alt="食全食美" />
							<img src="img/ad-04.jpg" alt="outlets开张啦" />
						</div>
					</div>

三、`iframe`框架

头部和尾部使用iframe框架嵌套实现，如下图所示

贵美商城小结

iframe框架跳转页面时需要注意添加target属性

<a href="index.html" target="_parent">设为首页</a>

四、`checkbox`全选

checkbox按钮全选功能，主要用到js技术

function checkAll(){
				var arr = document.getElementsByName("quan");
				var all = document.getElementById("checkAll");
				for (var i = 0; i < arr.length; i++) {
					arr[i].checked = all.checked;
				}
			}

<th><input type="checkbox" id="checkAll" onclick="checkAll()">全选</th>

<input type="checkbox" name="quan">

五、动态时钟

主要使用js技术实现时刻刷新，获取系统时间同步

			function disptime() {
				var today = new Date();
				var year = today.getFullYear();
				var month = today.getMonth() + 1;
				var day = today.getDate();
				var hh = today.getHours();
				var mm = today.getMinutes();
				var ss = today.getSeconds();
				var rq = year + "年" + month + "月" + day + "日" + hh + ":" + mm + ":" + ss;
				//setInterval（）方法可以按照指定的周期调用函数或计算表达式
				var mytime = setInterval("disptime()", 1000);
				document.getElementById("myclock").innerHTML = rq;
			}

需注意body里面调用此方法<body onload="disptime()">，随后使用一个控件显示<label id="myclock"></label>

End

大致的项目难点暂时总结了这么多，如有不同或者技术点有误，欢迎指出交流，谢谢观看！

贵美商城小结