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 相关文章推荐
用jQuery中的ajax分页实现代码
Sep 20 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
Vue实现简单分页器
Dec 29 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 Javascript
JS实现小米轮播图
Sep 21 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 Javascript
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 cli 方式 在crotab中运行解决
2010/02/08 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
js 表格隔行颜色
2009/12/02 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
js中less常用的方法小结
2017/08/09 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
Python中operator模块的操作符使用示例总结
2016/06/28 Python
利用Python破解验证码实例详解
2016/12/08 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
对python中的pop函数和append函数详解
2018/05/04 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
店长助理岗位职责
2013/12/13 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
办公用品管理制度
2015/08/04 职场文书
交通事故协议书范本
2016/03/19 职场文书
接收函
2019/04/22 职场文书
MySQL详细讲解变量variables的用法
2022/06/21 MySQL
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript