昨天的这个先补上--这个是关于 JQ 的移动 和 渐变特效的点击事件
2015-01-17 22:20
323 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.js"></script> </head> <style> body{font-family: "微软雅黑";width: 980px; margin: 0 auto; text-align: center;} .box{ width: 300px; height: 300px; background: green; border: 1px solid #e6e6e6; margintop: 50px; line-height: 200px; position: absolute; } button{ border: none; background: green; width: 100px; height: 50px; line-height: 50px; color: #fff; font-size: 16px; margin-top: 50px; } </style> <body> <button>点击开始动画</button> <div class="box" ></div> <script> $(document).ready(function(){ $("button").click(function(){ var div=$(".box"); div.animate({height:'200px',opacity:'0.4'},"slow"); div.animate({width:'200px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); div.animate({right:'100px',opacity:'0.8'},"slow"); div.animate({bottom:'100px',opacity:'0.8'},"slow"); div.animate({left:'100px',opacity:'0.8'},"slow"); div.animate({top:'100px',opacity:'0.8'},"slow"); }); }); </script> <script> $(document).ready(function(){ $("button").click(function(){ var div=$(".box"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); }); }); </script> </body> </html>
.animate 事件,是这个 里面的新的东西。解释起来就是 使div 块儿 变得有灵魂 可以移动。
Tips:
1、click 事件的 点击节点的选择
2、通过 var div=$(".box") 来选择需要控制的 css 属性
剩下的就要靠 自己去敲代码,看效果 去理解其中的 意思。
相关文章推荐
- 昨天所写的JQ 点击隐藏事件,关键性原理
- 监听鼠标移动和点击事件并且通过发送广播的形式发出这个绝对坐标
- jquery点击左右移动div特效
- highcharts报表关于series点击文本或者符号,都有触发事件或者都没有触发事件
- 关于捕获用户何时点击window.onbeforeunload的取消事件
- 初学JQ,关于 事件 笔记(四)
- 关于暴风这个攻击事件
- ios 关于 通过加载 xib 生成的view,调用 addsubviews,sub view的按钮 不相应点击事件的 问题
- Rokon 关于精灵的点击事件
- 移动项目开发笔记(禁止一个按钮在服务器事件处理完成前连续点击按钮)
- 关于ListView中控件点击事件与Item点击事件冲突的问题
- 关于在c#中创建用户控件后,winform应用程序在调用中无法通过点击用户控件的子控件为其自动添加事件代码的问题
- 关于页面有多个textfield点击换行,画面随之移动的方案
- 关于在里的按钮点击之后不执行OnItemCommand事件,欢迎讨论
- jQuery中关于超链接click点击事件的注意点
- 鼠标点击按钮事件(列表,鼠标移动形状)
- 判断平pickbutton 节点是否被删除, 这个事件放在点击事件之内。
- 关于在点击F7的放大镜前的事件监听