许久未分享博客，或许已生疏。

闲来无事，

分享几个jQuery简单实用的效果案例

不喜勿喷...

1、页面常用的返回顶部

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>返回顶部</title>
  6.     <style type="text/css">
  7.          *{
  8.              margin: 0;
  9.              padding: 0;
  10.          }
  11.          .wrap{
  12.              height: 2000px;
  13.          }
  14.          .gotop{
  15.              display: block;
  16.              width: 32px;
  17.              height: 32px;
  18.              background-color: red;
  19.              text-align: center;
  20.              text-decoration: none;
  21.              font-size: 14px;
  22.              font-weight: bold;
  23.              color: white;
  24.              line-height: 32px;
  25.              position: fixed;
  26.              right:50px;
  27.              bottom:50px;
  28.              opacity: 0;
  29.              /*top: 500px;*/
  30.          }
  31.     </style>
  32. </head>
  33. <body>
  34.       <div class="wrap">
  35.              <a href="###" class="gotop">TOP</a>
  36.       </div>
  37.       <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
  38.       <script type="text/javascript">
  39.         $(function(){
  40.                  // 当滚动条滚动大于200时出现，未大于，消失
  41.                  $(window).scroll(function(){
  42.                      if($(document).scrollTop()<200){
  43.                          // alert("kk");
  44.                          $(".gotop").stop().animate({
  45.  
  46.                                   opacity: 0
  47.  
  48.                          },1000)
  49.                      }
  50.                      else{
  51.                          $(".gotop").show().stop().animate({
  52.  
  53.                                   opacity: 1
  54.  
  55.                          },1000)
  56.                      }
  57.                 })
  58.              // 返回顶部
  59.              $(".gotop").on("click",function(){
  60.                    $("html,body").animate({
  61.                           scrollTop:0
  62.                    },1000)
  63.              })
  64.         })
  65.       </script>
  66. </body>
  67. </html>

