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>
