jQuery控制DIV层实现由大到小,由远及近动画变化效果


Posted in Javascript onOctober 09, 2015

本文实例讲述了jQuery控制DIV层实现由大到小,由远及近动画变化效果。分享给大家供大家参考。具体如下:

这里介绍jQuery控制DIV由大到小,由远及近动画变化效果,使用jquery生成动画效果的一个小例子,希望大家喜欢。

运行效果截图如下:

jQuery控制DIV层实现由大到小,由远及近动画变化效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel控制Div运动,由大到小变化。</title>
<style type="text/css">
*{margin:0;padding:0;} 
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
 $(function(){
 $("#panel").css("opacity", "0.5");//设置不透明度
 $("#panel").click(function(){
  $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
   .animate({top: "200px" , width :"200px"}, 3000 ,function(){
    $(this).css("border","5px solid blue");
  })
 });
 });
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery 1.8 Release版本发布了
Aug 14 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 #Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 #Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 #Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 #Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 #Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 #Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 #Javascript
You might like
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
Prototype Class对象学习
2009/07/19 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
Python递归函数定义与用法示例
2017/06/02 Python
python仿抖音表白神器
2019/04/08 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
大二法英学生职业生涯规划范文
2014/02/27 职场文书
杨善洲观后感
2015/06/04 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