zucc-web基础网页设计（纯html+css+jquery）

版权声明：//若需转载，请各位大虾注明出处，小生在此有礼. https://blog.csdn.net/sos768/article/details/85803377

• 不得不说，大作业真的难受
• 写了很长时间，报告放出来先，效果已经截图
• 想要全份代码的请csdn下载(还在审核，审核通过后补上，急需的话可以评论联系)
• https://download.csdn.net/download/sos768/10896741 -（下载文件地址，已审核）
• (偷偷告诉你们，本大作业是通过修改模板完成，233333)
• 不过想要不通过模板本来的商务js等来实现相同的效果也是挺痛苦的

web基础大作业报告

网页的结构与分解

主要分以下几个版块：

一：主页版块
二：登录，注册版块(这部分简陋)
三：手机和电脑模板页板块
四：手机和电脑购物车具体页面板块
五：其他(结算等杂乱的页面)

网页所采用的技术
这个网站编写可谓是一波三折,修改了三次.在制作过程中,使用的是在网页初步测试也是在Chrome浏览器上测试的.并且使用的是webstorm这个自己并不熟悉的ide，所以制作时候十分的不顺手。但是因为电脑在之间炸了一次的原因，加上自己之后更换成了linux版本的系统，所以习惯这个势在必行= =，所以在写网页大作业之前，先去学习了一段时间的webstorm的学习手册方便开发，顺便补充了jquery方面的知识，方便自己编写动画特效，后来发现相对于js，jquery封装之后的使用的确方便了许多，许多方面本来应该十分繁复的地方，jquery封装之后再进行使用就变得十分的轻便，而且解释起来也十分的方便，既方便了我们答辩，也方便了老师进行提问和理解我们做的意图。在进行编写之前自己还没有信心写完它，最后还是熬夜编写遍改完成了这个大作业，有一部分的内容因为后期实在太累了并没有添加，而是选择了简化，希望老师理解。

网页截图和说明讲解

1.首页:

本页面用了做了页头，中间，和页尾部分.且有图片轮播,使用了js技术，并且使用js技术将定位响应连接了起来，做成了类似多级菜单的效果

头部:
类似于下面这种效果
使用js连接

中间:
包括这种连接也是类似连接，在hover的时候，display style改为显示

这里是老师上课讲过的倒计时，并且加上了css样式
还有在鼠标放在图片上的时候向上使用jquery
的动画animate改变css，使得图片上移

尾部:
Footer部分感觉没什么地方好说的，emm
前面的多快好省是通过截图过去下来的图片直接放上去的
而后面的则是通过span，ul，li进行排布的
最后的声明（关于我们部分）通过span写，但是不知道为什么会有点乱
最后通过relative和left，top移动改正

2.登录注册：

这一部分写的很简陋，未来的修补计划是使得登录注册悬浮在首页上，首页被虚化

3.模块页面:

模块界面其实写的很简单
都是模仿京东的排版进行模仿的
并没有加入动画，只加入了一些细节
比如：悬浮改变颜色，或者根据不同的类别进行style修改
在电脑页面进行了补充，主要是店铺标志，加入购物车，阴影设置，主要是细节方面更加贴近京东界面

4.内容页面:

通过点击模板界面的商品进入
在这里主要用了span等标签，还有就是js实现替换，其实就是当鼠标悬浮在小图片上的时候，进行转换显示在大图片上面
主要也是对京东进行了模仿，因为技术限制，我发现好多东西都想做，却都没有实现，这一点是很遗憾的，主要是地域显示，还有数字显示，还有广告随即显示，这些东西都是以后想要实现的内容

5.其他(很多其他杂乱的界面)

其实就是一些想要完善还没有实现的功能，希望寒假有时间可以去实现完善他们

建议:

希望老师以后讲学的时候可以讲的慢一点，大二的学生真的有点跟不上
另外就是祝福老师的课程越开越顺利了

总结：

