javascript实现圣旨卷轴展开效果(代码分享)
作者:kb码农 发布时间:2024-04-10 11:03:29
标签:js,展开
效果图:
代码如下:
<!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


猜你喜欢
- 视频教程教学地址:https://www.bilibili.com/video/BV18441117Hd?p=10x01路由from fla
- 说明:因为数据库版本问题出现的项目启动没有错误,但是操作数据库的过程出现错误,为了保持数据库一致,重新检索到了安装mysql5.6的教程,不
- 简单用py写了一个贪吃蛇游戏,有单人、双人模式,比较简单,适合初学者练手。本上每行重要的语句都有注释,做了什么事一目了然这里介绍双人模式单人
- 前言Always On 可用性组活动辅助功能包括支持在辅助副本上执行备份操作。 备份操作可能会给 I/O 和 CPU 带来很大的压力(使用备
- 使用py时可能需要连续运行多条shell 命令1.# coding: UTF-8import sysreload(sys)sys.setde
- 第一个方法: MySQL 4.1 中文乱码的问题 最近要将 MySQL 4.0 升级到 MySQL 4.1 ,发现了中文乱码的问题,希望以下
- 服务器重新启动的情况当mysqld启动时,所有的授权表内容被读进存储器并且从那时开始生效。被服务器立即应用的情况用GRANT、REVOKE或
- 对python3下的requests使用并不是很熟练,今天稍微用了下,请求几次下来后发现出现连接超时的异常,上网查了下,找到了一个还算中肯的
- 简介Jenkins是一个开源的、提供友好操作界面的持续集成(CI)工具,起源于Hudson(Hudson是商用的),主要用于持续、自动的构建
- 1、预编译的好处大家平时都使用过JDBC中的PreparedStatement接口,它有预编译功能。什么是预编译功能呢?它有什么好处呢?当客
- 内容摘要:Cookies的值比ASP其他集合(例如Form和ServerVariables)的值要复杂得多。Cookie是一小块由浏览器存贮
- Neo4j是一款开源图数据库,Py2neo提供了使用Python语言访问Neo4j的接口。本文介绍了使用Py2neo的NodeMatcher
- 操作系统会为每一个创建的进程分配一个独立的地址空间,不同进程的地址空间是完全隔离的,因此如果不加其他的措施,他们完全感觉不到彼此的存在。那么
- 如下所示:def ref_txt_demo(): f = open('1.txt', 'r') data =
- 在 Golang 中处理浮点数存在着精度问题,而精度问题会带来诸多的麻烦。因此,我们需要使用高精度数来解决这个问题。shopspring/d
- 要自己写一个存储系统,可以依照以下步骤:1.写一个继承自django.core.files.storage.Storage的子类。from
- 题目描述输入一行或多行字符串密码,验证每行密码是否符合规范,符合提示“OK”,否则“NG”。密码规范为:1.长度超过8位2.包括大小写字母.
- Linux RedHat下安装Python2.7、pip、ipython环境、eclipse和PyDev环境准备工作,源Python2.6备
- mysql-5.7.19-winx64 免安装版配置方法,供大家参考,具体内容如下1.官方网站下载mysql-5.7.19-winx64,注
- 介绍最近在项目中遇到插入数据瓶颈,几万、几十万、几百万的数据保存到MYSQL数据库,使用EF插入数据速度非常慢,数据量非常大时EF插入需要几