CSS+jQuery实现的一个放大缩小动画效果
32 浏览量
2020-12-02
14:10:26
上传
评论
收藏 33KB PDF 举报
CSS+jQuery实现的一个放大缩小动画效果实现的一个放大缩小动画效果
今天帮朋友写了一些代码,自己觉得写着写着，好几个版本以后，有点满意，于是就贴出来。
都是定死了的。因为需求就只有4个元素。如果是要用CSS的class来处理，那就需要用到CSS3动画了。
代码如下:
<!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 style = $div.attr(“style”);
$div.addClass(“current”).attr(“styleold”,style);
//
$div.stop();
资源评论
