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 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 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
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Apache部署Django项目图文详解
2019/07/30 Python
python绘制动态曲线教程
2020/02/24 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
应届生污水处理求职信
2013/11/06 职场文书
大三学生入党思想汇报
2014/01/02 职场文书
庆八一活动方案
2014/01/25 职场文书
企业承诺书怎么写
2014/05/24 职场文书
2014年工程师工作总结
2014/11/25 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python