• 20120110 自己写的基于jquery的翻页效果


      是不是啊~~这么一转眼,四个月就没了~~~身为码农的我。哎。。  加油吧。。。

    正文:     一个好看的用jquery做的打招呼  (第一次自己写啊,里面的翻页效果,初级初级~~呵呵)

      

    首页 这个设计 哎~~给力 花钱的就是不一样~~

    文件已经打包 下载~~下面只是说jquery~~(是不是敲代码的记忆会下降?总感觉记不住东西哎~~)

    下面看看里面的jquery

    <script>
    <!--
    /*第一种形式 第二种形式 更换显示样式*/
    function setTab(m,n){
    var tli=document.getElementById("menu"+m).getElementsByTagName("li");
    var mli=document.getElementById("main"+m).getElementsByTagName("ul");
    for(h=0;h<tli.length;h++){
    tli[h].className=h==n?"hover":"";
    mli[h].style.display=h==n?"block":"none";
    }
    }
    //-->这就是导航的切换效果,循环判断下li的隐藏很显示
    </script>
    </head>

    <body>
    <script>
    $(function(){
    $(".wenben").focus(function(){
    $(this).css("color","black")
    })
    $(".wenben").blur(function(){
    $(this).css("color","#D1D1D1")
    })
    })这里是输入框的焦点聚集和离开的效果(文字框选中打字时候变色)
    var i = 0; 这玩意刚开始忘定义了,nnd 害我想了半天
    $(function(){
    $(".pz_greet_showpage div:first").addClass("addRed") 找到pz_greet_showpage 下的第一个div,添加红色(这是伴随翻页时候翻页变色的效果)
      $("#bb_next").click(function(){      这里就是开始点击下页的效果
                                      if(!$("#"+"bb"+i).is(":animated")){判断动画是否结束
    if(i==4)我这边是写了五个页所以这是4~~当用户点击到最后一页的时候,发生的行为是回到首页
    { i=0;
    $("#bb1").fadeIn(200);这个是jquery的淡入的一个函数
    $("#bb5").hide(); 页码5隐藏 页码1淡入
    }else{
    i=i+1;不在最后一页的时候每一次点击都发生下面的效果
    $("#"+"bb"+i).fadeOut(200);淡出
    $("#"+"bb"+(i+1)).fadeIn(200);
    $(".pz_greet_showpage div:first").removeClass("addRed")去掉第一个红色的背景 ,
    }
    }// if over
    $(".pz_greet_showpage").find("div").eq((i)).addClass("addRed")
    .siblings().removeClass("addRed") 每一次点击 div==i 的框框的背景增加上addRed的样式,同辈的元素则去掉
    }


    )

    $("#bb_pre").click(function(){ 这和上面的相反 呵呵~~懒人我一个

    if(!$("#"+"bb"+i).is(":animated")){
    if(i==0)
    { i=4;//点击四下到头
    $("#bb5").fadeIn(200);
    $("#bb1").hide();
    }else{
    $("#"+"bb"+(i+1)).fadeOut(200);
    $("#"+"bb"+i).fadeIn(200);
    i=i-1;
    $(".pz_greet_showpage div:first").removeClass("addRed");
    }
    }// if over
    $(".pz_greet_showpage").find("div").eq((i)).addClass("addRed")
    .siblings().removeClass("addRed")
    }


    )
    })

    </script>


                                                                                                                                                                                                       奢华的岁月~~~

  • 相关阅读:
    向MyEclipse添加Oracle数据库
    如何让搜索引擎抓取AJAX内容?
    XCode常用快捷键
    VMware Workstation 9上安装Mac OS X 10.8
    IOS学习第一篇——利用Xcode中的Interface Builder创建Hello World示例
    FM 101.7
    SqlServer游标操作
    添加COOKIE
    c#活动目录操作
    WCF服务调用方式
  • 原文地址:https://www.cnblogs.com/boyice/p/2318282.html
Copyright © 2020-2023  润新知