原生JS實(shí)現(xiàn)圣旨卷軸展開效果
更新時間：2017年03月06日 10:21:02 作者：前端工程師_錢成
本文主要介紹了原生JS實(shí)現(xiàn)詔書卷軸展開效果的實(shí)例，具有很好的參考價值。下面跟著小編一起來看下吧
在其他網(wǎng)站看見類似效果，但代碼有400多行且看不懂，我用60多行的代碼給予實(shí)現(xiàn)。
實(shí)現(xiàn)原理：（1）利用絕對定位固定好起始位置；（2）利用遮罩將右軸右側(cè)的部分遮?。唬?）讓右軸和遮罩同時同速度向右運(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í)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
js使用for循環(huán)查詢數(shù)組中是否存在某個值
IE8不支持indexOf，因此寫一個for循環(huán)來判斷是否存在，下面是代碼，經(jīng)測試還不錯2014-08-08
EasyUI的DataGrid綁定Json數(shù)據(jù)源的示例代碼
本篇文章主要介紹了EasyUI的DataGrid綁定Json數(shù)據(jù)源的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
本文詳細(xì)向大家介紹了javascript變量聲明，并通過示例進(jìn)行了具體分析，是篇非常不錯的文章，這里推薦給剛?cè)腴T的jser。2014-11-11
當(dāng)代碼在一個環(huán)境中執(zhí)行時,會創(chuàng)建變量對象的一個作用域鏈,作用域鏈的用途是保證對執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問,下面這篇文章主要給大家介紹了關(guān)于JavaScript作用域鏈底層原理的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要向大家介紹了原生JS實(shí)現(xiàn)的LOADING效果的代碼，效果非常不錯，而且可以自定義顏色和速度，推薦給大家，希望大家能夠喜歡。2015-03-03
這篇文章主要介紹了js中“??“和“?.“用法小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了7種JS腳本分頁樣式，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要為大家介紹了JavaScript es6的新增數(shù)組方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
微信小程序云開發(fā)實(shí)現(xiàn)云數(shù)據(jù)庫讀寫權(quán)限
這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)實(shí)現(xiàn)云數(shù)據(jù)庫讀寫權(quán)限，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
在日常工作中，我們經(jīng)常需要對數(shù)組對象進(jìn)行排序，尤其是在處理數(shù)據(jù)可視化需求中。本文將介紹一些簡單而又實(shí)用的方法，幫助你實(shí)現(xiàn)對數(shù)組對象的某幾個 key 進(jìn)行排序2023-05-05