jQuery实现移动 和 渐变特效的点击事件
先看代码：
<!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 属性
剩下的就要靠 自己去敲代码，看效果 去理解其中的 意思。
-
本文向大家介绍jquery实现移动端点击图片查看大图特效，包括了jquery实现移动端点击图片查看大图特效的使用技巧和注意事项，需要的朋友参考一下 本文的需求很简单：点击图片查看大图，再点大图隐藏。多用于移动端，因为移动端屏幕小，可能需要查看大图。 具体实现代码 jquery实现移动端点击图片查看大图特效需要用到的技巧 需要点击图片中1、2、3、4四张小图分别查看大图，而下面左右按钮切换时是需要同
-
本文向大家介绍jQuery手动点击实现图片轮播特效，包括了jQuery手动点击实现图片轮播特效的使用技巧和注意事项，需要的朋友参考一下 本文写了一个轮播图练练手，先写了一个手动点击轮播的轮播图，随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等。 下面来看看最终做的手动点击轮播效果： 一、原理说明 （1）首先是轮播图的架构，我采用了一个最外边的大div包住两个小div，一个小div
-
本文向大家介绍移动端点击图片放大特效PhotoSwipe.js插件实现，包括了移动端点击图片放大特效PhotoSwipe.js插件实现的使用技巧和注意事项，需要的朋友参考一下 PhotoSwipe插件能实现手机端点击图片全屏放大 再双击图片放大等功能 PhotoSwipe插件官方网站 http://www.photoswipe.com/ photoswipe之移动端图片放大查看，滑动切换下一张，图
-
本文向大家介绍JavaScript实现鼠标点击导航栏变色特效，包括了JavaScript实现鼠标点击导航栏变色特效的使用技巧和注意事项，需要的朋友参考一下 废话不多说了，直接给大家贴js实现鼠标点击导航栏变色代码，具体代码如下所示： 以上所述是小编给大家介绍的JavaScript实现鼠标点击导航栏变色特效，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对
-
本文向大家介绍纯js和css实现渐变色包括静态渐变和动态渐变，包括了纯js和css实现渐变色包括静态渐变和动态渐变的使用技巧和注意事项，需要的朋友参考一下 说起“渐变色”，你会想起什么？ 当我开始搜索查找这个名词的时候，才发现它实际上是有两种理解或者说是两种形式的：动态渐变和静态渐变。 所谓动态渐变，举个简单的例子：他来了，她的脸渐渐红了...渐渐的，渐渐改变的，是不断在改变的；而静态渐变，也就更
-
本文向大家介绍js实现移动端导航点击自动滑动效果，包括了js实现移动端导航点击自动滑动效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码，供大家参考，具体内容如下 移动端模拟导航可点击自动滑动 0.1.4。 导航可左右滑动，可点击边缘的一个，自动滚动下一个到可视范围【依赖于iscroll.js】。 废话不多说直接上代码： 截图： 提供demo