一个CSS+jQuery的放大缩小动画效果
日期: 2013年9月23日
作者:铁锚
// 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来。
// 都是定死了的。因为需求就只有4个元素。如果是要用CSS的class来处理,那就需要用到CSS3动画了。
// 功能 : 在上方的按钮上滑动,可以切换各个page,点击下方的各个page,也可以切换收缩还是展开状态。
初始效果预览
<!DOCTYPE html> <html> <head> <title> CSS+jQuery动画效果 </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content="铁锚"> <style> body{ z-index: 0; width: 100%; min-height: 400px; } .pages{ position: absolute; } .current{ position: absolute; z-index: 12 !important; left: 0px !important; } .page1{ background-color: #a5cfff; z-index: 1; width: 300px; height:280px; top: 100px; left: 0px; } .page2{ background-color: #b1ca54; z-index: 2; width: 250px; height:270px; top: 160px; left: 0px; } .page3{ background-color: #c2c6c9; z-index: 3; width: 200px; height:260px; top: 220px; left: 0px; } .page4{ background-color: #ef9e9c; z-index: 4; width: 150px; height:250px; top: 250px; left: 0px; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(function(){ // 增长 function increase($div,e){ var expstatus = $div.data("expstatus"); if(!expstatus){ // 没有展开过 $div.data("expstatus","yes"); } var style = $div.attr("style"); $div.addClass("current").attr("styleold",style); // $div.stop(); $div.animate({ opacity:0.9, width:"400px", height: "400px", top: "100px", left: "0px" },600) .animate({ opacity:1.0 },30); e.stopPropagation(); return false; }; // 还原 function resize(e){ // 所有的都移除 var $page1 = $(".current.page1") ; $page1.stop(); $page1.animate({ opacity:1.0, width:"300px", height: "280px", top: "100px", left: "0px" },600,null,function(){ $page1.removeClass("current").attr("style",""); }); var $page2 = $(".current.page2") ; $page2.stop(); $page2.animate({ opacity:1.0, width:"250px", height: "270px", top: "160px", left: "0px" },600,null,function(){ $page2.removeClass("current").attr("style",""); }); var $page3 = $(".current.page3") ; $page3.stop(); $page3.animate({ opacity:1.0, width:"200px", height: "260px", top: "220px", left: "0px" },600,null,function(){ $page3.removeClass("current").attr("style",""); }); var $page4 = $(".current.page4") ; $page4.stop(); $page4.animate({ opacity:1.0, width:"150px", height: "250px", top: "250px", left: "0px" },600,null,function(){ $page4.removeClass("current").attr("style",""); }); // var expstatus1 = $page1.data("expstatus"); if(expstatus1){ $page1.data("expstatus",null); } var expstatus2 = $page2.data("expstatus"); if(expstatus2){ $page2.data("expstatus",null); } var expstatus3 = $page3.data("expstatus"); if(expstatus3){ $page3.data("expstatus",null); } var expstatus4 = $page4.data("expstatus"); if(expstatus4){ $page4.data("expstatus",null); } if(e){ e.stopPropagation(); return false; } else { return true; } }; // $("#button1").unbind("mouseover").bind("mouseover",function(e){ // var $page1 = $(".page1"); // 添加特定的 return increase($page1,e); }).unbind("mouseout").bind("mouseout",function(e){ return resize(e); }); // $("#button2").unbind("mouseover").bind("mouseover",function(e){ // var $page2 = $(".page2"); // 添加特定的 return increase($page2,e); }).unbind("mouseout").bind("mouseout",function(e){ return resize(e); }); // $("#button3").unbind("mouseover").bind("mouseover",function(e){ // var $page3 = $(".page3"); // 添加特定的 return increase($page3,e); }).unbind("mouseout").bind("mouseout",function(e){ return resize(e); }); // $("#button4").unbind("mouseover").bind("mouseover",function(e){ // var $page4 = $(".page4"); // 添加特定的 return increase($page4,e); }).unbind("mouseout").bind("mouseout",function(e){ return resize(e); }); // $(".pages").unbind("mouseover").bind("mouseover",function(e){ // var $this = $(this); // 添加特定的 //return increase($this,e); }).unbind("mouseout").bind("mouseout",function(e){ // 所有的都移除 //return resize(e); }); // 新的 $(".pages").unbind("click touchstart").bind("click touchstart",function(e){ // var $this = $(this); var expstatus = $this.data("expstatus"); if(!expstatus){ // 没有展开过 // return increase($this,e); } else { return resize(e); } }); // $("body").click(function(e){ // 所有的都移除 return resize(null); }); }); </script> </head> <body> <div class="pages page1">page1</div> <div class="pages page2">page2</div> <div class="pages page3">page3</div> <div class="pages page4">page4</div> <div style="background-color: #a5cfff;"> <button id="button1">第一页</button> <button id="button2">第2页</button> <button id="button3">第3页</button> <button id="button4">第4页</button> </div> </body> </html>
一个CSS+jQuery的放大缩小动画效果的更多相关文章
- 深入学习jQuery的三种常见动画效果
× 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- 用C3中的animation和transform写的一个模仿加载的时动画效果
用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...
- jquery 最简单的动画效果
<p style="border: 1px solid red"> 我会慢慢变大 </p> <a>dianji</a> <sc ...
- jQuery中的渐变动画效果
jQuery中的渐变动画效果jQuery中的渐变动画效果
- 实现一个与内容合二为一的ActionBar动画效果
实现一个与内容合二为一的ActionBar动画效果,让你的actionbar更生动.以下是效果图: 这样的效果的优点是让actionbar也成为了内容的一部分,实际应用的效果比图片展示的效果要好,除了 ...
- 简单css实现input提示交互动画效果
通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...
- Jquery绑定事件及动画效果
Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...
- 关于JQuery(最后一点动画效果*)
1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一 ...
随机推荐
- java中的构造,封装
今天给大家讲一下面向对象中的构造,封装: 构造:构造方法有以下几个特点:1.方法名和类名一致.2.无返回类型.接下来的几种构造样式,直接上代码吧: //这是一个宠物类 有一个属性:名字(name) p ...
- SAS中的剔除空格函数
left函数: 刪除字符串左边(开头> 的空格right函数: 刪除字符串右边(结尾> 的空格trim函数: 刪除字符串右边(结尾> 的空 ...
- 剑指架构师系列-Logstash分布式系统的日志监控
Logstash主要做由三部署组成: Collect:数据输入 Enrich:数据加工,如过滤,改写等 Transport:数据输出 下面来安装一下: wget https://download.el ...
- Node.js 实用工具
稳定性: 4 - 锁定 这些函数都在'util' 模块里.使用 require('util') 来访问他们. util 模块原先设计的初衷是用来支持 node 的内部 API 的.这里的很多的函数对你 ...
- Spring常用配置
----------------------------------------------------------------------------------------------[版权申明: ...
- 用Netty解析Redis网络协议
用Netty解析Redis网络协议 根据Redis官方文档的介绍,学习了一下Redis网络通信协议.然后偶然在GitHub上发现了个用Netty实现的Redis服务器,很有趣,于是就动手实现了一下! ...
- Ubuntu14下安装svn仓库,以及权限配置
sudo apt-get update 接下来安装svn apt-get install subversionapt-get install libapache2-svn 检查svn是否安装成功了: ...
- 基于Nginx服务器和iOS9的HTTPS安全通信
简介 在网络通信中,使用抓包软件可以对网络请求进行分析,并进行重放攻击,重放攻击的解决方案一般是使用一个变化的参数,例如RSA加密的时间戳,但考虑到网络传输时延,时间戳需要有一定的误差容限,这样仍然不 ...
- Maven简介(Maven是什么)
简介 Maven,在意第绪语中意为对知识的积累.Maven最初用来在Jakarta Turbine项目中简化该项目的构建过程.Jakarta Trubine项目有多个工程,每个工程都有自己的多个Ant ...
- EBS值集,弹性域常用表
值集 select * from fnd_flex_value_sets select * from fnd_flex_values select * from fnd_flex_valu ...