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}}
];
//创建marker
function 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*5
var 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，审美真的差。