原生JS實現(xiàn)圣旨卷軸展開效果
更新時間：2017年03月06日 10:21:02 作者：前端工程師_錢成
本文主要介紹了原生JS實現(xiàn)詔書卷軸展開效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧
在其他網(wǎng)站看見類似效果，但代碼有400多行且看不懂，我用60多行的代碼給予實現(xiàn)。
實現(xiàn)原理：（1）利用絕對定位固定好起始位置；（2）利用遮罩將右軸右側(cè)的部分遮住；（3）讓右軸和遮罩同時同速度向右運動！
效果圖：
代碼如下：
<!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í)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了微信小程序中button去除默認的邊框的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-08-08
JavaScript的Number對象的toString()方法
toString()方法可以把Number對象轉(zhuǎn)換成字符串，并返回此字符串，本文給大家介紹JavaScript的Number對象的toString()方法，對javascript對象方法相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)音樂播放器，支持循環(huán)、隨機播放，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了基于javascript實現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
JavaScript+HTML?實現(xiàn)網(wǎng)頁錄制音頻與下載
在這個數(shù)字化的時代,網(wǎng)頁端的音頻處理能力已經(jīng)成為一個非常熱門的需求,本文將詳細介紹如何利用 getUserMedia 和 MediaRecorder 這兩個強大的 API,實現(xiàn)網(wǎng)頁端音頻的錄制、處理和播放等功能,需要的朋友可以參考下2024-07-07
這篇文章主要給大家介紹了關(guān)于js中復(fù)選框的取值及賦值的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
fiv.js實現(xiàn)flv文件blob流實時播放的項目實踐
本文主要介紹了fiv.js實現(xiàn)flv文件blob流實時播放的項目實踐，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
下面小編就為大家?guī)硪黄掳俣葥Q膚功能的簡單實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
ES6提供了大量新的好的東西，在過去的一年內(nèi)，瀏覽器提供商做了大量的辛勤工作將新的語言特性更新到他們的瀏覽器中。盡管有重大的更新，很多小的語言更新另我眼前一亮，下面這篇文章主要介紹了關(guān)于ES6的六個小特性,需要的朋友可以參考下。2017-02-02
JavaScript實現(xiàn)的數(shù)字與字符串轉(zhuǎn)換功能示例
這篇文章主要介紹了JavaScript實現(xiàn)的數(shù)字與字符串轉(zhuǎn)換功能,涉及javascript數(shù)字、字符串等運算與轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下2017-08-08