不管怎么说从这们课里面还是学到了很多，从完全不懂web到逐渐明白怎么作出精致美好的网页，完全可以说是我从这们课程里面获得的瑰宝，虽然在写作业等方面花费了很多的精力，但是个人看来，这完全是值的肯定的，希望以后还可以和老师共同度过几段美好的师生回忆，哈哈哈，最后，祝福老师更加年轻。

自评：
88分

---

---

附录(js讲解)：

//当鼠标放在导航条上时
//在地址上
$('.location,.city').hover(
	function() {
		var locatOffset = $('.location').offset();//获取位置top和left
		$('.city').show();//鼠标悬浮时候显示
		$('.city').css('left', locatOffset.left + "px");
		$('.city').css('top', (locatOffset.top+35) + "px");
		$('.location').addClass("nav-pull-down-action");
	},
	function(){
		$('.city').hide();
		$('.location').removeClass("nav-pull-down-action");//与下面方法一致
	}
);



//在我的商城上
$('.my-shop,.my-shop-panel').hover(
	function(){
		var locatOffset = $('.my-shop').offset();//与下方一致，获取top和left
		$('.my-shop-panel').show();//显示
		$('.my-shop-panel').css('left', locatOffset.left + "px");
		$('.my-shop-panel').css('top', (locatOffset.top+35) + "px");//显示在下面一点
		$('.my-shop').addClass("nav-pull-down-action");//悬浮的时候给myshop添加此class属性//即改为白色
		$('.my-shop').children('a').css("border-left", "1px solid #fff");
	},
	function(){
		$('.my-shop-panel').hide();//没有悬浮则隐藏
		$('.my-shop').children('a').css("border-left", "1px solid #ccc");//改为原先的灰白色
		$('.my-shop').removeClass("nav-pull-down-action");
	});




//幻灯片
var nowKey = 1;//默认幻灯片在第1页图片上面
$('.carousel_img[name=1]').show();//把图片显示出来
$('.icon i[name=1]').css("color", "#f00");//小圆点设置红色
objTime = setInterval(Carousel,2500);//设置函数间隔


// 幻灯片
function Carousel() {
	var forKey = 1;
	nowKey++;
	//便利img标签
	$('.carousel_img').each(function(){
		//如果已显示
		if (!$(this).is(":hidden") && (nowKey-1) == forKey) {
			if (nowKey == 6) {//如果是第5页图片的时候初始化
				nowKey = 1;
				$('.carousel_img[name=1]').fadeIn(800);//
				console.log(nowKey);//控制台调试使用
			}else{
				$(this).next('img').fadeIn(800);//否则当前图片的下面一张淡入
			}
			$(this).fadeOut(800);//淡出，进入for-each循环
		}
		forKey++;
	});
	//下面红点跟着幻灯片动
	if (nowKey == 1) {
		$(".icon i[name=1]").css("color", "#f00");
		$(".icon i[name=5]").css("color", "#fff");//初始化的时候初始化最后一个红色圆点也初始化，不然一直为红色
	}else{
		$(".icon i[name="+nowKey+"]").css("color", "#f00");
		$(".icon i[name="+(nowKey-1)+"]").css("color", "#fff");
	}
}

//鼠标放在幻灯片上面暂停播放
$('.slide').hover(
	function(){
		clearInterval(objTime);
		$('.prevNext').show();
	},
	function(){
		objTime = setInterval(Carousel,2500);
		$('.prevNext').hide();
	}
);

//点击幻灯片的小圆点
$('.icon i').hover(function(){
		//先消失
		tempKey = parseInt($(this).attr("name"));
		$(".icon i[name="+nowKey+"]").css("color", "#fff");
		//如果选中的和上一个不一样时
		if (tempKey != nowKey)
			$(".carousel_img[name="+nowKey+"]").fadeOut(800);
		nowKey =tempKey; 
		//再出现
		$(this).css("color", "#f00");
		$(".carousel_img[name="+nowKey+"]").fadeIn(800);
		console.log(nowKey);
	},function(){});

