2012-01-10 自己写的基于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>

奢华的岁月~~~

转载于:https://www.cnblogs.com/boyice/archive/2012/01/10/2318282.html

2012-01-10 自己写的基于jquery的翻页效果相关推荐

15个最佳jQuery的翻页书效果的例子
在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlo ...
[Buzz.Today]2012.01.10
>> KIVY - Crossplatform framework for NUI http://kivy.org/planet/ http://the-space-station.com ...
使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...
推荐20款基于 jQuery CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
手机html5翻页效果代码,jquery html5手机端翻书效果_手指滑动书本翻页效果代码
特效描述:jquery html5手机端翻书手指滑动书本翻页效果.显现手机端翻书效果,支持手拖动翻页代码结构 1. 引入JS 2. HTML代码 function loadApp() { // ...
教你仿写 Flipboard 的翻页效果
前言自从清明放假之后,状态就一直一般般,(放假使我快乐,不要上学,我要放假!)导致更文也断了一段时间,鸽了好一段时间.痛定思痛,最近决定重新恢复更文.鉴于前段时间在学习扔物线大大 HenCoder ...
Delphi 10.4.2 轻松实现Android/IOS txt小说电子书阅读器应用APP翻页效果
Delphi 10.4.2是最新版本的跨平台本机应用开发工具,一套代码可编译到五个操作系统上:iOS.Android.Windows.macOS 和 Linux: 本代码仅仅数十行即可轻松实现Andr ...
vue实现上下滑动翻页_基于vue实现上下滑动翻页效果
18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...
html jquery 翻页效果代码,jquery实现的点击翻书效果代码
本文实例讲述了jquery实现的点击翻书效果代码.分享给大家供大家参考,具体如下: 这是自写一个翻书的Js效果,基于jquery-1.4.2.min.js插件实现,还正在完善中,希望大家能喜欢,我觉得 ...

2012-01-10 自己写的基于jquery的翻页效果

2012-01-10 自己写的基于jquery的翻页效果相关推荐

最新文章

热门文章