这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
今天帮朋友写了一些代码, 自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来。 都是定死了的。因为需求就只有 4 个元素。如果是要用 CSS 的 class 来处理,那就需要用到 CSS3 动画了。 功能 : 在上方的按钮上滑动,可以切换各个 page, 点击下方的各个 page,也可以切换收缩还是展开状态。
放大缩小动画效果实现的方法有很多,下面有个不错的示例,使用 CSS+jQuery 实现的,感兴趣的朋友可以了解下
初始效果预览
- <!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>
来源: http://www.phperz.com/article/17/0416/276959.html