JQuery特效(一)
jquery使用方法
jquery使⽤⽅法jQuery是⽬前使⽤最⼴泛的javascript函数库。
据统计，全世界排名前100万的⽹站，有46%使⽤jQuery，远远超过其他库。
微软公司甚⾄把jQuery作为他们的官⽅库。
对于⽹页开发者来说，学会jQuery是必要的。
因为它让你了解业界最通⽤的技术，为将来学习更⾼级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。
⼀、选择⽹页元素jQuery的基本设计和主要⽤法，就是"选择某个⽹页元素，然后对其进⾏某种操作"。
这是它区别于其他函数库的根本特点。
使⽤jQuery的第⼀步，往往就是将⼀个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。
选择表达式可以是CSS选择器：1 $(document)//选择整个⽂档对象2 $('#myId')//选择ID为myId的⽹页元素3 $('div.myClass')//选择class为myClass的div元素4 $('input[name=first]')//选择name属性等于first的input元素也可以是jQuery特有的表达式：1 $('a:first')//选择⽹页中第⼀个a元素2 $('tr:odd')//选择表格的奇数⾏3 $('#myForm :input')//选择表单中的input元素4 $('div:visible') //选择可见的div元素5 $('div:gt(2)')//选择所有的div元素，除了前三个6 $('div:animated')//选择当前处于动画状态的div元素⼆、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩⼩结果集：1 $('div').has('p'); //选择包含p元素的div元素2 $('div').not('.myClass'); //选择class不等于myClass的div元素3 $('div').filter('.myClass'); //选择class等于myClass的div元素4 $('div').first(); //选择第1个div元素5 $('div').eq(5); //选择第6个div元素有⼀些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动⽅法：1 $('div').next('p'); //选择div元素后⾯的第⼀个p元素2 $('div').parent(); //选择div元素的⽗元素3 $('div').closest('form'); //选择离div最近的那个form⽗元素4 $('div').children(); //选择div的所有⼦元素5 $('div').siblings(); //选择div的同级元素三、链式操作选中⽹页元素以后，就可以对它进⾏某种操作。
jquery实现图片翻转特效
效果图：CSS：html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,d el,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,tabl e,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }:focus { outline:0; }a:active { outline:none; }body { line-height:1; color:black; background:white; }ol,ul { list-style:none; }table { border-collapse:separate; border-spacing:0; }caption,th,td { text-align:left; font-weight:normal; }blockquote:before,blockquote:after,q:before,q:after { content:""; }blockquote,q { quotes:""""; }body {font:normal62.5%/1.5Helvetica,Arial,sans-serif;letter-spacing:0;color:#434343;background:#efefef url(../img/background.png)repeat top center;padding:20px0;position:relative;text-shadow:01px0rgba(255,255,255,.8);-webkit-font-smoothing: subpixel-antialiased;}#container {width:580px;padding:10px;margin:0auto;position:relative;z-index:0;}#example {width:600px;height:350px;position:relative;}#ribbon {position:absolute;top:-3px;left:-15px;z-index:500;}#frame {position:absolute;z-index:0;width:739px;height:341px;top:-3px;left:-80px;}#slides {position:absolute;top:15px;left:4px;z-index:100;}.slides_container {width:570px;overflow:hidden;position:relative;display:none;}.slides_container div.slide { width:570px;height:270px;display:block;}#slides.next,#slides.prev {position:absolute;top:107px;left:-39px;width:24px;height:43px;display:block;z-index:101;}#slides.next {left:585px;}.pagination {margin:26px auto0;width:100px;}.pagination li {float:left;margin:01px;list-style:none;}.pagination li a {display:block;width:12px;height:0;padding-top:12px;background-image:url(../img/pagination.png);background-position:00;float:left;overflow:hidden;}.pagination li.current a {background-position:0-12px;}.caption {z-index:500;position:absolute;bottom:-35px;left:0;height:30px;padding:5px20px020px;background:#000;background:rgba(0,0,0,.5);width:540px;font-size:1.3em;line-height:1.33;color:#fff;border-top:1px solid#000;text-shadow:none;}#footer {text-align:center;width:580px;margin-top:9px;padding:4.5px018px;border-top:1px solid#dfdfdf;}#footer p {margin:4.5px0;font-size:1.0em;}a:link,a:visited {color:#599100;text-decoration:none;}a:hover,a:active {color:#599100;text-decoration:underline;}.img_css{width:570px;height:270px;}JS：(function(a){a.fn.slides=function(b){return b=a.extend({},a.fn.slides.option,b),this.each(function(){function w(g,h,i){if(!p&&o){p=!0,b.animationStart(n+1);switch(g){case"next":l=n,k=n+1,k=e===k?0:k,r=f*2,g=-f*2,n=k; break;case"prev":l=n,k=n-1,k=k===-1?e-1:k,r=0,g=0,n=k;break;case"pagination":k=parseInt(i,10),l=a("."+b.pagin ationClass+" li."+b.currentClass+" a",c).attr("href").match("[^#/]+$"),k>l?(r=f*2,g=-f*2):(r=0,g=0),n=k}h==="fade"?b.crossfade?d.children(":eq("+k +")",c).css({zIndex:10}).fadeIn(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(" :eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+l+")",c).css( {display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1)}):d.childr en(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq(" +k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasin g)}):d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){a.browser.msie&&a(this).get(0).style. removeAttribute("filter")}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+k+")").css({left:r,display:"block" }),b.autoHeight?d.animate({left:g,height:d.children(":eq("+k+")").outerHeight()},b.slideSpeed,b.slideEasing,functi on(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"no ne",zIndex:0}),b.animationComplete(k+1),p=!1}):d.animate({left:g},b.slideSpeed,b.slideEasing,function(){d.css({ left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0 }),b.animationComplete(k+1),p=!1})),b.pagination&&(a("."+b.paginationClass+"li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+"li:eq("+k+")",c).addClass(b.currentClass))}}function x(){clearInterval(c.data("interval"))}function y(){b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeou t(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u)):x( )}a("."+b.container,a(this)).children().wrapAll('<div class="slides_control"/>');var c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h= b.start-1,i=b.effect.indexOf(",")<0?b.effect:b.effect.replace("","").split(",")[0],j=b.effect.indexOf(",")<0?i:b.effect.replace("","").split(",")[1],k=0,l=0,m=0,n=0,o,p,q,r,s,t,u,v;if(e<2)returna("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()}),a("."+b.next+", ."+ b.prev).fadeOut(0),!1;if(e<2)return;h<0&&(h=0),h>e&&(h=e-1),b.start&&(n=h),b.randomize&&d.randomize(),a( "."+b.container,c).css({overflow:"hidden",position:"relative"}),d.children().css({position:"absolute",top:0,left:d.ch ildren().outerWidth(),zIndex:0,display:"none"}),d.css({position:"relative",width:f*3,height:g,left:-f}),a("."+b.conta iner,c).css({display:"block"}),b.autoHeight&&(d.children().css({height:"auto"}),d.animate({height:d.children(":eq ("+h+")").outerHeight()},b.autoHeightSpeed));if(b.preload&&d.find("img:eq("+h+")").length){a("."+b.container,c ).css({background:"url("+b.preloadImage+") no-repeat 50% 50%"});var z=d.find("img:eq("+h+")").attr("src")+"?"+(newDate).getTime();a("img",c).parent().attr("class")!="slides_control"?t=d.children(":eq(0)")[0].tagName.toLowerCas e():t=d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){d.find(t+":eq("+h+")").fadeIn( b.fadeSpeed,b.fadeEasing,function(){a(this).css({zIndex:5}),a("."+b.container,c).css({background:""}),o=!0,b.slid esLoaded()})})}elsed.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()});b.bigTarget&&(d.ch ildren().css({cursor:"pointer"}),d.children().click(function(){returnw("next",i),!1})),b.hoverPause&&b.play&&(d.bind("mouseover",function(){x()}),d.bind("mouseleave",function() {y()})),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#" class="'+b.next+'">Next</a>')),a("."+b.next,c).click(function(a){a.preventDefault(),b.play&&y(),w("next",i)}),a(". "+b.prev,c).click(function(a){a.preventDefault(),b.play&&y(),w("prev",i)}),b.generatePagination?(b.prependPagin ation?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){a("."+b.paginationClass,c).append('<li><ahref="#'+m+'">'+(m+1)+"</a></li>"),m++})):a("."+b.paginationClass+" li a",c).each(function(){a(this).attr("href","#"+m),m++}),a("."+b.paginationClass+"li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+" li a",c).click(function(){returnb.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}),a("a.link",c).click(function() {returnb.play&&y(),q=a(this).attr("href").match("[^#/]+$")-1,n!=q&&w("pagination",j,q),!1}),b.play&&(v=setInterval(fu nction(){w("next",i)},b.play),c.data("interval",v))})},a.fn.slides.option={preload:!1,preloadImage:"/img/loading.gi f",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,p rependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed: 350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,aut oHeightSpeed:350,bigTarget:!1,animationStart:function(){},animationComplete:function(){},slidesLoaded:functio n(){}},a.fn.randomize=function(b){function c(){return Math.round(Math.random())-.5}return a(this).each(function(){var d=a(this),e=d.children(),f=e.length;if(f>1){e.hide();var g=[];for(i=0;i<f;i++)g[g.length]=i;g=g.sort(c),a.each(g,function(a,c){varf=e.eq(c),g=f.clone(!0);g.show().appendTo(d),b!==undefined&&b(f,g),f.remove()})}})}})(jQuery)$(function(){$('#slides').slides({preload: true,preloadImage: 'img/loading.gif',play: 5000,pause: 2500,hoverPause: true,animationStart: function(current){$('.caption').animate({bottom:-35},100);if (window.console && console.log) {// example return of current slide numberconsole.log('animationStart on slide: ', current);};},animationComplete: function(current){$('.caption').animate({bottom:0},200);if (window.console && console.log) {// example return of current slide numberconsole.log('animationComplete on slide: ', current);};},slidesLoaded: function() {$('.caption').animate({bottom:0},200);}});});HTML：<body><div id="container"><div id="example"> <div id="slides"><div class="slides_container"><div class="slide"><a href=""target="_blank"><img src="img/1.jpg" class='img_css'></a><div class="caption"style="bottom:0"><p>农民工人1</p></div></div><div class="slide"><img src="img/2.jpg"class='img_css'><div class="caption"><p>农民工人2</p></div></div><div class="slide"><img src="img/3.jpg"class='img_css'><div class="caption"><p>黑洞</p></div></div><div class="slide"><img src="img/4.jpg"class='img_css'><div class="caption"><p>嘿嘿的</p></div></div></div><a href="#"class="prev"><img src="img/arrow-prev.png"width="24"height="43" alt="Arrow Prev"></a><a href="#"class="next"><img src="img/arrow-next.png"width="24"height="43" alt="Arrow Next"></a></div><img src="img/example-frame.png"width="739"height="341"alt="Example Frame" id="frame"></div></div></body>。
jquery动感漂浮导航菜单代码分享
jquery动感漂浮导航菜单代码分享这是⼀款基于jquery实现动感漂浮导航菜单的特效代码，菜单可以上下浮动，动感⼗⾜，为⾃⼰的⽹站增加了活⼒，是⼀款⾮常实⽤的导航菜单特效源码。
运⾏效果图：点击：为⼤家分享的jquery动感漂浮导航菜单代码如下<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>jQuery Floating Menu</title><script type="text/javascript" src="js/jquery-1.3.1.min.js"></script><script type="text/javascript" src="js/jquery.easing.1.3.js"></script><script>$(document).ready(function () {//get the default top valuevar top_val = $('#menu li a').css('top');//animate the selected menu item$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});$('#menu li').hover(function () {//animate the menu item with 0 top value$(this).children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});},function () {//set the position to default$(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500});//always keep the previously selected item in fixed position$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});});});</script><style>#menu {list-style:none;padding:0;margin:0 auto;;height:70px;width:600px;}#menu li {float:left;width:109px;height:inherit;position:relative;overflow:hidden;}#menu li a {position:absolute;top:20px;text-indent:-999em;background:url(menu.png) no-repeat 0 0;display:block;width:109px;height:inherit;/* fast png fix for ie6 */position:relative;behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));}</style></head><body><br/><br/><br/><ul id="menu"><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li><li><a href="#">Item 4</a></li><li><a href="#">Item 5</a></li></ul><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>jQuery Floating Menu</title><script type="text/javascript" src="js/jquery-1.3.1.min.js"></script><script type="text/javascript" src="js/jquery.easing.1.3.js"></script><script>$(document).ready(function () {//get the default top valuevar top_val = $('#menu li a').css('top');//animate the selected menu item$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});$('#menu li').hover(function () {//animate the menu item with 0 top value$(this).children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});},function () {//set the position to default$(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500});//always keep the previously selected item in fixed position$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});});});</script><style>#menu {list-style:none;padding:0;margin:0 auto;;height:70px;width:600px;}#menu li {float:left;width:109px;height:inherit;position:relative;overflow:hidden;}#menu li a {position:absolute;top:20px;text-indent:-999em;background:url(menu.png) no-repeat 0 0;display:block;width:109px;height:inherit;/* fast png fix for ie6 */position:relative;behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));}</style></head><body><br/><br/><br/><ul id="menu"><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li><li><a href="#">Item 4</a></li><li><a href="#">Item 5</a></li></ul>如果⼤家还想深⼊学习，可以点击、进⾏学习。
jquery用法
jquery用法jQuery是一种广泛应用于网页开发的JavaScript库，它极大地简化了HTML 文档遍历、事件处理、动画设计等常见的客户端脚本操作。
下面是jQuery的一些常见用法:1.选择器: jQuery提供了许多选择器来获取HTML元素，如元素选择器、id选择器、class选择器、属性选择器、伪类选择器、层次选择器等。
以下是一些常见的选择器：•('#element')：选择具有特定ID的元素•('.class')：选择具有特定类的元素•('input[type=“text”]')：选择特定类型的表单元素•('div:first')：选择第一个div•('ul li').eq(2)：选择ul下的第二个li元素2.事件处理: jQuery使得添加和处理事件变得容易。
以下是一些常见的事件处理函数：•click()：单击元素时触发•dblclick()：双击元素时触发•mouseenter()：鼠标移入元素时触发•mouseleave()：鼠标移出元素时触发•keydown()：按下键盘上的键时触发3.属性: jQuery提供了完善的属性操作，可以改变和获取元素的属性，例如：•attr(): 获取或设置元素的属性值•removeAttr(): 删除元素的属性值•prop(): 获取或设置元素的属性值，与attr()不同之处在于property值不会随着属性值的改变而改变4.动画效果: jQuery内置了一些动画效果，可以使网页更加动态。
以下是一些常见的动画效果：•fadeIn()：淡入元素，即从不可见到可见•fadeOut()：淡出元素，即从可见到不可见•slideDown()：向下展开元素•slideUp()：向上收缩元素•animate()：通过改变元素的CSS属性来创建自定义的动画效果5. AJAX: jQuery内置了AJAX的方法，可以在不刷新网页的情况下从服务器获取数据。
JQ的动画与特效
JQ中的动画
显示与隐藏
显示与隐藏的切换： 方法：toggle() 示例： 功能描述：三个按钮调用上文中的三种toggle使用 形式，实现图片的切换效果。 实现代码：示例\toggle.html
JQ中的动画
滑动
slideDown()和slideUp()方法： slideDown()：将元素的高度向下增大，产生滑动效果。 可设定速度和回调函数。 slideUp()：将元素的高度向上减小，产生滑动效果。 可设定速度和回调函数。
谢谢！
JQ中的动画
显示与隐藏
动画版的显示隐藏示例： 方法：show(speed,[callback]) 、hide(speed,[callback]) 示例： 功能描述：通过show()方法，在页面中显示图片，同 时执行一个回调函数，改变边框样式， 点击图片时可以将其隐藏。 实现代码：示例\动画版的show与hide.html
JQ中的动画
淡入淡出
淡入淡出示例： 方法： fadeIn()和fadeOut() 示例： 功能描述：使用动画效果进行淡入淡出。 实现代码：示例\fadeIn和fadeOut淡入淡出.html
JQ中的动画
自定义动画
animate()方法： animate()可以让用户自定义动画，语法格式如下： animate(params,[duration],[easing],[callback]) ：
params表示用于制作动画效果的属性和值的集合； duration表示动画的速度，有三种可选项：slow、normal和 fast，也可手工指定数字，单位毫秒 easing为动画插件使用 callback为回调函数
JQ中的动画
自定义动画
自定义动画示例： 方法： animate(params,[duration],[easing],[callback]) 示例： 功能描述：使用动画效果进行淡入淡出。 实现代码：示例\自定义动画.html
Javascript特效代码大全(420个)
Javascript特效代码大全(420个)Javascript 特效代码├Cookie脚本├随访问次数变提示├集成Cookies ├使窗口仅弹出一次├签名提示程序├记录上次登录时间├自由控制打开窗口├记录页面修改时间├检测IE去过站点├离开时显示信息├弹出窗口自动关闭├离开页面弹出窗口├进入时显示信息├离开启动收藏夹├链接确认按钮├点击加入收藏夹├记录页面更新时间├页面载入等待├打开硬盘驱动器├设置默认首页├输入框测试警告├链接弹出警告框├关闭窗口链接├显示器分辨率检测├按分辨率导航├定制打开的窗口├控制窗口打开日期├打开窗口居中├输入框控制├查看输入框内容├显示所有链接├限时载入页面├输入框神秘消失├检测访问来源├回退的页面数├危险的链接├倒计时载入页面├自由打开窗口├检测IE所装插件├检测点链接速度├检测健康程度？├页面中打开窗口├特殊的Bookmark ├窗口打开关闭程序├随机显示一些数字├页面自动打开├进入弹出收藏夹├自动显示是否更新├浏览器详细报告├页面背景类├背景向下移动├背景不停变换色彩├使页面产生百叶窗├颜色代码英文集├自已选择背景颜色├背景颜色安全测试├颜色选择器├背景图片居中├页面转换特效├礼花背景├链接驱动背景色├手动调节背景色├鼠标使链接变色├跟随鼠标旋转背景├背景调色板├RGB颜色转换├按钮驱动背景├颜色选择器├精彩的变色文字├颜色选择器├闪烁的霓虹灯├星星从背景中飞出├背景向下移动(二) ├动态选择背景色├下雨├按钮驱动背景变化├按钮使背景闪烁├背景随机显示├背景快速闪烁├自己选择背景图片├文本特效类├随机信息显示├随机文本链接├所有链接不停变色├鼠标经过文字变色├随日期变换文本├文字颜色渐变脚本├文本自动输出├文字特效├文字不停变色├字符连续消隐├公告栏├文字动态变化├字符飞舞├文字特殊显示├文字从旁边出现├文本从右向左输出├消息显示器├随机跳出信息窗口├随机产生乱码├输入框各种效果├文字从左到右出现├信息逐条出现├选择显示文字方式├文字来回反弹├文字逐个出现├电子管显示├文字循环出现├可调节速度的撞击├逐字出现的信息条├自由控制文字输入├一段彩色的文字├可调节的输出形式├文字同时输出├调节文字移动形式├文字飘动输出├各种形式文字输出├文字逐个闪烁├文字上下跳动├文字变色逐个出现├点击改变文字├文字段任意移动├文字连续闪烁├点击出现链接├状态栏条├链接在右面打开├文字胡乱跳动├文字段到处飞舞├按钮驱动文字渐变├文字向左移动├文字弯曲变形├双重输入文字├综合字符集├文字从小变大├导航菜单类├树形菜单(一) ├树形菜单(二) ├树形菜单(三) ├页面搜索类├站内搜索脚本(一) ├站内搜索脚本(二) ├站内搜索脚本(三) ├站内搜索脚本(四) ├站内搜索脚本(五) ├站内搜索脚本(六) ├内部搜索脚本├时间日期类├任意位置显示时钟├倒计时代码生成器├八种风格时间显示├显示登陆时间├日历生成器├退出显示访问时间├一款特酷的时钟├全中文日期显示├纯JavaScript时钟├距离某天时间├显示特殊节日脚本├时钟加在背景上├Form 中的时钟├带开关的Form时钟├距离某日时间├记录几天后的日期├Form栏特全时钟├全球时间表├随时间变化提示├特酷的倒影时钟├特酷的日期显示├2000年日历├时间日期转换├时间跳动器├自己创建日历├生日提醒器├计算任一天星期几├离开某一天日期├按钮上的时间├Form中时间显示├检测星期几并导航├最近的星期天├全日制时钟├用图片显示日期├详细计算你的年龄├时间按钮提醒├计算出生时间├页面完成时间├页面导航类├显示站点信息导航├任意显示导航信息├动态导航脚本├下拉式导航菜单├静止导航菜单├静止图片脚本├文本静止不动├信息框显示链接├友情链接导航框├目录式导航菜单├重要信息说明脚本├滚动链接导航├图片代替按钮脚本├打开窗口等待├静态导航菜单├层叠式导航菜单├隐现导航脚本├页面内部导航├图片代替按钮脚本├打开窗口等待├滚动的超级链接├先后点击链接├按钮选择导航├不停变化的导航├随机的导航├链接窗口说明├同时打开多个链接├打开链接显示信息├又一动态导航脚本├Form框中导航├屏幕翻滚导航├带说明的导航├任意多友情链接├链接自动说明脚本├开始选择导航├链接处出现图标├导航菜单选择├按钮特效类├跑马灯式链接说明├窗口打开关闭├浮动的链接说明├链接处变换色彩├变换链接色和底色├按顺序点击链接├查看源代码按钮├前进后退按钮├按钮定制打开窗口├按钮打开全屏窗口├自由打开各种窗口├按钮回到默认首页├各种用途的按钮├频道方式打开窗口├按钮特殊效果├浏览器全屏显示├死机程序├跳出说明窗口├关不掉的跳出框├循环的警告框├检测页面来源├屏幕抖动脚本├页面被冻结├代码生成类├动态按钮代码生成├浏览器检测生成器├BrowserCheck脚本├彩色文字生成器├分割Frame的代码├主页制作器├综合类├加密页面源代码├访问时间限制├给页面加“热键” ├浏览器毁灭者├文本中首字母大写├查看某网址源代码├文本中首字母大写├综合的搜索引擎├搜索引擎登记├下载记时器脚本├随机播放背景音乐├随日期播放音乐├E-mail表单递交├Jsp容错脚本├计算器(一) ├计算器(二) ├计算器(三) ├网页调用另外网页├FTP页面登录├根据浏览器用CSS ├输入框的新属性├数字排序├发信(一) ├发信(二) ├发信(三)├发信(四) ├发信(五) ├发信(六) ├E-mail递交├元素周期表├显示人口数量├计算平面两点距离├页面自动刷新├又一个容错脚本表├打开多个搜索引擎├可选择的页面信息├直接页面显示器├MIDI音乐选择├页面特效类├字符从空中掉下来├打字机式输出文字├滚动显示的LOGO ├文本自动滚屏├控制别人输入字数├文本上下弹跳├特酷消隐字体├文本框栏目介绍├旋转变换文字├特酷的文本输出├页面自动滚屏效果├炽热的文字特效├鼠标响应文字变色├隐藏显示字符脚本├鼠标响应图片变化├星星满天闪烁├打开页面颜色渐变├页面打开特效├英文名字变日文├页面上下滚动├页面缩小特效├页面左右分开├特殊的HTML字符├图片满天飞舞├页面掉下去├页面向右滚屏├综合页面特效├图形图象类├禁止图片下载├图片隐现效果├随机显示图片├图片变形扭曲├雪景├图片渐渐出现├相片选择器├图形循环渐显├图形左右晃动├图形选择脚本├图片翻滚导航├图片定期消失├自由控制图片下载├自由设定图片大小├图片响应鼠标变换├图片自由运动├图片大小变换├图片随意移动├自动显示图片属性├图片循环显现├图片变化效果├随机显示banner ├鼠标驱动图片变化├图片不停闪烁├鼠标事件类├图片跟随鼠标├鼠标响应新页面├禁用鼠标左右键├鼠标控制窗口开关├鼠标点击效果├禁用右键自动导航├鼠标激活警告框├鼠标跟踪器├右键自动链接页面├跟随鼠标的星星├右键打开收藏夹├字符围绕鼠标├各种形状的鼠标├跟随鼠标的字符├非图片鼠标跟踪器├显示链接特征├改变链接属性├显示鼠标坐标├随鼠标的彩色字符├状态栏特效├状态栏跑马灯脚本├文字从右弹出├文字从左依次弹出├文字从右到左移动├文字快速依次弹出├文字组合弹出├文字不停闪烁├状态栏显示链接├title显示日期├文字来回出现├状态栏固定信息├状态栏特殊显示├虚拟格式化硬盘├状态栏显示输入├title显示时间├病毒入侵演示├文字从前后出现├文字慢慢出现├状态栏特殊效果├文字从中间出现├文字分解出现├输入字符在状态栏├文字多处出现├Title特效├调节文字显示速度├状态栏标准时钟├密码类├控制他人进入页面├用来实现会员制度├密码保护相应页面├自己编制密码表├密码保护页面(一)├游戏类├一款流行游戏├双人小游戏├动脑小游戏├模拟跳舞游戏├测试点击速度├模拟太空飞行├一个输赢游戏├测试打字速度├测试心算能力├选择路线游戏├射击小游戏├字符在FORM中坠落├堆积游戏├21点游戏├猜数的大小├找相同的图片├在线测试类├在线考试脚本(一) ├在线考试脚本(二) ├在线考试脚本(三) ├在线考试脚本(四) ├在线考试脚本(五) ├在线考试脚本(六) ├测试警告├技巧类├两个脚本同时调用├加快图片显示├页面自动刷新├模拟跳舞游戏├光标选择输入框├更方便的单选框├输入框无法输入├HTML加入jsp ├自动跳出Frame ├禁止页面加入缓存├制作分析统计器├密码输入框的问题├屏蔽HTML(说明) ├输入框特殊效果。
Jquery特效大全
1.导航类 (5)(1)Horizontal accordion: jQuery (5)(2)jQuery-Horizontal Accordion (5)(3)jQuery plugin: Accordion (5)(4)Accordion Menu script (6)(5)模仿ext的tab选项卡 (6)(6) (8)（7）De-Constructing Accordion and Hover Effects with jQuery (8)（8）导航到页内指定位置 (9)（10） Sexy Drop Down Menu w/ jQuery & CSS (9)（11） A Different Top Navigation (10)（12）Sliding Jquery Menu Tutorial (10)（13）Animated Drop Down Menu with jQuery (10)14. jQuery UI错误！未找到索引项。
Potato Menu (10)15. Make a Mega Drop-Down Menu with jQuery (11)（16）Superfish v1.4.8 – jQuery menu plugin by Joel Birch (11)（17）jQuery (mb)Menu 2.7 (11)（18） jQuery File Tree (12)19.jQuery & CSS Example – Dropdown Menu (12)20. Reinventing a Drop Down with CSS and jQuery (12)21. Simple jQuery Dropdowns (13)22. Styling Drop Down Boxes with jQuery (13)23. jQuery iPod-style Drilldown Menu (13)24. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready (14)25. mcDropdown jQuery Plug-in v1.2.07 (14)26. jQuery Drop Line Tabs (14)27. Cut & Paste jQuery Mega Menu (15)28. jdMenu Hierarchical Menu Plugin (15)2.消息提示类 (15)（1）Facebox (15)（2）SimpleModal (16)（3）jTip (16)（4）BetterTip (17)（5）clueTip (17)（6）jQuery lightBox plugin (17)（7）jQuery Impromptu (18)（8）jQuery.UI Messenger"Outlook like message notification Widget (18)（9）FancyBox (18)（10）Coda Popup Bubbles (19)（11）jGrowl (19)（12）jqWindowsEngine (20)（13）jQuery Alert Dialogs (20)（14）BeautyTips (21)（15）Facebook/Xiaonei 风格模态框 (21)3.图片展示类 (22)(1)imgAreaSelect (22)(3)Easy News (23)(4)jQZoom (24)(5)jCarousel Lite (24)(6)jCarousel (25)(7)Spacegallery-Jquery (25)(8)jQuery Slider Gallery (25)(9)jQuery Cycle Plugin (26)(10)Zoomimage (26)(11)prettyPhoto (27)(12)ThickBox (28)(13)Galleria (28)(14)jQuery Flash Plugin (29)(15)jQuery.SerialScroll (29)(16)InnerFade (30)(17)NyroModal (30)(18)CrossSlide (31)(19)Magnify (31)(20)Img Notes (32)(21)FancyZoom (32)(22)Jcrop (33)(23)Galleriffic (33)(24)Image Upload and Auto Crop (34)(25)prettyGallery (34)(26)jQuery.popeye (34)(27)s3Slider (35)(28)Pirobox (36)(29)Simple Controls Gallery (36)(30)Agile Carousel (36)(31)jQuery Plugin-Page Peel (37)(32)Easy Slider (37)(33)imgPreview (38)(34)Jquery Fade In.Fade Out (38)(35)Captify (38)(36)jParallax (39)(37)jQuery---运用图片预加载技术打造幻灯片 (40)(38)jQuery pageSlide (40)(39)Creating a Slick Auto-Playing Featured Content Slider (41)(40)Portfolio Layout Idea Using jQuery (41)(41)jQuery---图片先模糊后清楚 (42)(42)使用jQuery实现网页报纸 (42)(43)jQuery购物网站产品展示. (42)(44)Gallerific (43)(45)ZoomImage (44)(46)EasySlider (44)(47)The Slider from Barack Obama’s website (45)(48)CodaSlider (45)(50)Beautiful Slider 热点图书： (46)(51)LoopedSlider (46)(52)SpaceGallery (47)(53)jQuery Popeye (47)(54)Noobslide 热点图书： (48)(55)Accessible News Slider 热点图书： (48)(56)SmoothGallery 热点图书： (48)(57)jQuery Multimedia Portfolio (49)(58)s3Slider (49)(59)fxMarquee (49)(60)商品放大镜效果 (50)(61)PageSlide (51)64.不错的图片分类展示或者文字展示效果 (53)67.利用z-index做的图片展示效果 (54)4.自动填充类 (54)（1）AutoComplete-JQuery (54)（2）Facebook like Autocomplete (55)（3）jQuery Autocomplete Mod (55)（4）jqac (55)（5）jQuery Tag Suggestion (55)（6）Autocomplete-jQuery ajax (55)（7）jQuery.Suggest (56)（8）Autocomplete- jQuery plugin (56)（9）jQuery plugin: Autocomplete (56)（10）jSuggest (56)（11）jQuery Live Ajax Search Plug-in (57)（12）ddcombobox (57)5.分页类 (59)（1）jQuery Pagination (59)（2）pager jQuery plug-in (59)（3）JQuery Pager (60)6.编辑器类 (60)（1）jwysiwyg (60)（2）Damn Small Rich Text Editor (60)(3)xhEditor (61)7.表格类 (61)(1)Flexigrid (61)(2)Ingrid (61)(3)jQuery Grid (62)(4)tableHover (62)(5)JQuery.Resizer (63)(6)tablesorter (63)(7)csv2table (63)(8)tableFormSynch (64)8.色彩选择器类 (64)(1) Farbtastic (64)9.数据验证类 (66)1. jQuery plugin: Validation (66)2. Masked Input Plugin (66)3 jVal (67)10.报表类 (67)1 (67)2. Flot (67)3. jQchart (68)4 jquery.sparkline (68)5. jQuery Google Charts (演示地址) (69)6. jqPlot (演示地址) (69)11.上传类 (69)1. jqUploader (69)2. jQuery Multiple File Upload Plugin (69)3. jQuery: Ajax file upload (69)12.日期时间类 (70)1. jQuery UI Datepicker (70)2. Date Picker (70)3. Date Range Picker (70)13.圆角效果类 (71)1. jQuery Corner (71)2. JQuery Curvy Corners (71)3. jQuery Corner (72)4. jQuery Corners (72)14.评价类 (73)（1）Creating a Dynamic Poll with jQuery and PHP (73)（3） jQuery Ajax Rater Plugin (74)4. Star Rating widget (74)5. jQuery Star Rating Plugin (74)6. Ajax Poll (74)7.jQuery 投票调查组件 (75)15.虚拟键盘类 (76)1 (76)2.jQuery 虚拟键盘 (77)3.Virtual keyboard 虚拟键盘 (77)16.Form元件扩展 (77)（1）bobox (77)（2）jquery button:对按钮的扩展 (78)(3)ContextMenu (78)（4） (78)（5）在链接旁边加一个小图标效果 (79)6 jNice (79)7. jQuery calculate (79)8. jQuery select box (79)9. prettyCheckboxes (80)12. mcDropdown jQuery Plug-in (81)13. Create A Slider From A Select Box (81)14. TextArea Resizer (81)15. jQuery MultiSelect (82)16. Editable(jQuery Editable Plugin) (82)17. NicejForm (82)18. jScrollPane (83)19.利用jQuery制作类似skype的按钮效果. (83)20.jCheckbox: (83)（21）jQuery asmSelect 感谢博览群书友情提供 (84)17.游戏类 (84)1.连连看 (84)18.代码高亮类 (84)1. beautyOfCode (演示地址) (84)2. Chili (演示地址) (84)3. Highlight plugin (演示地址) (85)1.导航类(1)Horizontal accordion: jQuery基于jQuery开发，非常简单的水平方向折叠控件。
jquery教程
JQUERY教程JQUERY简介jquery库的新特性：jquery是一个javascript的函数库，它包含以下特性：html元素选取、html元素操作、css操作、html事件函数、javascript特效和动画、html dom遍历和修改、ajax、utilites 向页面中添加jquery库。
Jquery库位于一个javascript文件中，其中包含了所有的jquery 函数，可以通过以下标记把jquery添加到页面中：注意：<script>标签应该位于页面的<head>部分Jquery的实例：hide()函数，隐藏了html中所有的<p>标签效果：页面会出现三段字和一个按钮，当点击按钮时，<p>标签里边的字将自动隐藏库的代替：Google和Microsoft对jquery的支持都很好。
如果不从自己的计算机上加载jquery库，可以从Google和Microsoft加载CDNjquery的核心文件使用Google的CDN：使用Microsoft的CDN：Jquery语法通过jQuery，您可以选取（查询，query）HTML 元素，并对它们执行“操作”（actions）。
Jquery语法实例$(this).hide(); 演示jquery hide（）函数，隐藏当前的html元素$(“#this”).hide(); 演示jquery hide（）函数，隐藏id为test的元素$(“p”).hide(); 演示jquery hide（）函数，隐藏所有p标签元素$(“.this”).hide(); 演示jquery hide（）函数，隐藏class为test的元素Jquery语法基础语法是$(selector).action();美元符号定义jquery，选择符（selector）查询和查找html元素，jquery的action（）执行对元素的操作例如：$(“p”),hide(); 隐藏所有段落$(“p.test”).hide(); 隐藏所有class为test的段落等提示：jQuery使用的语法是XPath与CSS 选择器语法的组合。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
(2)jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion。
(3)jQuery plugin: Accordion用于创建折叠菜单的jQuery插件。
(4)Accordion Menu script基于jQuery开发的可折叠菜单。
(5)模仿ext的tab选项卡TabPanel(选项卡组件)参数说明renderTo<渲染到某容器string | jQuery object | NULL>将选项卡组件渲染到某容器，参数类型可以为字符串，也可以为jQuery所加载的对象，如果为声明该参数，组件默认的承载容器为BODY。
items<选项卡元素集合array>选项卡组件渲染后就会显示的选项卡元素集合，具体参数请查看选项卡元素。
width<宽度string | number>选项卡组件的总宽度，默认400px。
height<高度string | number>选项卡组件中页面显示层的高度，默认300px。
border<是否显示边框string>嵌套显示选项卡时，会出现重复边框的情况，影响美观，将border设置为”none”，则可以避免，默认显示边框，不接受除”none”之外的参数值。
active<渲染后默认激活哪个选项卡元素number>下标以0为开始，默认为0。
maxLength<最多显示几个选项卡元素number>-1为无限，默认为-1。
tabs<获得选项卡组件所有的选项卡元素return array>可根据需要获得选项卡组件的所有选项卡元素。
公共方法addTab(添加一个选项卡元素object)动态向选项卡组件中添加一个选项卡元素。
flush(刷新选项卡元素的内容string | number)将选项卡元素的内容刷新，参数可以为选项卡元素的ID或下标。
show(显示选项卡元素string | number)显示制定选项卡元素，参数可以为选项卡元素的ID或下标。
Kill(关闭选项卡元素string | number)关闭选项卡元素，参数可以为选项卡元素的ID或下标。
getTabsCount()<获得选项卡元素数量return number>getTitle(获得选项卡元素的标题string | number) <return string>setTitle(设置选项卡元素的标题string | number, string)getContent(获得选项卡元素的内容string | number) <return string>setContent(设置选项卡元素的内容string | number, string)getDisable(选项卡元素是否禁用string | number) <return boolean>setDisable(设置选项卡元素是否禁用string | number)getCloseable(选项卡元素是否可关闭string | number) <return boolean>setCloseable(设置选项卡元素是否可关闭string | number, boolean)getActiveTab()<获得被激活的选项卡元素return object>使用方法页面引入jQuery.js、TabPanel.js、Fader.js、TabPanel.cssnew TabPanel({renderTo:'tabs',width: '100%',height: '500px',active: 0,items: [{title:'工作中心',html:'<iframe width="100%" height="100%" frameborder="0"></iframe>',closable: false}]});TabPanel item(选项卡元素)参数说明id<元素IDstring>必须唯一，或者不设置该参数，否则将无法添加到选项卡组件中，默认自动生成。
title<元素标题string>可以动态设置。
closeable<是否可关闭boolean>true可关闭，false不可关闭，默认为true。
TabPanel.rar (22.94 kb)(6)（7）De-Constructing Accordion and Hover Effects with jQuery（8）导航到页内指定位置Automatically generate table of contents using jQuery（9）“Outside the Box”Navigation with jQueryThis tutorial will cover a few ways to do just that with OS X style docks and stacks navigation.（10） Sexy Drop Down Menu w/ jQuery & CSSIn this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.（11） A Different Top Navigation（12）Sliding Jquery Menu Tutorial（13）Animated Drop Down Menu with jQuery14. jQuery UI错误！未找到索引项。
Potato Menu15. Make a Mega Drop-Down Menu with jQuery（16）Superfish v1.4.8 –jQuery menu plugin by Joel Birch（17）jQuery (mb)Menu 2.7（18） jQuery File Tree19.jQuery & CSS Example –Dropdown Menu20. Reinventing a Drop Down with CSS and jQuery21. Simple jQuery Dropdowns22. Styling Drop Down Boxes with jQuery23. jQuery iPod-style Drilldown Menu24. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready25. mcDropdown jQuery Plug-in v1.2.0726. jQuery Drop Line Tabs27. Cut & Paste jQuery Mega Menu28. jdMenu Hierarchical Menu Plugin2.消息提示类（1）FaceboxFacebox 是一个基于jQuery，Facebook-style的lightbox。
能够展示示images，divs或者整个远程页面。
Facebox（2）SimpleModalSimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。
SimpleModal（3）jTipjTip一个利用jQuery开发的提示工具。
jTip通过HttpXMLRequest获取内容。
用法简单，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以。
jTip（4）BetterTip一个可以自定义Tooltip的jQuery插件。
基于jTip，但比它来得更加灵活。
BetterTip（5）clueTipclueTip这个jQuery插件方便您为链接或其它元素添加Tooltip功能。
当链接包括title属性时，它的内容将变成clueTip的标题。
clueTip中显示的内容可以通过Ajax获取，也可以从当前页面中的元素中获取。
clueTip（6）jQuery lightBox plugin一个简单，强大基于jQuery开发的lightBox控件。
jQuery lightBox plugin（7）jQuery Impromptu用于创建模式对话框，确认对话框，输入内容对话框的jQuery插件。
jQuery Impromptu（8）jQuery.UI Messenger"Outlook like message notification Widget 这个jQuery.UI控件类似于Messenger"Outlook消息弹出提醒框。
jQuery.UI Messenger"Outlook like message notification Widget （9）FancyBox基于jQuery开发的Lightbox插件。
支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该Lightbox除了能够展示图片之外，还可以展示iframed内容，通过CSS自定义外观。
FancyBox（10）Coda Popup Bubbles采用jQuery开发，类似“冒泡”效果的提醒弹出框。
Coda Popup Bubbles（11）jGrowljGrowl用于制作消息弹出框的jQuery插件。
产生效果的类似于Mac OSX系统中Growl事件通知框架。
jGrowl（12）jqWindowsEngine这个jQuery插件能够帮助你轻松创建Ajax Windows。
jqWindowsEngine（13）jQuery Alert Dialogs这个jQuery插件能够替换JavaScript提供的alert()、confirm()和prompt()功能。
支持利用CSS自定义对话框外观。
jQuery Alert Dialogs （14）BeautyTips BeautyTips是一个jQuery Tooltip插件.BeautyTips。