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，審美真的差。