javascript实现圣旨卷轴展开效果（代码分享）
作者：kb码农 时间：2024-04-10 11:03:29
效果图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jQuery 3.1.1.js"></script>
<title>诏书</title>
<style type="text/css">
body,ul,li,p,h1,h2,h3,h4,h5{
margin:0;
padding:0;
font-size:100％;
}
body{
font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', SimSun, 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
font-size: 50px;
background: #6f0b02;
}
img{
border:0;
}
.content{
position: relative;
margin: 40px 0 0 -21px;
width: 900px;
height: 460px;
}
.l-pic-index{
position: absolute;
left: 400px;
top: 1px;
z-index:2;
width:50px;
height:460px;
background: url("images/11.png") no-repeat right 0;
}
.r-pic-index{
position: absolute;
right: 400px;
top: 0;
z-index: 2;
width:50px;
*width:82px;
height:460px;
background: url("images/11.png") no-repeat left 0;
}
.l-bg-index{
position: absolute;
top: 20px;/*中间转轴位置*/
left: 430px;
z-index: 1;
width: 25px;
height: 459px;
background: url("images/bg1.png") right 0 no-repeat;
}
.r-bg-index{
position: absolute;
top: 20px;
right: 430px;
z-index: 1;
width: 25px;
height: 459px;
background: url("images/bg1.png") 0 0 no-repeat;
}
.main-index{
display: none;
overflow: hidden;
zoom:1;
position: absolute;
z-index: 5;
width:700px;
height:280px;
left:90px;
top:90px;
color: #2e2e2e;
}
.intro-text{
margin: 10px 0 0 44px;
line-height: 2;
text-indent: 3px;
}
</style>
</head>
<body>
<div class="content">
<div class="l-pic-index"></div><!--左转轴-->
<div class="r-pic-index"></div><!--右转轴-->
<div class="l-bg-index"></div>
<div class="r-bg-index"></div>
<div class="main-index">
<!-- <h1 class="title"><img src="./img/intro-title.png" alt=""></h1> -->
<p class="intro-text">
奉天承运皇帝诏曰：下班没？
</p>
</div>
</div>
</body>
<script>
window.onload = function(){
//卷轴展开效果
$(".l-pic-index").animate({'left':'50px','top':'-5px'},1450);
$(".r-pic-index").animate({'right':'-60px','top':'-5px'},1450);
$(".l-bg-index").animate({'width':'433px','left':'73px'},1500);
$(".r-bg-index").animate({'width':'433px','right':'-38px'},1500,function(){
$(".main-index").fadeIn(800);
});
}
</script>
</html>
来源：http://www.qdfuns.com/notes/32726/e7c255ace17d9da395c6724b1d044560.html
标签：js,展开
0
投稿猜你喜欢
解决tensorflow添加ptb库的问题
2022-05-28 07:44:02
javascrip关于继承的小例子
2024-04-22 22:17:49
利用脚本自动安装SQLServer的实现步骤分析
2024-01-22 20:02:11
Python协程实践分享
2023-09-01 05:50:51
python中查找excel某一列的重复数据 剔除之后打印
2022-10-27 06:34:00
在 Golang 中实现 Cache::remember 方法详解
2024-04-26 17:21:08
python设置中文界面实例方法
2023-08-30 18:56:30
Git标签管理
2022-02-01 18:53:06
Python中字符串的基础介绍及常用操作总结
2022-04-12 18:01:03
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2021-12-21 04:06:14
Python最长公共子串算法实例
2022-08-11 01:29:57
利用Python 制作二维码
2022-07-28 01:07:13
MySQL 实例无法启动的问题分析及解决
2024-01-21 10:50:06
PHP chr()函数讲解
2023-06-05 04:03:58
Pandas 类型转换astype()的实现
2022-03-13 17:39:52
用Python的线程来解决生产者消费问题的示例
2023-12-07 19:56:14
Python heapq使用详解及实例代码
2023-03-07 14:36:56
使用Pytorch+PyG实现MLP的详细过程
2023-05-03 17:48:14
快速掌握 Mysql数据库对文件操作的封装
2009-02-23 17:37:00
Django中自定义查询对象的具体使用
2021-05-26 03:11:18