jQuery实现移动 和 渐变特效的点击事件


Posted in Javascript onFebruary 26, 2015

先看代码:

<!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 属性

剩下的就要靠 自己去敲代码,看效果 去理解其中的 意思。

Javascript 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
javascript函数库-集合框架
Apr 27 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
js比较日期大小的方法
May 12 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
jQuery 回调函数(callback)的使用和基础
Feb 26 #Javascript
使用jQuery获得内容以及内容的属性
Feb 26 #Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 #Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 #Javascript
2则自己编写的jQuery特效分享
Feb 26 #Javascript
javascript制作网页图片上实现下雨效果
Feb 26 #Javascript
js实现格式化金额,字符,时间的方法
Feb 26 #Javascript
You might like
PHP include_path设置技巧分享
2011/07/03 PHP
php explode函数实例代码
2012/02/27 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
javascript操作向表格中动态加载数据
2020/08/27 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
利用Python破解验证码实例详解
2016/12/08 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
python 字典访问的三种方法小结
2019/12/05 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
python如何停止递归
2020/09/09 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
质检员岗位职责
2013/12/17 职场文书
建议书怎么写
2014/03/12 职场文书
活动总结格式范文
2014/04/26 职场文书
党委班子剖析材料
2014/08/21 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
小学教师读书笔记
2015/07/01 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
CAD实训总结范文
2015/08/03 职场文书
如何写好竞聘报告
2019/04/03 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android
讲解MySQL增删改操作
2022/05/06 MySQL