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