2018Web陈煜昆答辩新车网

1.主要思想

 这次是我第一次在web组参加答辩，答辩作品写的相对比较简单，但是我还是收获了很多，以及在写答辩的遇到了很多有意思的动画，我做的是一个新车网，用的是比较新的网页形式，但是可能并不实用，还有许多值得改进的地方。我主要想体现三大功能，商品展示，动态动画，和对售后服务更多的描述。

2.主要运用的技术

我的答辩主要运用了bookstrap框架，jquery插件,css3, html , javascript,css六大技术，但是运用的不是很好，问题很多，只能大体实现了一点功能，但想法和做出来的效果总是有差距。

3.网页主体介绍

我主要做了四个网页，分别是主页，服务，关于和联系我们，以及一个小的开场动画，就没啥了，在四个网页首部我分别做了不同的样式，轮播，背景图片自动切换，轮播文字，和文字颜色动态渐变，不多说了,上图。

这是主页

 这是服务网页，背景图可以切换

 轮播文字的实现直接上代码

var curIndex=0;
//时间间隔(单位毫秒)，每秒钟显示一张，数组共有5张图片放在Photos文件夹下。
var timeInterval=5000;
var arr=new Array();
arr[0]="s1-1.jpg";
arr[1]="s1-2.jpg";
arr[2]="s1-3.jpg";
arr[3]="s1-4.jpg";
arr[4]="s1-5.jpg";
setInterval(changeImg,timeInterval);
function changeImg()
{
var obj=document.getElementById("obj");
if (curIndex==arr.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
obj.src=arr[curIndex];
}

  下面一个是联系我们的网页

4.小动画详解

我在答辩中加了许多的动画效果，我是第一次做，有的做的不好看，多多包涵。

1.侧边选项卡

2.滚动展示功能，主要就是用js写的，比较简单的可以调节向左向右滚动展示的效果，直接上图片代码

<script type="text/javascript">
window.onload=function(){
var Div=document.getElementById('roll');
var oUl=Div.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var Div=document.getElementById('rollmiddle');
var a=Div.getElementsByTagName('a');//获取向右向左的箭头
var timer=null;
var iSpeed=10;
oUl.innerHTML+=oUl.innerHTML;//定义图片可以循环播放
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';//定义外层ul的宽度，根据图片的个数和每个图片的宽度计算，保证总宽度是可调整的
function fnMove(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left=0;
}else if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}//定义到边界的时候，实现无缝衔接
oUl.style.left=oUl.offsetLeft+iSpeed+'px';
//定义图片的右边距随着速度不断不断增加，或减小，实现运动的效果
}
timer=setInterval(fnMove,70);
a[0].onclick=function(){
iSpeed=-10;//按下左箭头，定义向左运动}
a[1].onclick=function(){
iSpeed=10;//按下右箭头，定义向右运动
}
Div.onmouseover=function(){
clearInterval(timer);//鼠标移动到图片上，清除定时器，停止运动
}
Div.onmouseout=function(){
timer=setInterval(fnMove,40);//鼠标移出，重新开启定时器，重新运动
}
};

 3.我用了百度地图工具，用了一个密钥，通过一段js地图函数定位到了三峡大学欣苑，上代码更清楚明了一些。

    //创建和初始化地图函数：function inittheMap(){createtheMap();//创建地图setMaptheEvent();//设置地图事件addMaptheControl();//向地图添加控件addsetMarker();//向地图中添加图标}//创建地图函数：function createtheMap(){var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图var point = new BMap.Point(111.319644,30.727061 );//定义一个中心点坐标map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中window.map = map;//将map变量存储在全局}function setMaptheEvent(){map.enableDragging();//启用地图拖拽事件map.enableScrollWheelZoom();//启用地图滚轮放大缩小map.enableDoubleClickZoom();//启用鼠标双击放大map.enableKeyboard();//启用键盘上下左右键移动地图}function addMaptheControl(){//向地图中添加缩放控件var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(ctrl_nav);//向地图中添加缩略图控件var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});map.addControl(ctrl_ove);//向地图中添加比例尺控件var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrl_sca);}//标注点数组var markerArr = [{title:"我的标记",content:"我的备注",point:"111.319644|30.727061 ",isOpen:0,icon:{w:20,h:21,l:0,t:0,x:6,lb:5}}];//创建markerfunction addsetMarker(){for(var i=0;i<markerArr.length;i++){var json = markerArr[i];var p0 = json.point.split("|")[0];var p1 = json.point.split("|")[1];var point = new BMap.Point(p0,p1);var iconImg = createIcon(json.icon);var marker = new BMap.Marker(point,{icon:iconImg});var iw = createInfoWindow(i);var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});marker.setLabel(label);map.addOverlay(marker);label.setStyle({borderColor:"#808080",color:"#333",cursor:"pointer"});(function(){var index = i;var _iw = createInfoWindow(i);var _marker = marker;_marker.addEventListener("click",function(){this.openInfoWindow(_iw);});_iw.addEventListener("open",function(){_marker.getLabel().hide();})_iw.addEventListener("close",function(){_marker.getLabel().show();})label.addEventListener("click",function(){_marker.openInfoWindow(_iw);})if(!!json.isOpen){label.hide();_marker.openInfoWindow(_iw);}})()}}//创建窗口function createInfoWindow(i){var json = markerArr[i];var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");return iw;}//创建一个图标function createIcon(json){var icon = new BMap.Icon("maps_16px_1125037_easyicon.net.ico.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})return icon;}inittheMap();//创建和初始化地图

