个人jquery作品

我初学(自学)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

具体代码和解释请点击这里:

用jquery实现层(div)关闭后刷新页面也不显示

 

post at 2012-1-9