//点击上一张下一张
function PrevNextClick(flag){
	if (flag == 1){
		if (nowKey>1) {
			$(".icon i[name="+nowKey+"]").css("color", "#fff");
			$(".carousel_img[name="+nowKey+"]").fadeOut(800);
			nowKey--;
		}
	}
	else if (flag == 2){
		if (nowKey<5) {
			$(".icon i[name="+nowKey+"]").css("color", "#fff");
			$(".carousel_img[name="+nowKey+"]").fadeOut(800);
			nowKey++;
		}
	}
	$(".icon i[name="+nowKey+"]").css("color", "#f00");
	$(".carousel_img[name="+nowKey+"]").fadeIn(800);
}




//显示商品详细信息
var navIndex = -1;//默认不显示，去掉也没关系
$('.nav-side li,.detail-item-panel').hover(//当鼠标悬浮在.nav-side li,与.detail-item-panel进行连接
	function(){
		var slideOffset = $('.nav-side').offset();//获取.nav-side的top和left offset value
		navIndex = $('.nav-side li').index($(this));//获得当前鼠标悬浮的元素相对于.nav-side l位置
		if (navIndex%2) {//如果距离不为偶数，则显示panel1
			$('.panel-1').show();
		}else{//否则显示panel2(偶数距离时候)
			$('.panel-2').show();
		}
		
		$('.detail-item-panel').css("top",slideOffset.top + "px");
		$('.detail-item-panel').css("left",(slideOffset.left + 200) + "px");//显示在左菜单右方
	},function(){
		if (navIndex%2) {
			$('.panel-1').hide();
		}else{
			$('.panel-2').hide();//鼠标不在上面的时候全部隐藏
		}
	});


//倒计时
function countDowm(){
	var seconds = parseInt($('.count-down-seconds').html());//获取html里面对应的second值
	if (seconds == 0) {
		var minute = parseInt($('.count-down-minute').html());//获取对应分值
		minute = minute - 1;
		if (minute < 10) {
			$('.count-down-minute').html('0' + minute);//把小于10的数字化成0+数字类型
		}else{
			$('.count-down-minute').html(minute);//否则不变
		}
		$('.count-down-seconds').html('59');//分钟变化之后second重新变为59s
	}else{
		seconds = seconds - 1;
		if (seconds < 10) {
			$('.count-down-seconds').html('0' + seconds);
		}else{
			$('.count-down-seconds').html(seconds);//seconds轮回
		}
	}
}
setInterval(countDowm,1000);


//鼠标经过限时秒杀商品时使得商品向上移动
$('.seckill-item').hover(//使用animate的队列功能实现此效果
	function(){
		$(this).children('.seckill-item-img').children('img').animate({//使用内置的animate，此时为hover时候的css
			'margin-top':'-8px'
		},380);//一直到为0px才停止,同样以380ms的速度，在鼠标悬浮在上面时候执行
	},
	function(){
		$(this).children('.seckill-item-img').children('img').animate({
			'margin-top':'0px'
		},380);//一直到上前8px后才停止，以380ms的速度，鼠标放开后执行
	});

$('.other-user-buy-item-box').hover(
    function(){
        $(this).children('.other-user-buy-item-img').children('img').animate({
            'margin-top':'-8px'
        },380);
    },
    function(){
        $(this).children('.other-user-buy-item-img').children('img').animate({
            'margin-top':'0px'
        },380);
    });



//鼠标滑动商品向左滑//商品区
$('.item-big-img,.item-content-bottom-img').hover(//与上滑一致
	function(){
		$(this).children('img').animate({
			'margin-left':'-8px'
		},380);
	},
	function(){
		$(this).children('img').animate({
			'margin-left':'0px'
		},380);
	});
//鼠标放在四个框商品时图片向左滑
$('.item-four-detail').hover(
	function(){
		$(this).children('.item-four-detail-img').children('img').animate({
			'margin-left':'-8px'
		},380);
	},
	function(){
		$(this).children('.item-four-detail-img').children('img').animate({
			'margin-left':'0px'
		},380);
	});

//点击转换
$('.item-row').click(function(){//简单的定位转化问题,点击响应
	window.location = 'item_detail.html';
})

$('.item-row1').click(function(){
    window.location = 'item_detail1.html';
})