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
0
投稿
猜你喜欢
- 学了一个多月的python,做了一个小程序:python实现简单成绩录入系统,实验一下menu部分from tkinter import*#
- 我想做一个页面,10秒后转向其它页。想在网页中显示10秒的倒计时。谢谢了。对JS不懂 方法一:<html><h
- 图片提取为了方便技术展示,我们选取素材为演员杨紫的一段演讲视频,用例仅为技术交流演示使用,不针对任何指定人。为达到我们AI换脸的目的,我们首
- 本文实例为大家分享了python修改装饰器中参数的具体代码,供大家参考,具体内容如下案例: &
- 环境python版本号系统游览器python 3.7.2win7google chrome关于本文本文将会通过爬虫的方式实现简单的百度翻译。
- 结合网上的资料,自己亲自的去安装了一次MySQL,安装版本是win7x64 5.7.16。在安装过程中出现并解决了如下问题:“mysql 服
- 原理中文分词,即 Chinese Word Segmentation,即将一个汉字序列进行切分,得到一个个单独的词。表面上看,分词其实就是那
- 下午有同学Python学习群里说,使用pyinstaller打包源码时,因为代码中使用了图像、音频、视频等资源文件,无法将程序打包成单一的可
- subprocess.run()运行并等待args参数指定的指令完成,返回CompletedProcess实例。参数:(*popenargs
- 这篇文章主要介绍了Python使用configparser库读取配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考
- 而标准的事件触发可以使用dispatchEvent方法。但现在FF5无法触发了A的默认行为了。如下 <!doctype html>
- 本文实例讲述了python生成器用法。分享给大家供大家参考,具体如下:1. 生成器利用迭代器,我们可以在每次迭代获取数据(通过next()方
- //定义编码header( 'Content-Type:text/html;charset=utf-8 ');//Atomh
- 前言如果大家在网上搜索Python 正则表达式,你将会看到大量的垃圾文章会这样写代码:import repattern = re.compi
- JSON Schema是一个用于验证JSON数据结构的强大工具, 我查看并学习了JSON Schema的官方文档, 做了详细的记录, 分享一
- asp定时生成静态HTML的代码,对于缓解服务器压力有很大帮主,需要的朋友可以参考下。<% '判断是否要生成新的HT
- 本文实例讲述了python简单程序读取串口信息的方法。分享给大家供大家参考。具体分析如下:这段代码需要调用serial模块,通过while循
- CentOS7服务器中apache、php7以及mysql5.7的配置代码如下所示:yum upgradeyum install net-t
- 一、什么是数据驱动测试DDT:data drive test准备一组数据,通过写一个测试用例,不同的数据进行迭代。二、csv文件承载数据CS
- 一。存储过程的创建和使用 1.创建程序包,并在程序中创建存储过程 create or replace PACKAGE NCS_ICP_TJ