javascript实现圣旨卷轴展开效果（代码分享)

效果图：

代码如下：

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 '脚本类型=' text/JAVAScript ' src=' http : jquery 3。1 .1 .js '/脚本标题诏书/titlestyle type='text/css'body，ul，li，p，h1，h2，h3，h4，h5 { margin:0划水：0;字号：100%；}正文{ font-family: '微软雅黑用户界面'，'微软雅黑，SimSun，' Segoe UI '，Tahoma，Helvetica，无衬线；font-size : 50px背景技术： # 6f 0b 02} img { border:0}。内容{位置：相对；边距： 40px 0 0-21px；宽度： 900像素；高度： 460像素；}.l-pic-索引{位置：绝对值；left: 400pxtop: 1pxz索引：2;宽度：50 px高度：460 px背景： URL(' images/11。png ')无重复权限0;}.r-pic-索引{位置：绝对值；right : 400 pxtop : 0；z-index : 2；宽度：50 px*宽度：82 px高度：460 px背景： URL(' images/11。png ')无重复左0;}.l-BG-索引{位置：绝对值；top: 20px/*中间转轴位置*/左： 430 pxz-index : 1；宽度： 25px高度： 459像素；背景： URL(' images/bg1。png ')右0不重复；}.r-BG-索引{位置：绝对值；top : 20pxright : 430 pxz-index : 1；宽度： 25px高度： 459像素；背景： URL(' images/bg1。png ')0 0不重复；}.主索引{ display:无飞越：隐藏；动物园：1绝对位置：z指数： 5；宽度宽度：700像素高度：280 pxleft :90 pxtop :90 pxcolor : # 2e 2e 2e 2；}.intro-text { margin : 10px 0 0 44px；线高： 2;文本缩进： 3px}/style/head dydiv class=' content ' div class=' l-pic-index '/div！-左转轴- div class='r-pic-index'/div！-右转轴-div class=' l-BG-index '/div class=' r-BG-index '/div class=' main-index '！-h1 class=' title ' img src=' http :/img/intro-title。png ' alt=' '/h1-p class=' intro-text '奉天承运皇帝诏曰：下班没？/p/div/div/正文脚本窗口。onload=function(){//卷轴展开效果$('.l-pic-index ').动画({'left':'50px '，' top':'-5px'}，1450)；$('.r-pic-index ').动画({ '右：'-60px '，'上：'-5px'}，1450)；$('.l-BG-index ').动画({'width':'433px '，' left':'73px'}，1500)；$('.' r-BG-index ' .animate({'width':'433px '，' right':'-38px'}，1500，function(){ $(').主索引')。法丁(800);});}/脚本/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！