javascript實(shí)現(xiàn)圣旨卷軸展開效果（代碼分享）
更新時(shí)間：2017年03月23日 09:02:34 作者：kb碼農(nóng)
本文主要介紹了javascript實(shí)現(xiàn)圣旨卷軸展開效果的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
效果圖：
代碼如下：
<!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;/*中間轉(zhuǎn)軸位置*/
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><!--左轉(zhuǎn)軸-->
<div class="r-pic-index"></div><!--右轉(zhuǎn)軸-->
<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">
奉天承運(yùn)皇帝詔曰：下班沒？
</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>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
javascript算法學(xué)習(xí)實(shí)現(xiàn)代碼
有1到100000共10萬個(gè)數(shù)。從中隨機(jī)抽走兩個(gè)。再把原來的數(shù)字順序打亂。如何快速找到被抽走的兩個(gè)數(shù)2011-04-04
bootstrap table.js動(dòng)態(tài)填充單元格數(shù)據(jù)的多種方法
這篇文章主要為大家詳細(xì)介紹了bootstrap table.js填充單元格數(shù)據(jù)的多種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
下面小編就為大家?guī)硪黄狫avaScript中閉包之淺析解讀(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08 
本文主要介紹了js中創(chuàng)建對(duì)象的幾種方式。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02 
這篇文章主要介紹了有JSDoc還需要TypeScript的問題示例解析,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06 
這篇文章主要介紹了JS實(shí)現(xiàn)的貪吃蛇游戲,結(jié)合具體案例形式分析了javascript實(shí)現(xiàn)貪吃蛇的相關(guān)步驟、原理、算法操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2019-05-05 
JS 實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼的“59秒后重新發(fā)送驗(yàn)證短信”功能
這篇文章主要介紹了JS 實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼的“59秒后重新發(fā)送驗(yàn)證短信”功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-08-08 
JavaScript實(shí)現(xiàn)簡單省市聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單省市聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10 
element-ui的表單驗(yàn)證清除校驗(yàn)提示語的解決方案
對(duì)表單域中的數(shù)據(jù)進(jìn)行校驗(yàn)的時(shí)候,其中有一項(xiàng)比較特殊,不是簡單的輸入框,下拉框這些表單元素,而是自己寫的一個(gè)el-table的選擇彈窗,本文給大家介紹element-ui的表單驗(yàn)證如何清除校驗(yàn)提示語,感興趣的朋友一起看看吧
2024-01-01