原生JS實(shí)現(xiàn)圣旨卷軸展開效果

更新時(shí)間：2017年03月06日 10:21:02 作者：前端工程師_錢成

本文主要介紹了原生JS實(shí)現(xiàn)詔書卷軸展開效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧

在其他網(wǎng)站看見類似效果，但代碼有400多行且看不懂，我用60多行的代碼給予實(shí)現(xiàn)。

實(shí)現(xiàn)原理：（1）利用絕對定位固定好起始位置；（2）利用遮罩將右軸右側(cè)的部分遮?。唬?）讓右軸和遮罩同時(shí)同速度向右運(yùn)動！

效果圖：

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>詔書</title>
 <style type="text/css">
 * {
  margin: 0;
  padding: 0;
 }
 #animate {
  margin: 40px auto;
  width: 495px;
  height: 150px;
  position: relative;
  overflow: hidden;
 }
 #back {
  width: 495px;
  height: 150px;
  position: absolute;
  left: 0;
  top: 10px;
  background: url(http://cdn.attach.qdfuns.com/notes/pics/201703/04/191654mcfqzdfrxann5551.png) no-repeat;
 }
 #left {
  position: absolute;
  left: 0;
 }
 #right {
  position: absolute;
  left: 16px;
 }
 #mark {
  position: absolute;
  left: 44px;
 }
 </style>
</head>
<body>
<div id="animate">
 <div id="back"><img src="http://cdn.attach.qdfuns.com/notes/pics/201703/04/191214ug6h47d81jyfy6vh.png"/></div>
 <div id="left"><img src="http://cdn.attach.qdfuns.com/notes/pics/201703/04/191236gldigxmxg2zlh9s7.png"/></div>
 <div id="right"><img src="http://cdn.attach.qdfuns.com/notes/pics/201703/04/191244uhavf49l1zw440cv.png"/></div>
 <div id="mark"><img src="http://cdn.attach.qdfuns.com/notes/pics/201703/04/191254kfbz2tjupc1jigbb.png"/></div>
</div>
</body>
<script>
 var animate=document.getElementById("animate");
 var right = document.getElementById("right");
 var mark = document.getElementById("mark");
 var timer = setInterval(function () {
 var right1=getComputedStyle(right).left;
 var mark1=getComputedStyle(mark).left;
 if(parseFloat(right1)>=447){
  right1=447+"px";
  clearInterval(timer);
 }
 right.style.left=(parseFloat(right1)+10)+"px";
 mark.style.left=(parseFloat(mark1)+10)+"px";
 }, 100)
</script>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

js
展開

相關(guān)文章

微信小程序中button去除默認(rèn)的邊框?qū)嵗a
這篇文章主要介紹了微信小程序中button去除默認(rèn)的邊框的實(shí)例代碼，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-08-08
JavaScript的Number對象的toString()方法
toString()方法可以把Number對象轉(zhuǎn)換成字符串，并返回此字符串，本文給大家介紹JavaScript的Number對象的toString()方法，對javascript對象方法相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
原生JS實(shí)現(xiàn)小小的音樂播放器
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)音樂播放器，支持循環(huán)、隨機(jī)播放，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
基于javascript實(shí)現(xiàn)貪吃蛇小游戲
這篇文章主要介紹了基于javascript實(shí)現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
JavaScript+HTML?實(shí)現(xiàn)網(wǎng)頁錄制音頻與下載
在這個(gè)數(shù)字化的時(shí)代,網(wǎng)頁端的音頻處理能力已經(jīng)成為一個(gè)非常熱門的需求,本文將詳細(xì)介紹如何利用 getUserMedia 和 MediaRecorder 這兩個(gè)強(qiáng)大的 API,實(shí)現(xiàn)網(wǎng)頁端音頻的錄制、處理和播放等功能,需要的朋友可以參考下
2024-07-07
js中復(fù)選框的取值及賦值示例詳解
這篇文章主要給大家介紹了關(guān)于js中復(fù)選框的取值及賦值的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
fiv.js實(shí)現(xiàn)flv文件blob流實(shí)時(shí)播放的項(xiàng)目實(shí)踐
本文主要介紹了fiv.js實(shí)現(xiàn)flv文件blob流實(shí)時(shí)播放的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
仿百度換膚功能的簡單實(shí)例代碼
下面小編就為大家?guī)硪黄掳俣葥Q膚功能的簡單實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-07-07
關(guān)于ES6的六個(gè)小特性（二）
ES6提供了大量新的好的東西，在過去的一年內(nèi)，瀏覽器提供商做了大量的辛勤工作將新的語言特性更新到他們的瀏覽器中。盡管有重大的更新，很多小的語言更新另我眼前一亮，下面這篇文章主要介紹了關(guān)于ES6的六個(gè)小特性,需要的朋友可以參考下。
2017-02-02
JavaScript實(shí)現(xiàn)的數(shù)字與字符串轉(zhuǎn)換功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的數(shù)字與字符串轉(zhuǎn)換功能,涉及javascript數(shù)字、字符串等運(yùn)算與轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下
2017-08-08