2、tab切换 on

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>jQuery tab切换</title>
  6. 	<style type="text/css">
  7.         *{
  8.         	margin:0;
  9.         	padding:0;
  10.         }
  11.         .wrap{
  12.         	margin-left: 50px;
  13.         	margin-top: 50px;
  14.         }
  15.         /*清浮动---clearfix*/
  16.         .clearfix {
  17. 			*zoom: 1;
  18. 		}
  19. 		.clearfix:after {
  20. 			content: "";
  21. 			clear: both;
  22. 			display: block;
  23. 			height: 0;
  24. 			font-size: 0;
  25. 			visibility: hidden;
  26. 		}
  27.         .blist {
  28.         	border:1px solid #d9d9d9;
  29.         	width: 275px;
  30.         	height: 32px;
  31.         }
  32.         .blist  li:first-child{
  33.         	border-left: none;
  34.         }
  35.         .blist  li{
  36.               list-style: none;
  37.               width: 68px;
  38.               height: 32px;
  39.               border-left:1px solid #d9d9d9;
  40.               font-size: 14px;
  41.               font-family: "楷体";
  42.               line-height: 32px;
  43.               text-align: center;
  44.               float: left;
  45.               /*鼠标样式改变为一个手*/
  46.               cursor: pointer;
  47. 			  /*字体免选中*/
  48. 			  -webkit-user-select: none;
  49.  
  50.         }
  51.         .blsit-list{
  52.         	width: 275px;
  53.         }
  54.         .blsit-list li{
  55.               list-style: none;
  56.               width: 275px;
  57.               border:1px solid #ccc;
  58.               height: 200px;
  59.               border-top: none;
  60.         }
  61.         .wrap .blist li.active{
  62.             font-weight: bold;
  63.             color: red;
  64.             border-top: 2px solid red;
  65.             position: relative;
  66.             top:-1px;
  67.             height: 31px;
  68.         }
  69.         .blsit-list li:first-child{
  70.         	display: block;
  71.         }
  72.        .blsit-list li{
  73.        	  display: none;
  74.        }
  75. 	</style>
  76. </head>
  77. <body>
  78. 	   <div class="wrap">
  79. 	   	     <ul class="blist clearfix">
  80. 	   	     	 <li class="active">电影</li>
  81. 	   	     	 <li>电脑</li>
  82. 	   	     	 <li>冰箱</li>
  83. 	   	     	 <li>空调</li>
  84. 	   	     </ul>
  85. 	   	      <ul class="blsit-list">
  86. 	   	      	  <li>A</li>
  87. 	   	      	  <li>B</li>
  88. 	   	      	  <li>C</li>
  89. 	   	      	  <li>D</li>
  90. 	   	      </ul>
  91. 	   </div>
  92. 	    <div class="wrap">
  93. 	   	     <ul class="blist clearfix">
  94. 	   	     	 <li class="active">电影</li>
  95. 	   	     	 <li>电脑</li>
  96. 	   	     	 <li>冰箱</li>
  97. 	   	     	 <li>空调</li>
  98. 	   	     </ul>
  99. 	   	      <ul class="blsit-list">
  100. 	   	      	  <li>A</li>
  101. 	   	      	  <li>B</li>
  102. 	   	      	  <li>C</li>
  103. 	   	      	  <li>D</li>
  104. 	   	      </ul>
  105. 	   </div>
  106. 	   <div class="wrap">
  107. 	   	     <ul class="blist clearfix">
  108. 	   	     	 <li class="active">电影</li>
  109. 	   	     	 <li>电脑</li>
  110. 	   	     	 <li>冰箱</li>
  111. 	   	     	 <li>空调</li>
  112. 	   	     </ul>
  113. 	   	      <ul class="blsit-list">
  114. 	   	      	  <li>A</li>
  115. 	   	      	  <li>B</li>
  116. 	   	      	  <li>C</li>
  117. 	   	      	  <li>D</li>
  118. 	   	      </ul>
  119. 	   </div>
  120. 	   <div class="wrap">
  121. 	   	     <ul class="blist clearfix">
  122. 	   	     	 <li class="active">电影</li>
  123. 	   	     	 <li>电脑</li>
  124. 	   	     	 <li>冰箱</li>
  125. 	   	     	 <li>空调</li>
  126. 	   	     </ul>
  127. 	   	      <ul class="blsit-list">
  128. 	   	      	  <li>A</li>
  129. 	   	      	  <li>B</li>
  130. 	   	      	  <li>C</li>
  131. 	   	      	  <li>D</li>
  132. 	   	      </ul>
  133. 	   </div>
  134. 	   <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
  135. 	   <script type="text/javascript">
  136.        $(function(){
  137.        	     $(".blist").on("click","li",function(){
  138.        	     	  // 设index为当前点击
  139.        	     	  var index = $(this).index();
  140.        	     	  // 点击添加样式利用siblings清除其他兄弟节点样式
  141.        	     	  $(this).addClass("active").siblings().removeClass("active");
  142.        	     	  // 同理显示与隐藏
  143.        	     	  $(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide();
  144.        	     })
  145.        })
  146. 	   </script>
  147. </body>
  148. </html>

　　3、tab切换 mouseenter

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>jQuery tab切换</title>
  6. 	<style type="text/css">
  7.         *{
  8.         	margin:0;
  9.         	padding:0;
  10.         }
  11.         .wrap{
  12.         	margin-left: 50px;
  13.         	margin-top: 50px;
  14.         }
  15.         /*清浮动---clearfix*/
  16.         .clearfix {
  17. 			*zoom: 1;
  18. 		}
  19. 		.clearfix:after {
  20. 			content: "";
  21. 			clear: both;
  22. 			display: block;
  23. 			height: 0;
  24. 			font-size: 0;
  25. 			visibility: hidden;
  26. 		}
  27.         .blist {
  28.         	border:1px solid #d9d9d9;
  29.         	width: 275px;
  30.         	height: 32px;
  31.         }
  32.         .blist  li:first-child{
  33.         	border-left: none;
  34.         }
  35.         .blist  li{
  36.               list-style: none;
  37.               width: 68px;
  38.               height: 32px;
  39.               border-left:1px solid #d9d9d9;
  40.               font-size: 14px;
  41.               font-family: "楷体";
  42.               line-height: 32px;
  43.               text-align: center;
  44.               float: left;
  45.               /*鼠标样式改变为一个手*/
  46.               cursor: pointer;
  47. 			  /*字体免选中*/
  48. 			  -webkit-user-select: none;
  49.  
  50.         }
  51.         .blsit-list{
  52.         	width: 275px;
  53.         }
  54.         .blsit-list li{
  55.               list-style: none;
  56.               width: 275px;
  57.               border:1px solid #ccc;
  58.               height: 200px;
  59.               border-top: none;
  60.         }
  61.         .wrap .blist li.active{
  62.             font-weight: bold;
  63.             color: red;
  64.             border-top: 2px solid red;
  65.             position: relative;
  66.             top:-1px;
  67.             height: 31px;
  68.         }
  69.         .blsit-list li:first-child{
  70.         	display: block;
  71.         }
  72.        .blsit-list li{
  73.        	  display: none;
  74.        }
  75. 	</style>
  76. </head>
  77. <body>
  78. 	   <div class="wrap">
  79. 	   	     <ul class="blist clearfix">
  80. 	   	     	 <li class="active">电影</li>
  81. 	   	     	 <li>电脑</li>
  82. 	   	     	 <li>冰箱</li>
  83. 	   	     	 <li>空调</li>
  84. 	   	     </ul>
  85. 	   	      <ul class="blsit-list">
  86. 	   	      	  <li>A</li>
  87. 	   	      	  <li>B</li>
  88. 	   	      	  <li>C</li>
  89. 	   	      	  <li>D</li>
  90. 	   	      </ul>
  91. 	   </div>
  92. 	    <div class="wrap">
  93. 	   	     <ul class="blist clearfix">
  94. 	   	     	 <li class="active">电影</li>
  95. 	   	     	 <li>电脑</li>
  96. 	   	     	 <li>冰箱</li>
  97. 	   	     	 <li>空调</li>
  98. 	   	     </ul>
  99. 	   	      <ul class="blsit-list">
  100. 	   	      	  <li>A</li>
  101. 	   	      	  <li>B</li>
  102. 	   	      	  <li>C</li>
  103. 	   	      	  <li>D</li>
  104. 	   	      </ul>
  105. 	   </div>
  106. 	   <div class="wrap">
  107. 	   	     <ul class="blist clearfix">
  108. 	   	     	 <li class="active">电影</li>
  109. 	   	     	 <li>电脑</li>
  110. 	   	     	 <li>冰箱</li>
  111. 	   	     	 <li>空调</li>
  112. 	   	     </ul>
  113. 	   	      <ul class="blsit-list">
  114. 	   	      	  <li>A</li>
  115. 	   	      	  <li>B</li>
  116. 	   	      	  <li>C</li>
  117. 	   	      	  <li>D</li>
  118. 	   	      </ul>
  119. 	   </div>
  120. 	   <div class="wrap">
  121. 	   	     <ul class="blist clearfix">
  122. 	   	     	 <li class="active">电影</li>
  123. 	   	     	 <li>电脑</li>
  124. 	   	     	 <li>冰箱</li>
  125. 	   	     	 <li>空调</li>
  126. 	   	     </ul>
  127. 	   	      <ul class="blsit-list">
  128. 	   	      	  <li>A</li>
  129. 	   	      	  <li>B</li>
  130. 	   	      	  <li>C</li>
  131. 	   	      	  <li>D</li>
  132. 	   	      </ul>
  133. 	   </div>
  134. 	   <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
  135. 	   <script type="text/javascript">
  136.        $(function(){
  137.        	      $(".blist li").on("mouseenter",function(){
  138.        	     	 var index = $(this).index();
  139.        	     	  $(this).addClass("active").siblings().removeClass("active");
  140.        	     	  $(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide();
  141.        	     })
  142.        })
  143. 	   </script>
  144. </body>
  145. </html>

　　4、右栏菜单、

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>右侧栏菜单</title>
  6. 	<style type="text/css">
  7.            *{
  8.            	margin: 0;
  9.            	padding: 0;
  10.            }
  11.            .wrap{
  12.            	width: 500px;
  13.            }
  14.            .block{
  15.            	 border:1px solid #ccc;
  16.            	 margin: 20px 20px;
  17.            }
  18.            .rightMenu{
  19.            	 position: fixed;
  20.            	 right: 50px;
  21.            	 top: 200px;
  22.            	 /*opacity: 0;*/
  23.            	 display: none;
  24.            }
  25.            .rightMenu li{
  26.                 list-style: none;
  27.                 display: block;
  28.                 width: 80px;
  29.                 height: 32px;
  30.                 line-height: 32px;
  31.                 text-align: center;
  32.                 border: 1px solid blue;
  33.                 margin:  5px 0px;
  34.  
  35.            }
  36.            .rightMenu  li a{
  37.                 text-decoration: none;
  38.                 color: black;
  39.  
  40.            }
  41. 	</style>
  42. </head>
  43. <body>
  44.       <div class="wrap">
  45. 		  <div class="block block1">
  46. 		       <h4>第一部分</h4>
  47. 		  	   <p>
  48. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  49. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  50. 		  	   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  51. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  52. 		  	   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  53. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  54. 		  	   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  55. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  56. 		  	   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  57. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  58. 		  	   </p>
  59. 		  </div>
  60. 		  <div class="block block2">
  61. 		       <h4>第二部分</h4>
  62. 		  	   <p>
  63. 		  	   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  64. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  65. 		  	   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  66. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  67. 		  	   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  68. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  69. 		  	   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  70. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  71. 		  	   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  72. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  73. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  74. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  75. 		  	   </p>
  76. 		  </div>
  77. 		  <div class="block block3">
  78. 		       <h4>第三部分</h4>
  79. 		  	   <p>
  80. 		  	   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  81. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  82. 		  	   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  83. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  84. 		  	   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  85. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  86. 		  	   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  87. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  88. 		  	   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  89. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  90. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  91. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  92. 		  	   </p>
  93. 		  </div>
  94. 		  <div class="block block4">
  95. 		       <h4>第四部分</h4>
  96. 		  	   <p>
  97. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  98. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  99. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  100. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  101. 		  	   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  102. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  103. 		  	   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  104. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  105. 		  	   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  106. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  107. 		  	   		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea labore, doloremque eaque veritatis consectetur distinctio ipsam, perferendis cum expedita assumenda minus! Magnam itaque dolorum dignissimos, ullam asperiores! Deleniti, rem?
  108. 		  	   	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia porro assumenda voluptas exercitationem velit architecto nobis id odit ullam ut ex minima earum expedita distinctio nam culpa, harum, error veniam!
  109. 		  	   </p>
  110. 		  </div>
  111.  
  112. 	  </div>
  113. 	  <ul class="rightMenu">
  114. 		  	    	<li><a href="###">第一部分</a></li>
  115. 		  	    	<li><a href="###">第二部分</a></li>
  116. 		  	    	<li><a href="###">第三部分</a></li>
  117. 		  	    	<li><a href="###">第四部分</a></li>
  118. 		  </ul>
  119. 	  <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
  120. 	  <script type="text/javascript">
  121.         $(function(){
  122.         	 $(".rightMenu").on("click","li",function(){
  123.         	 	  // alert($(this).index())
  124.         	 	  var index = $(this).index();
  125. 				  console.log(index);
  126. 				  var t = $(".wrap .block").eq(index).offset().top
  127. 				  $("html body").animate({
  128. 				  	  scrollTop:t
  129. 				  })
  130.         	 })
  131.         	 var h = $(".rightMenu").height();
  132.             $(window).scroll(function(){
  133.                  if($(document).scrollTop()<200){
  134.                  	// alert("kk");
  135.                  	$(".rightMenu").stop().animate({
  136.                  		 height:0,
  137.                               opacity: 0
  138.  
  139.                  	},1000)
  140.                  }
  141.                  else{
  142.                  	$(".rightMenu").show().stop().animate({
  143.                  		      height:h,
  144.                               opacity: 1
  145.  
  146.                  	},1000)
  147.                  }
  148.             })
  149.  
  150.         })
  151. 	  </script>
  152. </body>
  153. </html>

　　注：还需导入jQuery的插件

jQuery的几种简单实用效果的更多相关文章

  1. 一种简单实用的双向电平转换电路3.3V-5V

    当你使用3.3V的单片机的时候,电平转换就在所难免了,经常会遇到3.3转5V或者5V转3.3V的情况,这里介绍一个简单的电路,他可以实现两个电平的相互转换(注意是相互哦,双向的,不是单向的!).电路十 ...

  2. 【Demo】jQuery 轮播图简单动画效果

    功能实现: (1)设定图片称号的鼠标悬停事件: (2)在事件中利用自定义动画函数调整显示图片,并修改对应标号样式: (3)为图片显示区域设定鼠标悬停事件: (4)当鼠标停在该区域时,清除图片切换动画定 ...

  3. Linux杂谈: 实现一种简单实用的线程池（C语言）

    基本功能 1. 实现一个线程的队列,队列中的线程启动后不再释放: 2. 没有任务执行时,线程处于pending状态,等待唤醒,不占cpu: 3. 当有任务需要执行时,从线程队列中取出一个线程执行任务: ...

  4. jquery另外一种类似tab切换效果

    简要:最近做项目一些效果不能用淘宝kissy框架 所以代码得自己写啊 网上当然有很多组件 但是用他们的代码很多(有的是我不需要的代码) 且还要看API 还不如自己动手写个简单一个,是这么一种简单的效果 ...

  5. 最简单实用的JQuery实现banner图中的text打字动画效果！！！

    下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...

  6. 基于jQuery简单实用的Tabs选项卡插件

    jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...

  7. JQuery(二)——简单动画效果

    上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...

  8. C#反射实现 C# 反射 判断类的延伸类型 使用代码生成工具Database2Sharp快速生成工作流模块控制器和视图代码 C# ADO.NET的SqlDataReader对象,判断是否包含指定字段 页面中添加锚点的几种方式 .net 简单实用Log4net（多个日志配置文件） C# 常用小点

    C#反射实现   一.反射概念: 1.概念: 反射,通俗的讲就是我们在只知道一个对象的内部而不了解内部结构的情况下,通过反射这个技术可以使我们明确这个对象的内部实现. 在.NET中,反射是重要的机制, ...

  9. 经验分享：10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

随机推荐

  1. maven集成tomcat插件以及乱码解决

    Maven已经是Java的项目管理标配,如何在JavaEE开发使用Maven调用Web应用,是很多同学关心的问题.本文将介绍,Maven如何介绍Tomcat插件. Maven Tomcat插件现在主要 ...

  2. mysql workbench连接不上远程数据库，xshell无法连接远程主机的问题

    1.先说xshell无法连接的问题 最近使用virtualbox装了个ubuntu-16.04,然后在win7上使用xshell连接,首先确认win7能ping通虚拟机ip.然后确认是否安装了open ...

  3. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  4. 【Java EE 学习 81】【CXF框架】【CXF整合Spring】

    一.CXF简介 CXF是Apache公司下的项目,CXF=Celtix+Xfire:它支持soap1.1.soap1.2,而且能够和spring进行快速无缝整合. 另外jax-ws是Sun公司发布的一 ...

  5. Duilib源码分析(一)整体框架

    Duilib界面库是一款由杭州月牙儿网络技术有限公司开发的界面开源库,以viksoe项目下的UiLib库的基础上开发(此后也将对UiLib库进行源码分析):通过XML布局界面,将用户界面和处理逻辑彻底 ...

  6. JS的双等和三等的区别

    在JS会碰到一个奇怪的运算符"===",之前学JAVA和C语言,只有"==",JS冒出个"===",挺奇怪的,遂google之... 在JS ...

  7. CSS3 Loading（加载）动画效果

    1.html 部分 <div class="spinner"> <div class="rect1"></div> < ...

  8. Android 如何判断一个应用在运行（转）

    Android 如何判断一个应用在运行  在一个应用中,或一个Service .Receiver中判断一个应用是否正在运行,以便进行一些相关的处理. 这个时候我们需要得到一个ActivityManag ...

  9. 图文介绍如何在Eclipse统计代码行数（转）

    使用Eclipse可以方便的统计工程或文件的代码行数,方法如下: 1.点击要统计的项目或许文件夹,在菜单栏点击Search,然后点击File... 2.选中正则表达式(Regular expressi ...

  10. Mac 显示隐藏文件

    defaults write com.apple.finder AppleShowAllFiles -bool true 此命令显示隐藏文件defaults write com.apple.finde ...