标签：class 导航栏 滚动 spl set jquery代码 ... body text
主要内容：
1、jQuery的位置属性及实例
（1）位置属性
（2）实例 --- 仿淘宝导航栏
2、jQuery的筛选方法及实例
（1）筛选方法
（2）实例一：嵌套选项卡
（3）实例二：小米官网滑动
（4）实例三：焦点轮播图
（5）实例四：动态实现轮播图
一、jQuery的位置属性及实例
1、位置属性
HTML部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery的位置属性</title> <style type="text/css"> *{ padding:0; margin:0; } #box{ position:relative; width:300px; height:200px; border:1px solid darkorange; padding:10px 5px; } p{ position:absolute; left: 50px; top:50px; } .box2{ width:200px; height:200px; margin:100px auto; border:1px solid mediumspringgreen; } </style> </head> <body style="height:2000px;width:2000px"> <div id="box"> <p>我是一个小小段落</p> </div> <button id="btn">动画</button> <div class="box2"></div> </body> <!-- 此处为jquery代码 --> </html>
jQuery部分
<script type="text/javascript"> $(document).ready(function(){ // 1、获取匹配元素的相对父元素的偏移 position console.log($("p").position().left); // 50 console.log($("p").position().top); // 50 var offsetTop = $("p").position().top + 50 +"px"; var offsetLeft = $("p").positon().left + 30 + "px"; $("#btn").click(function(){ $("p").animate({top:offsetTop,left:offsetLeft},1000); }) // 2、获取匹配元素，相对滚动条卷起的位置信息 scrollTop scrollLeft $(document).scroll(function(){ console.log("滚动条向右:"+$(document).scrollLeft()); console.log("滚动条向下:"+$(document).scrollTop()); }); // 3、offset 获取匹配元素在当前视图的相对偏移（浏览器） console.log($(‘#box‘).offset()); //{top: 0, left: 0} console.log($(‘#box‘).offset().top); console.log($(‘#box‘).offset().left); console.log($(‘#btn‘).offset().top); // 4、获取元素的宽高 console.log("宽"+$("#box").width()); // 300 console.log("高"+$("#box").height()); // 200 // 5、设置宽高 $("#box").width(600); // 6、获取内部宽度和外部宽度 // innerWidth:width + 2*padding 不包括边框，获取匹配元素的内部宽度 console.log("内部宽度："+$("#box").innerWidth()); // 610 // outerWidth:width + 2*padding+2*boder 获取的匹配元素的外部宽度 console.log("外部宽度::"); }) </script>
未完，待续...
标签：class 导航栏 滚动 spl set jquery代码 ... body text
原文地址：https://www.cnblogs.com/schut/p/9568926.html
