Chinaunix首页 | 论坛 | 博客
  • 博客访问: 569416
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2052
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: jQuery

2016-09-08 21:44:45



点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <link rel="stylesheet" href="css/1.css" />
  7.         <script type="text/javascript " src="js/jquery-1.9.1.js"></script>
  8.         <script type="text/javascript" src="js/jquery.color.js"></script>
  9.         <script type="text/javascript" src="js/1.js"></script>
  10.     </head>
  11.     <body>
  12.         <button>Click Me</button>
  13.         <div id="box"></div>
  14.     </body>
  15. </html>


点击(此处)折叠或打开

  1. window.onload = function(){
  2.     
  3.     $(function(){
  4.         
  5.         $("button").click(function(){
  6.             
  7.             $("#box").animate({ height:'300px',opacity:0.2,backgroundColor:"yellow"} ,"slow" );
  8.         
  9.             $("#box").animate({ width:'500px',opacity:0.5,backgroundColor:"black"} ,"1000");
  10.             $("#box").animate({ height:'100px',opacity:0.6,backgroundColor:"pink" } ,"slow");
  11.             $("#box").animate({ width:'100px',opacity:1,backgroundColor:"green"} ,"slow");
  12.         
  13.             
  14.         })
  15.         
  16.     })
  17.     
  18.     
  19.     
  20. }


点击(此处)折叠或打开

  1. *{
  2.     margin:0;
  3.     padding: 0;
  4. }
  5. #box{
  6.     width: 100px;
  7.     height: 100px;
  8.     background: chartreuse;
  9.     position: absolute;
  10. }
 <script type="text/javascript" src="js/jquery.color.js"></script> 插件的地址为:
gitHub地址:https://github.com/jquery/jquery-color/

阅读(3515) | 评论(0) | 转发(0) |
0

上一篇:jQ弹出层的效果

下一篇:jQ 蒙版的效果

给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册