4.开场动画实现了3D旋转远近，穿透，放大，缩小效果。

$(function(){var liNum = 5*5*5;//认为li的的个数为5*5*5var tX = 500,tY = 300,tZ = 700;//水平 垂直 间隔var firstX = - 2*tX;var firstY = - 2*tY;var firstZ = - 2*tZ;//x,y,z偏移量init();function init(){for(var i = 0;i < liNum;i++){var $li = $('<li><h1>Benz<h1><h3>new car<h3></li>');var x = (Math.random()-0.5)*2000;//[0,1)var y = (Math.random()-0.5)*2000;var z = (Math.random()-0.5)*2000;$li.css({'transform' : 'translate3d('+x+'px,'+y+'px,'+z+'px)'});// var iX = (i % 25) % 5;//x方向，要增加的倍数// var iY = parseInt((i % 25) / 5);// var iZ = parseInt(i / 25);// $li.css(// {// 	'transform' : 'translate3d('+ (firstX+iX*tX) +'px,'+(firstY + iY*tY)+'px,'+(firstZ + iZ*tZ)+'px)'// });$('#main').append($li);// $('<li></li>') -> 创建一个节点，把这个节点变成jq对象}setTimeout(function(){Grid();},300);
}function Grid(){$('#main li').each(function(i){//遍历var iX = (i % 25) % 5;//x方向，要增加的倍数var iY = parseInt((i % 25) / 5);var iZ = parseInt(i / 25);$(this).css({'transform' : 'translate3d('+ (firstX+iX*tX) +'px,'+(firstY + iY*tY)+'px,'+(firstZ + iZ*tZ)+'px)','transition' : '4s ease-in-out'});});}//滚轮(function(){var nowX,lastX,minusX,nowY,minusY,lastY;var roY = 0,roX = 0,tZ = -2000;var timer1,timer2;$(document).mousedown(function(ev){ev = ev || window.event;lastX = ev.clientX;lastY = ev.clientY;clearInterval(timer1);$(this).on('mousemove',function(ev){ ev = ev || window.event;//存放事件相关信息nowX = ev.clientX;nowY = ev.clientY;minusX = nowX - lastX;//追踪坐标差值minusY = nowY - lastY;roY += minusX*0.2; roX -= minusY*0.2;$('#main').css({'transform' : 'translateZ('+ tZ +'px) rotateX('+ roX +'deg) rotateY('+ roY +'deg)' })lastX = nowX;//存放前一点的坐标lastY = nowY;});return false;}).mouseup(function(){$(this).off('mousemove');timer1 = setInterval(function()//动画缓冲{  minusX *= 0.95;minusY *= 0.95;if(Math.abs(minusX)<0.5){clearInterval(timer1);}if(Math.abs(minusY)<0.5){clearInterval(timer1);}roY += minusX*0.2; roX -= minusY*0.2;$('#main').css({'transform' : 'translateZ('+ tZ +'px) rotateX('+ roX +'deg) rotateY('+ roY +'deg)' });},13);}).mousewheel(function(e,d){//滚轮事件// var d = arguments[1] // 不定参，实参的集合,判断方位，每次动一clearInterval(timer2);tZ += d*80; // 景深移动 tZ = Math.min(0,tZ);//取参数里面最小的tZ = Math.max(-8000,tZ);$('#main').css({'transform' : 'translateZ('+ tZ +'px) rotateX('+ roX +'deg) rotateY('+ roY +'deg)' });timer2 = setInterval(function(){d *= 0.85;  if (Math.abs(d) < 0.01) {clearInterval(timer2);}tZ += d*80; // 景深移动 tZ = Math.min(500,tZ);//取参数里面最小的tZ = Math.max(-8000,tZ);$('#main').css({'transform' : 'translateZ('+ tZ +'px) rotateX('+ roX +'deg) rotateY('+ roY +'deg)' });},13)});})()//方法链写法});// onload=function(){
// 			setTimeout(go,10000);
// 		};
// 		var f = 10; //利用了全局变量来执行
// 		function go(){
// 		f--;
// 			if(f>0){
// 			document.getElementById("sp").innerHTML=f;  //每次设置的x的值都不一样了。
// 			}else{
// 			location.href='home.html';
// 			}
// 		}
setTimeout(function () {
window.location="dabian.html";
}, 10000);

5.总结

1.网页响应式大致实现了，但是有些细节的地方做的不是很好，浏览效果不是很好。

2.暑假有点放松了，对自己的要求降低了，做的东西不尽如人意。

3.对js了解太浅，没有好好的学，也没有学好，菜的不想说话。

4.对于布局仍没有好的想法，布局没有啥新意，也不是很好看。

5.暑假来了可得认真学习一下了，将各种动画和布局再学习一下，把网页做漂亮点，emmm，审美真的差。