日期： 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的放大缩小动画效果的更多相关文章

  1. 深入学习jQuery的三种常见动画效果

    × 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...

  2. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  3. 用C3中的animation和transform写的一个模仿加载的时动画效果

    用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...

  4. jquery 最简单的动画效果

    <p style="border: 1px solid red"> 我会慢慢变大 </p> <a>dianji</a> <sc ...

  5. jQuery中的渐变动画效果

    jQuery中的渐变动画效果jQuery中的渐变动画效果

  6. 实现一个与内容合二为一的ActionBar动画效果

    实现一个与内容合二为一的ActionBar动画效果,让你的actionbar更生动.以下是效果图: 这样的效果的优点是让actionbar也成为了内容的一部分,实际应用的效果比图片展示的效果要好,除了 ...

  7. 简单css实现input提示交互动画效果

    通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...

  8. Jquery绑定事件及动画效果

    Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...

  9. 关于JQuery（最后一点动画效果*）

    1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一 ...

随机推荐

  1. bootstrap插件fileinput.js 显示无法上传失败

    哪怕图片已经传到服务器上了 依然显示出错 // 处理完成后,必须返回一个json数据,否则会报错误 JSONObject jsonObject = new JSONObject(); jsonObje ...

  2. IE10以下兼容H5中的placeholder 以及改变它默认颜色

    placeholder是H5<input>的属性之一,可惜在IE10以下不支持,万恶的IE!不过正因为有IE,才多了很多捣鼓,添了乐趣.不支持就不支持呗,自己动手丰衣足食,我们可以用js模 ...

  3. 利用生产者消费者模型和MQ模型写一个自己的日志系统-并发设计里一定会用到的手段

    一:前言 写这个程序主要是用来理解生产者消费者模型,以及通过这个Demo来理解Redis的单线程取原子任务是怎么实现的和巩固一下并发相关的知识:这个虽然是个Demo,但是只要稍加改下Appender部 ...

  4. python笔记一（语言简介、解释器、输入输出）

    一.python语言简介 一顿狂吹python目前有多火.多NB,哈哈哈,不过用起来心情确实很舒畅. 解释性语言:缺点,运行速度慢. 二.python解释器 与C.C++.java不同,以上都需要先将 ...

  5. Linux（十七）动态监控进程

    17.1 介绍 top与ps命令很相似.它们都用来显示正在执行的进程.top与ps最大的不同之处,在于top在执行一段时间可以更新正在运行的进程 17.2 语法 top    [选项] 常用选项   ...

  6. Dynamics CRM2011 导入解决方案报根组件插入错误的解决方法

    今天在还原一个老版本的解决方案,在导入时报根组件插入问题"Cannot add a Root Component 38974590-9322-e311-b365-00155d810a00 o ...

  7. Android音频处理——通过AudioRecord去保存PCM文件进行录制，播放，停止，删除功能

    Android音频处理--通过AudioRecord去保存PCM文件进行录制,播放,停止,删除功能 音频这方面很博大精深,我这里肯定讲不了什么高级的东西,最多也只是一些基础类知识,首先,我们要介绍一下 ...

  8. 剑指offer-面试题7：俩个栈实现队列（java）

    详细分析请参照C语言版,这里仅仅给出实现代码,注释很详细,不得不说java各种api用起来真是爽飞了 1 package com.xsf.SordForOffer; 2 3 import java.u ...

  9. Android必知必会-Android Studio修改包名

    如果移动端访问不佳,请尝试–> Github版 背景 公司做相似产品较多,一般都是以某个产品为基础修改,逐步替换设计图的切图.这个就会导致需要经常为Copy的项目修改包名. 这里是参考一些网上的 ...

  10. iOS下JS与OC互相调用（五）--UIWebView + WebViewJavascriptBridge

    WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star.我去翻看了它的第一版本已经是4年前了,在版本V4.1.4以 ...