zoukankan      html  css  js  c++  java

  • jquery动画

    <a href="javascript:void(0)" id="show">show</a>
    javascript:void(0) 防止页面单击以后会跳走，让他为空
    jquery 动画库下载地址

    <script src="js/jquery.easing.1.3.js"></script>
    引入即可使用
    此网站查看动画效果

    点击显示就显示，点击隐藏就隐藏
    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>无标题文档</title>
    6. <style>
    8. #ad{
    9. 	width:300px;
    10. 	height:300px;
    11. 	background-color:red;
    12. }
    13. </style>
    14. <script src="js/jquery-1.11.2.min.js"></script>
    15. <script src="js/jquery.easing.1.3.js"></script>
    16. <script>
    17. $(document).ready(function(e){
    18.  $('#show').click(function(){
    19. 	 $('#ad').show('easeInQuint');
    20. 	 });
    21. 	  $('#hide').click(function(){
    22. 	 $('#ad').hide(4000);
    23. 	 });
    24. });
    25. </script>
    26. </head>
    27. <body>
    28. <a href="javascript:void(0)" id="show">show</a>
    29. <a href="javascript:void(0)" id="hide">hide</a>
    30. <div id="ad"></div>
    31. </body>
    32. </html>
    同一个按钮点击显示，点击隐藏
    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>无标题文档</title>
    6. <style>
    8. #ad{
    9. 	width:300px;
    10. 	height:300px;
    11. 	background-color:red;
    12. }
    13. </style>
    14. <script src="js/jquery-1.11.2.min.js"></script>
    15. <script src="js/jquery.easing.1.3.js"></script>
    16. <script>
    17. $(document).ready(function(e){
    18. 	$('#btn').click(function(){
    19. 		$('#ad').is(':hidden') ? $('#ad').show('slow') : $('#ad').hide(); 
    20. 		});
    21. });
    22. </script>
    23. </head>
    24. <body>
    25. <button id="btn">show-hide</button>
    26. <div id="ad"></div>
    27. </body>
    28. </html>
    同一个按钮点击左边移动三百，再点击回来
    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>无标题文档</title>
    6. <style>
    8. #ad{
    9. 	width:300px;
    10. 	height:300px;
    11. 	background-color:red;
    12. 	position:absolute;
    13. }
    14. </style>
    15. <script src="js/jquery-1.11.2.min.js"></script>
    16. <script src="js/jquery.easing.1.3.js"></script>
    17. <script>
    18. $(document).ready(function(e){
    19. 	$('#btn').click(function(){
    20. 		//$('#ad').animate({left:300},'slow');
    21. 		$('#ad').position().left==300 ? $('#ad').animate({left:0},'slow') : $('#ad').animate({left:300},'slow') ;
    22. 		});
    23. });
    24. </script>
    25. </head>
    26. <body>
    27. <button id="btn">show-hide</button>
    28. <div id="ad"></div>
    29. </body>
    30. </html>
    点左向左移，点右向右移动
    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>无标题文档</title>
    6. <style>
    8. #ad{
    9. 	width:300px;
    10. 	height:300px;
    11. 	background-color:red;
    12. 	position:absolute;
    13. }
    14. </style>
    15. <script src="js/jquery-1.11.2.min.js"></script>
    16. <script src="js/jquery.easing.1.3.js"></script>
    17. <script>
    18. $(document).ready(function(e){
    19. 	$('#btn').click(function(){
    20. 		if($('#ad').position().left==300){
    21. 			$('#ad').animate({left:0},'slow');
    22. 			$(this).html('right');
    23. 		}else{
    24. 		$('#ad').animate({left:300},'slow');
    25. 			$(this).html('left');
    26. 		}
    27. 		});
    28. });
    29. </script>
    30. </head>
    31. <body>
    32. <button id="btn">show-hide</button>
    33. <div id="ad"></div>
    34. </body>
    35. </html>
     fadeIn()  == show()
    fadeOut()  ==  hide()
    juqery 控制返回顶部效果
    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>无标题文档</title>
    6. <style>
    8. #ad{
    9. 	width:300px;
    10. 	height:300px;
    11. 	background-color:red;
    12. 	position:absolute;
    13. }
    14. .rightad{
    15. 	width:100px;
    16. 	height:50px;
    17. 	background-color:#DF04A7;
    18. 	position:fixed;
    19. 	top:500px;
    20. 	right:0;
    21. 	display:none;
    22. }
    23. </style>
    24. <script src="js/jquery-1.11.2.min.js"></script>
    25. <script src="js/jquery.easing.1.3.js"></script>
    26. <script>
    27. $(document).ready(function(e){
    28. 	//控制点击返回顶部
    29. 	$('.rightad').click(function(){
    30. 		$('html,body').animate({scrollTop:0},'slow');
    31. 	});
    32. 	//控制当滚动到大于300时显示右边返回顶部的方块
    33. 	$(window).scroll(function(){
    34. 		if($(this).scrollTop()>300){
    35. 			$('.rightad').show();
    36. 			//$('rightad').fadeIn('slow');
    37. 		}else{
    38. 			$('.rightad').fadeOut('slow');
    39. 		}
    40. 	});
    41. 	
    42. });
    43. </script>
    44. </head>
    45. <body>
    46. <div class="rightad"></div>
    47. <button id="btn">show-hide</button><br>
    48. <div id="ad"></div><br>
    49. <hr>
    50. <button id="btn">show-hide</button><br>
    51. <div id="ad"></div><br>
    52. <hr>
    53. <button id="btn">show-hide</button><br>
    54. <div id="ad"></div><br>
    55. <hr>
    56. <button id="btn">show-hide</button><br>
    57. <div id="ad"></div><br>
    58. <hr>
    59. <button id="btn">show-hide</button><br>
    60. <div id="ad"></div><br>
    61. <hr>
    62. <button id="btn">show-hide</button><br>
    63. <div id="ad"></div><br>
    64. <hr>
    65. <button id="btn">show-hide</button><br>
    66. <div id="ad"></div><br>
    67. <hr><button id="btn">show-hide</button><br>
    68. <div id="ad"></div><br>
    69. <hr>
    70. <button id="btn">show-hide</button><br>
    71. <div id="ad"></div><br>
    72. <hr>
    73. <button id="btn">show-hide</button><br>
    74. <div id="ad"></div><br>
    75. <hr>
    76. <button id="btn">show-hide</button><br>
    77. <div id="ad"></div><br>
    78. <hr>
    79. <button id="btn">show-hide</button><br>
    80. <div id="ad"></div><br>
    81. <hr>
    82. <button id="btn">show-hide</button><br>
    83. <div id="ad"></div><br>
    84. <hr><button id="btn">show-hide</button><br>
    85. <div id="ad"></div><br>
    86. <hr>
    87. <button id="btn">show-hide</button><br>
    88. <div id="ad"></div><br>
    89. <hr>
    90. <button id="btn">show-hide</button><br>
    91. <div id="ad"></div><br>
    92. <hr>
    93. <button id="btn">show-hide</button><br>
    94. <div id="ad"></div><br>
    95. <hr>
    96. <button id="btn">show-hide</button><br>
    97. <div id="ad"></div><br>
    98. <hr>
    99. <button id="btn">show-hide</button><br>
    100. <div id="ad"></div><br>
    101. <hr>
    102. <button id="btn">show-hide</button><br>
    103. <div id="ad"></div><br>
    104. <hr>
    105. <button id="btn">show-hide</button><br>
    106. <div id="ad"></div><br>
    107. <hr>
    109. </body>
    110. </html>
    带动画的右侧固定滚动的效果 一定要用绝对定位
    position:absolute;
    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>无标题文档</title>
    6. <style>
    7. #ad{
    8. 	width:300px;
    9. 	height:300px;
    10. 	background-color:red;
    11. 	position:absolute;
    12. }
    13. .rightad{
    14. 	width:200px;
    15. 	height:50px;
    16. 	background-color:#DF04A7;
    17. 	position:absolute;
    18. 	right:0;
    19. }
    20. </style>
    21. <script src="js/jquery-1.11.2.min.js"></script>
    22. <script src="js/jquery.easing.1.3.js"></script>
    23. <script>
    24. $(document).ready(function(e){
    25. 	var t=100;//100表示距离顶部的距离
    26. 	function tt(){
    27. 		var pos=t + $(window).scrollTop();
    28. 		$('.rightad').stop().animate({top:pos},1000);
    29. 	}
    30. 	tt();
    31. 	$(window).scroll(tt);
    32. });
    33. </script>
    34. </head>
    35. <body>
    36. <div class="rightad"></div>
    37. <button id="btn">show-hide</button><br>
    38. <div id="ad"></div><br>
    39. <hr>
    40. <button id="btn">show-hide</button><br>
    41. <div id="ad"></div><br>
    42. <hr>
    43. <button id="btn">show-hide</button><br>
    44. <div id="ad"></div><br>
    45. <hr>
    46. <button id="btn">show-hide</button><br>
    47. <div id="ad"></div><br>
    48. <hr>
    49. <button id="btn">show-hide</button><br>
    50. <div id="ad"></div><br>
    51. <hr>
    52. <button id="btn">show-hide</button><br>
    53. <div id="ad"></div><br>
    54. <hr>
    55. <button id="btn">show-hide</button><br>
    56. <div id="ad"></div><br>
    57. <hr><button id="btn">show-hide</button><br>
    58. <div id="ad"></div><br>
    59. <hr>
    60. <button id="btn">show-hide</button><br>
    61. <div id="ad"></div><br>
    62. <hr>
    63. <button id="btn">show-hide</button><br>
    64. <div id="ad"></div><br>
    65. <hr>
    66. <button id="btn">show-hide</button><br>
    67. <div id="ad"></div><br>
    68. <hr>
    69. <button id="btn">show-hide</button><br>
    70. <div id="ad"></div><br>
    71. <hr>
    72. <button id="btn">show-hide</button><br>
    73. <div id="ad"></div><br>
    74. <hr><button id="btn">show-hide</button><br>
    75. <div id="ad"></div><br>
    76. <hr>
    77. <button id="btn">show-hide</button><br>
    78. <div id="ad"></div><br>
    79. <hr>
    80. <button id="btn">show-hide</button><br>
    81. <div id="ad"></div><br>
    82. <hr>
    83. <button id="btn">show-hide</button><br>
    84. <div id="ad"></div><br>
    85. <hr>
    86. <button id="btn">show-hide</button><br>
    87. <div id="ad"></div><br>
    88. <hr>
    89. <button id="btn">show-hide</button><br>
    90. <div id="ad"></div><br>
    91. <hr>
    92. <button id="btn">show-hide</button><br>
    93. <div id="ad"></div><br>
    94. <hr>
    95. <button id="btn">show-hide</button><br>
    96. <div id="ad"></div><br>
    97. <hr>
    98. </body>
    99. </html>

    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>webrx-title</title>
    6. <style>
    7. #ad{
    8.     width:300px;
    9. 	height:200px;
    10. 	background-color:red;	
    11.     margin:20px;
    12. }
    14. .rightad{
    15.     width:200px;
    16. 	height:150px;
    17. 	background-color:#E30CC0;
    18. 	position:absolute;
    19. 	right:10px;
    20. 	top:-200px;	
    21. }
    22. </style>
    24. <script src="js/jquery-1.11.2.min.js"></script>
    25. <script>
    26. $(document).ready(function(e) {
    27. 	var t = 200;
    28. 	function tt(){
    29. 		var pos = t + $(window).scrollTop();
    30. 	    $('.rightad').stop().animate({top:pos},1000);	
    31. 	}
    32. 	tt();
    33. 	
    34. 	$(window).scroll(tt);
    35. });
    36. </script>
    37. </head>
    39. <body>
    40. <div class="rightad"></div>
    41. <button id="btn">show-hide</button><br>
    42. <div id="ad"></div><br>
    43. <h1>hh</h1><br>
    44. <hr>
    45. <button id="btn">show-hide</button><br>
    46. <div id="ad"></div><br>
    47. <h1>hh</h1><br>
    48. <hr>
    49. <button id="btn">show-hide</button><br>
    50. <div id="ad"></div><br>
    51. <h1>hh</h1><br>
    52. <hr>
    53. <button id="btn">show-hide</button><br>
    54. <div id="ad"></div><br>
    55. <h1>hh</h1><br>
    56. <hr>
    57. <button id="btn">show-hide</button><br>
    58. <div id="ad"></div><br>
    59. <h1>hh</h1><br>
    60. <hr>
    61. <button id="btn">show-hide</button><br>
    62. <div id="ad"></div><br>
    63. <h1>hh</h1><br>
    64. <hr>
    65. <button id="btn">show-hide</button><br>
    66. <div id="ad"></div><br>
    67. <h1>hh</h1><br>
    68. <hr>
    69. <button id="btn">show-hide</button><br>
    70. <div id="ad"></div><br>
    71. <h1>hh</h1><br>
    72. <hr>
    73. <button id="btn">show-hide</button><br>
    74. <div id="ad"></div><br>
    75. <h1>hh</h1><br>
    76. <hr>
    77. <button id="btn">show-hide</button><br>
    78. <div id="ad"></div><br>
    79. <h1>hh</h1><br>
    80. <hr>
    81. <button id="btn">show-hide</button><br>
    82. <div id="ad"></div><br>
    83. <h1>hh</h1><br>
    84. <hr>
    85. <button id="btn">show-hide</button><br>
    86. <div id="ad"></div><br>
    87. <h1>hh</h1><br>
    88. <hr>
    89. <button id="btn">show-hide</button><br>
    90. <div id="ad"></div><br>
    91. <h1>hh</h1><br>
    92. <hr>
    93. <button id="btn">show-hide</button><br>
    94. <div id="ad"></div><br>
    95. <h1>hh</h1><br>
    96. <hr>
    97. <button id="btn">show-hide</button><br>
    98. <div id="ad"></div><br>
    99. <h1>hh</h1><br>
    100. <hr>
    101. <button id="btn">show-hide</button><br>
    102. <div id="ad"></div><br>
    103. <h1>hh</h1><br>
    104. <hr>
    105. <button id="btn">show-hide</button><br>
    106. <div id="ad"></div><br>
    107. <h1>hh</h1><br>
    108. <hr>
    109. <button id="btn">show-hide</button><br>
    110. <div id="ad"></div><br>
    111. <h1>hh</h1><br>
    112. <hr>
    113. <button id="btn">show-hide</button><br>
    114. <div id="ad"></div><br>
    115. <h1>hh</h1><br>
    116. <hr>
    117. <button id="btn">show-hide</button><br>
    118. <div id="ad"></div><br>
    119. <h1>hh</h1><br>
    120. <hr>
    121. <button id="btn">show-hide</button><br>
    122. <div id="ad"></div><br>
    123. <h1>hh</h1><br>
    124. <hr>
    125. <button id="btn">show-hide</button><br>
    126. <div id="ad"></div><br>
    127. <h1>hh</h1><br>
    128. <hr>
    129. <button id="btn">show-hide</button><br>
    130. <div id="ad"></div><br>
    131. <h1>hh</h1><br>
    132. <hr>
    133. <button id="btn">show-hide</button><br>
    134. <div id="ad"></div><br>
    135. <h1>hh</h1><br>
    136. <hr>
    137. <button id="btn">show-hide</button><br>
    138. <div id="ad"></div><br>
    139. <h1>hh</h1><br>
    140. <hr>
    141. <button id="btn">show-hide</button><br>
    142. <div id="ad"></div><br>
    143. <h1>hh</h1><br>
    144. <hr>
    145. <button id="btn">show-hide</button><br>
    146. <div id="ad"></div><br>
    147. <h1>hh</h1><br>
    148. <hr>
    149. <button id="btn">show-hide</button><br>
    150. <div id="ad"></div><br>
    151. <h1>hh</h1><br>
    152. <hr>
    153. <button id="btn">show-hide</button><br>
    154. <div id="ad"></div><br>
    155. <h1>hh</h1><br>
    156. <hr>
    157. <button id="btn">show-hide</button><br>
    158. <div id="ad"></div><br>
    159. <h1>hh</h1><br>
    160. <hr>
    161. <button id="btn">show-hide</button><br>
    162. <div id="ad"></div><br>
    163. <h1>hh</h1><br>
    164. <hr>
    165. <button id="btn">show-hide</button><br>
    166. <div id="ad"></div><br>
    167. <h1>hh</h1><br>
    168. <hr>
    169. <button id="btn">show-hide</button><br>
    170. <div id="ad"></div><br>
    171. <h1>hh</h1><br>
    172. <hr>
    173. <button id="btn">show-hide</button><br>
    174. <div id="ad"></div><br>
    175. <h1>hh</h1><br>
    176. <hr>
    177. <button id="btn">show-hide</button><br>
    178. <div id="ad"></div><br>
    179. <h1>hh</h1><br>
    180. <hr>
    181. <button id="btn">show-hide</button><br>
    182. <div id="ad"></div><br>
    183. <h1>hh</h1><br>
    184. <hr>
    185. <button id="btn">show-hide</button><br>
    186. <div id="ad"></div><br>
    187. <h1>hh</h1><br>
    188. <hr>
    189. <button id="btn">show-hide</button><br>
    190. <div id="ad"></div><br>
    191. <h1>hh</h1><br>
    192. <hr>
    193. <button id="btn">show-hide</button><br>
    194. <div id="ad"></div><br>
    195. <h1>hh</h1><br>
    196. <hr>
    197. <button id="btn">show-hide</button><br>
    198. <div id="ad"></div><br>
    199. <h1>hh</h1><br>
    200. <hr>
    201. <button id="btn">show-hide</button><br>
    202. <div id="ad"></div><br>
    203. <h1>hh</h1><br>
    204. <hr>
    205. <button id="btn">show-hide</button><br>
    206. <div id="ad"></div><br>
    207. <h1>hh</h1><br>
    208. <hr>
    209. <button id="btn">show-hide</button><br>
    210. <div id="ad"></div><br>
    211. <h1>hh</h1><br>
    212. <hr>
    213. <button id="btn">show-hide</button><br>
    214. <div id="ad"></div><br>
    215. <h1>hh</h1><br>
    216. <hr>
    217. <button id="btn">show-hide</button><br>
    218. <div id="ad"></div><br>
    219. <h1>hh</h1><br>
    220. <hr>
    221. <button id="btn">show-hide</button><br>
    222. <div id="ad"></div><br>
    223. <h1>hh</h1><br>
    224. <hr>
    226. </body>
    227. </html>
  • 相关阅读:
    （转）GNU风格ARM汇编语法指南（非常详细）5
    （转）ARM GNU常用汇编语言介绍
    RH850 FCL的使用
    RL78 FDL和FSL的使用
    RH850 中断相关
    关于const类型指针变量的使用
    Linux内核中双向链表的经典实现
    RL78 定义常量变量在指定的地址方法
    RL78 RAM GUARD Funtion
    AUTOSAR-Specification of Watchdog Manager 阅读
  • 原文地址：https://www.cnblogs.com/lsr111/p/4584720.html
Copyright © 2011-2022 走看看