昨天的这个先补上--这个是关于 JQ 的移动 和 渐变特效的点击事件
<!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 的移动 和 渐变特效的点击事件的更多相关文章
- Twitter面试题蓄水池蓄水量算法(原创 JS版，以后可能会补上C#的)
之前在群里有人讨论Twitter的面试题,蓄水池蓄水量计算,于是自己写了个JS版的(PS:主要后台代码还要编译,想想还是JS快,于是就使用了JS了.不过算法主要还是思路嘛,而且JS应该都没问题吧^_^ ...
- 如何在UILable上添加点击事件？
最近开始学习iOS开发,今天上来写第一个iOS笔记 昨天碰到一个需求,在UILable上添加点击事件,网上找了写资料,有人建议用透明的UIButton覆盖,有人建议写一个集成自UILable的类,扩展 ...
- asp.net 页面上的点击事件
asp.net 页面上 服务器端控件Button 有两个click事件如 <asp:Button ID="Button1" runat="server" ...
- view上添加点手势 button无法响应点击事件
在view 上添加手势 有的时候 会把Button的 点击事件盖掉,这个 时候 我们用UITapGestureRecognizer的代理方法 //手势的代理方法 - (BOOL)gestureRec ...
- Javascript(jQuery)中绑定页面上所有按钮点击事件的几种方式
方法一:使用document对象查找所有的按钮 [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 //按照dom的方式添加事件处理 function B ...
- echarts 取消图例上的点击事件和图表上鼠标滑过点击事件
备注:标黄的代码是起作用的代码,其他的不需要借鉴!!! //取消 鼠标滑过的提示框 tooltip : { trigger: 'item', show:false, ...
- a标签上的点击事件
当我们在处理a标签上的点击事件时发现即使href=""里面为空,点击事件的效果也不明显,这种情况该如何处理呢?常见的处理方法有以下几种: 1.a href="javasc ...
- 关于iphone手机上点击事件不起作用
今天调试手机端H5页面的时候,发现一个很坑的问题,绑定的点击事件不起效果,安卓上都没问题,事件能正确触发,但是在iPhone没反应. 开始觉得是写法问题,后来发现,是由于iPhone上,点击的对象,必 ...
- openlayers上添加点击事件
有很多场景会有这个需求,就是我绘制了图标,点击图标需要展示一些对应的信息 openlayer的事件主要是通过监听来完成的,你所有的icon的点击事件都是可以通过监听map的点击事件来处理对应的逻辑的 ...
随机推荐
- org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; 前言中不允许有内容。
二月 25, 2016 9:24:24 下午 org.apache.tomcat.util.digester.SetPropertiesRule begin 警告: [SetPropertiesRul ...
- 网易免费/付费163企业邮smtp服务器地址
免费:smtp.ym.163.com 25/pop.ym.163.com 110 付费:smtp.qiye.163.com 25/pop.qiye.163.com 110
- Ajax请求接口加密研究（针对网页前端的接口安全加密机制研究）
通常我们在h5前端调用后台接口时,一般是ajax,那么接口的安全成了一个问题. 这里可以肯定的说,前端调用的接口一定要验证! 然后剖析了微信网页版.京东网页版这些,也都是通过接口的形势绑定数据,所以在 ...
- WHMCS系统API调用
WHMCS:域名管理系统,现在网络上很多借助此系统Shadowsocks插件+ShadowsocksR多用户服务端进行VPN的售卖,能做到流量控制等. 在对接此系统的API时,我发现了很多功能都已经实 ...
- uva12716 gcd
题意:给出N,1<=b<=a<=N,求满足gcd(a,b)=a xor b的pair (a,b)的个数 有个重要的结论:若gcd(a,b)=a xor b=c,那么b=a-c 如果一 ...
- UVa1636 Headshot
数据结构学得心累,做点小题换心情 原题是PDF格式查看的,贴过来好麻烦,果断放弃 已知前一次尝试结果是0,则可以得知: 下一次若仍是0,则遇到了一个00串 下一次若是1,则遇到了一个01串 SHOOT ...
- U型进度条
今天同事说要做一个U型进度条的效果. 本打算上网找一个,结果找了一个纯CSS3打造的,不过最坑人的是他把进度条从1到100,挨个设置了CSS属性. 这不得活活累死宝宝~~~~~~~~~~~~~~. 于 ...
- （译）你应该知道的jQuery小技巧
帮助提高你jQuery应用的简单小技巧 回到顶部按钮 图片预加载 判断图片是否加载完 自动修补破损图像 Hover切换class类 禁用输入 停止正在加载的链接 toggle fade/slide 简 ...
- HTML之：fieldset——一个不常用的HTML标签
2016年4月14日17:10:02记录 一个不常用的HTML标签fieldset,不过我觉得比较有意思,其语法如下: <fieldset><legend>fieldset名称 ...
- C#调用Windows API函数截图
界面如下: 下面放了一个PictureBox 首先是声明函数: //这里是调用 Windows API函数来进行截图 //首先导入库文件 [System.Runtime.InteropServices ...