CSS、jQuery实现放大缩小动画效果

最新推荐文章于 2022-08-24 11:44:52 发布
最新推荐文章于 2022-08-24 11:44:52 发布
阅读量2.6k 收藏
点赞数
分类专栏： Javascript相关 文章标签： jQuery动画效果
因为需求就只有4个元素。如果是要用CSS的class来处理，那就需要用到CSS3动画了，介绍下如何实现这个放大缩小动画效果。

代码： 
<!DOCTYPE html> 
<html> 
<head> 
<title> CSS+jQuery动画效果-www.jbxue.com</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 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",""); 
}); 


e.stopPropagation(); 
return false; 
}; 
// 
$("#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); 
}); 
// 
$("body").click(function(e){ 
// 所有的都移除 
return resize(e); 
}); 
}); 
</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>
my_baby_2009
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript实现仿苹果电脑窗口最小化效果、css实现不规则图形的div
sdxjwkq01的博客
10-02 1949
今天值班，继续分享个没用的技术，最近一个微信闲聊群的网友问能不能用div实现类似于苹果电脑窗口最小化的动画效果（窗口边框变得向内弯曲同时快速缩小直至消失），大概想了下，如果要完全还原，要用canvas模拟，因为要把div内容画到画布上，然后再扭曲图像，但还有一种简单方法，用js控制css实现不规则图形的div，把div的左边框用贝塞尔曲线画出来，这样差不多就实现了类似于窗口向内弯曲的效果，下面先上效果图。
jQuery中的动画效果
originalApril的博客
04-01 140
本文主要介绍了jquery中的四种动画效果，淡入淡出、滑动、显示隐藏和自定义动画，以及停止动画的方式。
jQuery放大缩小淡入淡出焦点图特效特效代码
03-20
jQuery放大缩小淡入淡出焦点图特效是一款基于slick插件实现的jQuery图片放大缩小淡入淡出过渡动画焦点图特效效果，它还支持手机移动触摸设备。
js实现图片在一个div中点击按钮放大缩小效果
热门推荐
直到世界的尽头
08-27 1万+
图片放大，缩小也是前端中经常遇到得问题，以下就根据这个需求，做如下示范： <!DOCTYPE html> <html> <head> <title>图片放大</title> </head> <style type="text/css"> .main_div{ margin: 20px auto; tex...
CSS伪类实现加号
CaseyWei
11-15 919
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
Css中时间div动画缩放效果
m0_64411343的博客
08-24 575
Css中时间div动画缩放效果
CSS+jQuery实现的一个放大缩小动画效果
10-26
在本文中，我们将探讨如何使用CSS和jQuery来创建一个简单的放大缩小动画效果。这个效果适用于只有四个元素的场景，可以通过CSS3动画实现，但这里我们采用jQuery进行动态控制，以达到更加灵活的效果。 首先，我们...
一个CSS+jQuery实现的放大缩小动画效果
10-26
在本文中，我们将探讨如何使用CSS和jQuery来创建一个动态的放大缩小动画效果。这个效果通常用于提升用户体验，比如在用户交互时使元素更显眼或突出显示特定内容。以下是如何实现这一效果的详细步骤： 首先，我们...
jQuery实现点击图标div循环放大缩小功能
10-17
本篇文章将详细介绍如何使用jQuery实现点击图标时，div元素循环放大缩小的功能。 首先，jQuery是一个轻量级的JavaScript库，它提供了丰富的API和简洁的语法，使得开发者能更轻松地操作DOM元素、处理事件和执行动画...
jquery.easing插件图片放大缩小动画效果
06-10
效果描述： jQuery.easing插件是一款非常轻，非常小的jQuery插件，只占有8KB大小 几乎不会影响你的网页加载速度。 它提供了简单的动画效果，如淡入淡出以及自定义动画效果，使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。 虽然说插件出来的时间比较长，但它小，经过很多网站的使用，成熟度也非常的高。尤其是在一些页面滚动、 幻灯片切换等场景应用比较多。它非常小巧，且有多种动画方案供选择，使用简单，而且免费。 使用方法： 1、将anrenzhijia.css样式引入到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可 (js、图片采用绝对路径，不建议修改)
一个简单的图片放大效果基于jquery animate函数
05-29
一个简单的图片放大效果基于jquery animate函数，很简单的，自己可以修改一下用。jquery文件通用自己改一下链接文件。
js实现改变div层缓慢收缩和放大（动态改变大小的方式）
qq_33638928的博客
12-16 1452
js实现改变div层缓慢收缩和放大 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> #testDiv { width: 200px; height: 200px; border: 1px solid red; }
用jQuery写图片放大和缩小
m0_68189681的博客
03-18 1595
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-1.11.2.js"></script> </head> <body> <h2>图片放大缩小</h2> <img src="img/1d.jpg" a.
JQuery放大动画
weixin_44762420的博客
04-27 1764
1.首先搭建html 分析页面可知，一个大的div class="p_list"里面嵌套一个<img>标签和图片标题，图片标题用div class="p_Alt"包括。 2.搭建css样式 分析样式可知，现在主要有三种样式，p_list和<img>和p_Alt。 3.编写JQuery代码 首先需要获取P_list类，且获取p_list是多个对象数组，我们不知道具体操作哪一个...
jquery实现动画效果，放大淡化消失
qq_37828633的博客
05-07 2942
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &
jquery 通过animate实现height: auto展开收缩动画
yumihe
08-27 4095
 实现原理：当点击展开时，获取元素height: auto的高度为多少像素，由当前高度到height:auto的过渡；反之。 var m_flag = true; var el = $(".case-detail-con"), curHeight = el.height(); $("#casesdetail_more").click(function(){ if(m_flag){ ...
jquery ui放大缩小_jQuery UI 实例
weixin_33193480的博客
12-29 500
jQuery UI 实例 - 缩放(Resizable)使用鼠标改变元素的尺寸。如需了解更多有关 resizable 交互的细节，请查看 API 文档 可调整尺寸小部件(Resizable Widget)。默认功能在任意的 DOM 元素上启用 resizable 功能。通过鼠标拖拽右边或底边的边框到所需的宽度或高度。jQuery UI 缩放(Resizable) - 默认功能#resizable ...
前端学习：jQuery--轮播图，旋转缩放平移动画，仿华为商城案例
qq_45926448的博客
07-25 1400
js轮播图，jQuery无缝轮播图，旋转缩放平移动画，仿华为商城案例
css点击放大缩小动画
最新发布
03-31
这会导致元素在鼠标悬停时产生放大效果的动画。 需要注意的是，我们使用了hover伪类来触发动画效果。这意味着当鼠标悬停在元素上时，元素会被放大。当鼠标离开元素时，元素将返回到原始大小，但不会产生动画效果。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值