我初学（自学）jquery已经一个多月了。
现在看下我自己比较满意的作品。
这些代码肯定有很多精简的地方，高手欢迎指导。
先上图：
看图上有5个部分的标号
第一部分，我在页面头部做了一个同步登陆的框，用jquery动态加载。本来我直接写一个表单在那里的
但是我这个登录时整合thinkphp的另一个系统程序，很多安全验证都是实时的。如果我只写一个静态表单在那里，安全性无疑下降很多！
这一部分的jquery代码比较简单：
[code lang=”js”]
<script type="text/javascript">// <![CDATA[
var thklg=jQuery.noConflict();
thklg(document).ready(function(){
var toplogin = thklg(".toplogin");
thklg.getScript("/cityosweb/shanmaojs/login.js",function(){
toplogin.load(‘/cityosweb/default.php/Index/topwplogin .wpm’,function(){thklg(".logout").load("/wp/ .logout").prependTo(".charu");});
});
});
// ]]></script>
[/code]
详细的解释请点击这里
第二部分我自己用jquery做了一个点击滚动效果。具体效果可点击这里查看.
js代码：
[code lang=”js”]
var his=jQuery.noConflict();
his(document).ready(function(){
his(".rightb,.leftb").hover(function(){
his(this).addClass("hover");},function(){his(this).removeClass("hover");});
var cachediv =his("#catch");
his(".rightb").click(function(){
var cache = cachediv.data("numb");
if(cache==null || cache==0){
his(".longline").animate({left:’-822px’},1000);
his(".bg1").fadeOut(0);
his(".bg2").fadeIn(1000);
his(".linex2,.linex2top").fadeIn(1000);
his(".linex1").fadeOut(1000);
his(".con1").fadeOut(0);
his(".con2").fadeIn(1000);
cachediv.data("numb","0");
}else if(cache==1){
his(".longline").animate({left:’-1644px’},1000);
cachediv.data("numb","2");
}if(cache==2){
alert("end");
}
});
his(".leftb").click(function(){
his(".longline").animate({left:’0px’},1000);
cachediv.data("numb","0");
his(".bg2").fadeOut(0);
his(".bg1").fadeIn(1000);
his(".linex2,.linex2top").hide();
his(".linex1").fadeIn(1000);
his(".con1").fadeIn(1000);
his(".con2").fadeOut(0);
});
});
[/code]
这里我用jquery做了一个鼠标移动到按钮换背景的效果，很简单，自己看看就懂
还有一个就是我做了一个点击换div块位置的。我用的是animate动画方法。其实好像有更简单的方法。比如
scrollLeft()这个
当时没有像到这个，所以就用上面的了。下次再碰到我先试试这个。好像更好用。。
这里我还用到了缓存。去判断点击了几下，做相应的动作。我觉得这里可以改进，可是目前我还不知道怎么弄。
第三部分我用js做的鼠标移动到固定div块，切换相应的背景
点击左边的div块，右边相应的变化内容。这个效果在网络上很常见。我只是用我自己的方法写而已。
我的代码可能也是很简洁晚上，能实现功能就是了。大家不要扔鸡蛋。
[code lang=”js”]
var rac=jQuery.noConflict();
rac(document).ready(function(){
var zo1a = rac(".zo1 li");
zo1a.eq(0).css("background-position","0px 0px");
zo1a.eq(1).css("background-position","-292px -46px");
zo1a.eq(2).css("background-position","-292px -92px");
zo1a.eq(3).css("background-position","-292px -138px");
zo1a.eq(4).css("background-position","-292px -184px");
zo1a.eq(5).css("background-position","-292px -230px");
/*zo1a.eq(0).hover(function(){rac(this).css("background-position","0px 0px");},function(){rac(this).css("background-position","-292px 0px");});
zo1a.eq(1).hover(function(){rac(this).css("background-position","0px -46px");},function(){rac(this).css("background-position","-292px -46px");});
zo1a.eq(2).hover(function(){rac(this).css("background-position","0px -92px");},function(){rac(this).css("background-position","-292px -92px");});
zo1a.eq(3).hover(function(){rac(this).css("background-position","0px -138px");},function(){rac(this).css("background-position","-292px -138px");});
zo1a.eq(4).hover(function(){rac(this).css("background-position","0px -184px");},function(){rac(this).css("background-position","-292px -184px");});
zo1a.eq(5).hover(function(){rac(this).css("background-position","0px -230px");},function(){rac(this).css("background-position","-292px -230px");});*/
zo1a.children("a").css("color","#fff").css("font-weight","bold");
var zocon = rac(".right_left").children("div").hide();
zocon.eq(0).show();
zo1a.click(function(){
var i=0;
rac(this).each(function(){
i +=rac(this).index();
zocon.hide();
zocon.eq(i).show();
});
switch(i)
{
case 0:
zo1a.eq(0).css("background-position","0px 0px");
zo1a.eq(3).css("background-position","-292px -138px");
zo1a.eq(4).css("background-position","-292px -184px");
zo1a.eq(5).css("background-position","-292px -230px");
zo1a.eq(1).css("background-position","-292px -46px");
zo1a.eq(2).css("background-position","-292px -92px");
break
case 1:
zo1a.eq(0).css("background-position","-292px 0px");
zo1a.eq(2).css("background-position","-292px -92px");
zo1a.eq(3).css("background-position","-292px -138px");
zo1a.eq(4).css("background-position","-292px -184px");
zo1a.eq(5).css("background-position","-292px -230px");
zo1a.eq(1).css("background-position","0px -46px");
break
case 2:
zo1a.eq(0).css("background-position","-292px 0px");
zo1a.eq(3).css("background-position","-292px -138px");
zo1a.eq(4).css("background-position","-292px -184px");
zo1a.eq(5).css("background-position","-292px -230px");
zo1a.eq(1).css("background-position","-292px -46px");
zo1a.eq(2).css("background-position","0px -92px");
break
case 3:
zo1a.eq(0).css("background-position","-292px 0px");
zo1a.eq(3).css("background-position","0px -138px");
zo1a.eq(4).css("background-position","-292px -184px");
zo1a.eq(5).css("background-position","-292px -230px");
zo1a.eq(1).css("background-position","-292px -46px");
zo1a.eq(2).css("background-position","-292px -92px");
break
case 4:
zo1a.eq(0).css("background-position","-292px 0px");
zo1a.eq(3).css("background-position","-292px -138px");
zo1a.eq(4).css("background-position","0px -184px");
zo1a.eq(5).css("background-position","-292px -230px");
zo1a.eq(1).css("background-position","-292px -46px");
zo1a.eq(2).css("background-position","-292px -92px");
break
case 5:
zo1a.eq(5).css("background-position","0px -230px");
zo1a.eq(0).css("background-position","-292px 0px");
zo1a.eq(3).css("background-position","-292px -138px");
zo1a.eq(4).css("background-position","-292px -184px");
zo1a.eq(1).css("background-position","-292px -46px");
zo1a.eq(2).css("background-position","-292px -92px");
break
default:
};
});
});
[/code]
这里的js一大堆的switch就是做那个鼠标移动切换背景的！坑爹吧？。。。我用css很快就做好了。
第四部分：在同一个页面，点击加载不同的种族的效果。点击这里查看效果
具体代码描述看这里：http://shanmao.me/web/jquery/jquery-yong-load-xia-zai-shu-ju-hou-huan-cun-qi-lai
这里用的缓存技术很棒哦！
第5部分就是一个juqery结合cookie的效果。
实现点击关闭后刷新也不现实div
具体代码和解释请点击这里：
post at 2012-1-9