实验十二：JQuery打造个性网站
【实验目的】
1、掌握jQuery开发综合型网站的过程。
【实验准备】
1、复习教材相关内容；
2、预习本次实验；
【实验内容】
1、实现网页换肤效果
在scripts文件夹添加changeSkin.js文件，代码如下：
//网站换肤
$(function(){
var$li=$("#skinli");
$li.click(function(){
switchSkin(this.id);
});
varcookie_skin=$.cookie("MyCssSkin");
if(cookie_skin){
switchSkin(cookie_skin);
}
});
functionswitchSkin(skinName){
$("#"+skinName).addClass("selected")//当前元素选中
.siblings().removeClass("selected");//去掉其他同辈元素的选中
$("#cssfile").attr("href","styles/skin/"+skinName+".css");//设置不同皮肤
$.cookie("MyCssSkin",skinName,{path:''/'',expires:10});
}
在index.html文件head部分添加如下代码：
2、实现导航效果
在scripts文件夹添加nav.js文件，代码如下：
//导航效果
$(function(){
$("#navli").hover(function(){
$(this).find(".jnNav").show();
},function(){
$(this).find(".jnNav").hide();
});
})
在index.html文件head部分添加如下代码：
3、实现右侧上部分广告效果
在scripts文件夹添加ad.js文件，代码如下：
/首页大屏广告效果/
$(function(){
var$imgrolls=$("#jnImagerolldiva");
$imgrolls.css("opacity","0.7");
varlen=$imgrolls.length;
varindex=0;
varadTimer=null;
$imgrolls.mouseover(function(){
index=$imgrolls.index(this);
showImg(index);
}).eq(0).mouseover();
//滑入停止动画，滑出开始动画.
$(''#jnImageroll'').hover(function(){
if(adTimer){
clearInterval(adTimer);
}
},function(){
adTimer=setInterval(function(){
showImg(index);
index++;
if(index==len){index=0;}
},5000);
}).trigger("mouseleave");
})
//显示不同的幻灯片
functionshowImg(index){
var$rollobj=$("#jnImageroll");
var$rolllist=$rollobj.find("diva");
varnewhref=$rolllist.eq(index).attr("href");
$("#JS_imgWrap").attr("href",newhref)
.find("img").eq(index).stop(true,true).fadeIn().siblings().fadeOut();
$rolllist.removeClass("chos").css("opacity","0.7")
.eq(index).addClass("chos").css("opacity","1");
}
在index.html文件head部分添加如下代码：
4、实现右侧下部品牌活动动画效果
在scripts文件夹添加imgHoverjs文件，代码如下：
/品牌活动模块横向滚动/
$(function(){
$("#jnBrandTablia").click(function(){
$(this).parent().addClass("chos").siblings().removeClass("chos");
varidx=$("#jnBrandTablia").index(this);
showBrandList(idx);
returnfalse;
}).eq(0).click();
});
//显示不同的模块
functionshowBrandList(index){
var$rollobj=$("#jnBrandList");
varrollWidth=$rollobj.find("li").outerWidth();
rollWidth=rollWidth4;//一个版面的宽度
$rollobj.stop(true,false).animate({left:-rollWidthindex},1000);
}
在index.html文件head部分添加如下代码：
【总结与体会】
通过本次实验掌握了jQuery综合使用，随着学习的深入，越来越感觉到JQuery的强大。
|
|
