jquery链式调用
- jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：
$('#div1') // id为div1的元素 .children('ul') //该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent() //跳到ul的父元素，也就是id为div1的元素 .siblings() //跳到div1元素平级的所有兄弟元素 .children('ul') //这些兄弟元素中的ul子元素 .slideUp('fast'); //高度实际高度变换到零来隐藏ul元素
jquery动画
-
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。
$('#div1').animate({ width:300, height:300 },1000,swing,function(){ alert('done!'); }); -
参数可以写成数字表达式：
$('#div1').animate({ width:'+=100', height:300 },1000,swing,function(){ alert('done!'); });
尺寸相关、滚动事件
- 1、获取和设置元素的尺寸
width()、height() 获取元素width和height innerWidth()、innerHeight() 包括padding的width和height outerWidth()、outerHeight() 包括padding和border的width和height outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height - 2、获取元素相对页面的绝对位置 :
offse() - 3、获取可视区高度 :
$(window).height(); - 4、获取页面高度 :
$(document).height(); - 5、获取页面滚动距离
$(document).scrollTop();
$(document).scrollLeft();
- 6、页面滚动事件
$(window).scroll(function(){ ...... })
简单实例操作
-
1、层级菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素绝对位置</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var $pos = $('.pos'); var pos =$pos.offset(); var w = $pos.outerWidth(); var h = $pos.outerHeight(); $('.pop').css({left:pos.left+w,top:pos.top}); $pos.mouseover(function(){ $('.pop').show(); }) $pos.mouseout(function(){ $('.pop').hide(); }) }) </script> <style type="text/css"> .con{ width:600px; height:600px; margin:50px auto 0; } .box{ width:100px; height:100px; background-color:gold; margin-bottom:10px; } .pos{ margin-left:500px; } .pop{ width:100px; height:100px; background-color:red; position:fixed; left:0; top:0; display:none; } </style> </head> <body> <div class="con"> <div class="box"></div> <div class="box"></div> <div class="box pos"></div> <div class="box"></div> </div> <div class="pop"> 提示信息！ </div> </body> </html> -
2、选项卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .btns{ width:500px; height:50px; } .btns input{ width:100px; height:50px; background-color:#ddd; color:#666; border:0px; } .btns input.cur{ background-color:gold; } .contents div{ width:500px; height:300px; background-color: gold; display:none; line-height:300px; text-align:center; } .contents div.active{ display: block; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ $('#btns input').click(function() { $(this).blur(); // this是原生的对象 $(this).addClass('cur').siblings().removeClass('cur'); //$(this).index() 获取当前按钮所在层级范围的索引值 $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active'); }); }) </script> </head> <body> <div class="btns" id="btns"> <input type="button" value="tab01" class="cur"> <input type="button" value="tab02"> <input type="button" value="tab03"> </div> <div class="contents" id="contents"> <div class="active">tab文字内容一</div> <div>tab文字内容二</div> <div>tab文字内容三</div> </div> </body> </html> -
3、置顶菜单, 滚动到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>置顶菜单</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function() { var nowTop = $(document).scrollTop(); if(nowTop>200){ $('.menu').css({ position:'fixed', left:'50%', top:0, marginLeft:-480 }); $('.menu_pos').show(); } else{ $('.menu').css({ position:'static', marginLeft:'auto' }); $('.menu_pos').hide(); } if(nowTop>400){ $('.totop').fadeIn(); } else{ $('.totop').fadeOut(); } }); $('.totop').click(function() { $('html,body').animate({'scrollTop':0}); }); }) </script> <style type="text/css"> body{margin:0px;} .logo_bar{ width:960px; height:200px; background-color:#f0f0f0; margin:0 auto; } .menu,.menu_pos{ width:960px; height:50px; margin:0 auto; background-color:gold; text-align:center; line-height:50px; } .menu_pos{ display:none; } .down_con{ width:960px; height:1800px; margin:0 auto; } .down_con p{ margin-top:100px; text-align:center; } .totop{ width:50px; height:50px; background:url(images/up.png) center center no-repeat #000; border-radius:50%; position:fixed; right:50px; bottom:50px; display:none; } </style> </head> <body> <div class="logo_bar">顶部logo</div> <div class="menu">置顶菜单</div> <div class="menu_pos"></div> <div class="down_con"> <p style="color:red">网站主内容</p> <p>网站主内容</p> <p>网站主内容</p> <p>网站主内容</p> <p>网站主内容</p> </div> <a href="javascript:;" class="totop"></a> </body> </html> -
4、无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style type="text/css"> body,ul,li{margin:0;padding:0} ul{list-style:none;} .slide{ width:500px; height:100px; border:1px solid #ddd; margin:20px auto 0; position:relative; overflow:hidden; } .slide ul{ position:absolute; width:1000px; height:100px; left:0; top:0; } .slide ul li{ width:90px; height:90px; margin:5px; background-color:#ccc; line-height:90px; text-align: center; font-size:30px; float:left; } .btns{ width:500px; height:50px; margin:10px auto 0; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var $ul = $('#slide ul'); var left = 0; var deraction = 2; $ul.html($ul.html()+$ul.html()); var timer = setInterval(move,30); function move(){ left-=deraction; if(left<-500){ left = 0; } if(left>0){ left=-500; } $ul.css({left:left}); } $('#btn1').click(function(){ deraction = 2; }); $('#btn2').click(function(){ deraction = -2; }) $('#slide').mouseover(function(){ clearInterval(timer); }) $('#slide').mouseout(function(){ timer = setInterval(move,30); }) }) </script> </head> <body> <div class="btns"> <input type="button" name="" value="向左" id="btn1"> <input type="button" name="" value="向右" id="btn2"> </div> <div class="slide" id="slide"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html> -
5、手风琴效果
<!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <style> *{margin:0;padding:0;} body{font-size:12px;} #accordion{width:727px; height:350px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;} #accordion ul{list-style:none;} #accordion ul li{width:643px;height:350px; position:absolute; background:#FFF;} #accordion ul li span{display:block;width:20px; height:350px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;} #accordion ul li img{display:block; float:right;} .bar01{left:0px;} .bar02{left:643px;} .bar03{left:664px;} .bar04{left:685px;} .bar05{left:706px;} .bar01 span{background:#09E0B5;} .bar02 span{background:#3D7FBB;} .bar03 span{background:#5CA716;} .bar04 span{background:#F28B24;} .bar05 span{background:#7C0070;} </style> <script type="text/javascript"> $(function(){ $('#accordion li').click(function() { $(this).animate({left:$(this).index()*21}); $(this).prevAll().each(function(){ $(this).animate({left:$(this).index()*21}); }); $(this).nextAll().each(function(){ $(this).animate({left:(727-(5-$(this).index())*21)}); }); }); }) </script> <title>手风琴效果</title> </head> <body> <div id="accordion"> <ul> <li class="bar01"><span>非洲景色01</span><img src="images/001.jpg" /></li> <li class="bar02"><span>非洲景色02</span><img src="images/002.jpg" /></li> <li class="bar03"><span>非洲景色03</span><img src="images/003.jpg" /></li> <li class="bar04"><span>非洲景色04</span><img src="images/004.jpg" /></li> <li class="bar05"><span>非洲景色05</span><img src="images/005.jpg" /></li> </ul> </div> </body> </html>
