一个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,按钮高亮显示,一般是配置两个按钮,一个普通的,一 ...
随机推荐
- 修改原生单选框样式(vue单选组件)
一.效果如图 二.实现 修改单选样式 //html <div class="radio-wrap"> <input type="radio" ...
- CSS实现元素居中原理解析
在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简单:如果它是一个行内元素,就对它的 ...
- 跟着小菜学习RabbitMQ启动和基础(系列一)
前言 今天开始我们正式进入RabbitMQ系列学习,在这系列博客中也会发表.NET Core和EF Core文章,网上关于RabbitMQ例子比比皆是,我将综合网上所提供的信息并加上我个人的理解来详细 ...
- AngularJs 笔记
初识 directive 指令 ng-app 初始化一个AngularJs应用程序(通过一个值(比如 ng-app="myModule")连接到代码模块.) ng-init 初始化 ...
- Go 语言 goto 语句
Go 语言的 goto 语句可以无条件地转移到过程中指定的行. goto语句通常与条件语句配合使用.可用来实现条件转移, 构成循环,跳出循环体等功能. 但是,在结构化程序设计中一般不主张使用goto语 ...
- MYSQL 索引类型、什么情况下用不上索引、什么情况下不推荐使用索引
mysql explain的使用: http://blog.csdn.net/kaka1121/article/details/53394426 索引类型 在数据库表中,对字段建立索引可以大大提高查询 ...
- android自定义View之3D索引效果
效果图: 我的小霸王太卡了. 最近工作比较忙,今天搞了一下午才搞出来这个效果,这种效果有很多种实现方式,最常见的应该是用贝塞尔曲线实现的.今天我们来看另一种不同的实现方式,只需要用到 canvas.s ...
- Java经典设计模式之十一种行为型模式(附实例和详解)
Java经典设计模式共有21中,分为三大类:创建型模式(5种).结构型模式(7种)和行为型模式(11种). 本文主要讲行为型模式,创建型模式和结构型模式可以看博主的另外两篇文章:Java经典设计模式之 ...
- Linux SWAP 交换分区配置说明
一.SWAP 说明1.1 SWAP 概述 当系统的物理内存不够用的时候,就需要将物理内存中的一部分空间释放出来,以供当前运行的程序使用.那些被释放的空间可能来自一些很长时间没有什么操作的 ...
- 20160222.CCPP体系详解(0032天)
程序片段(01):宽字符.c+字符串与内存四区.c 内容概要:宽窄字符 ///宽字符.c #include <stdio.h> #include <stdlib.h> #inc ...