Javascript+CSS實(shí)現(xiàn)影像卷簾效果思路及代碼
用過Arcgis的筒子們對(duì)于Arcmap里面的一個(gè)卷簾效果肯定記憶很深刻,想把它搬到自己的WebGIS系統(tǒng)中去,抱著同樣的想法,我也對(duì)這種比較炫的卷簾效果做了一下研究,吼吼,出來了,給大家匯報(bào)一下成果
看到這樣的效果,你是不是小雞動(dòng)了一下,嘿嘿,別急,聽我慢慢道來。
首先,容器。分別用兩個(gè)DIV來顯示兩個(gè)不同時(shí)期的影像。接下來設(shè)置兩個(gè)容器的樣式,代碼:
#after{ position: absolute; top: 0px; left: 0px; background-image: url(../images/24.jpg); width: 940px; height: 529px; background-repeat: no-repeat; } #before{ position: absolute; top: 0px; left: 0px; border-right: 3px solid #f00; background-image: url(../images/23.jpg); width: 433px; height: 529px; background-repeat: no-repeat; max-width: 940px; }
這樣,圖片就在web上顯示出來了。
接下來實(shí)現(xiàn)卷簾效果。實(shí)現(xiàn)卷簾,最主要的是設(shè)置before的寬度,如何去設(shè)置呢,就是獲取鼠標(biāo)的位置,代碼如下:
function RollImage(evt){ var x=evt.pageX; console.log(x); $("#before").css("width",x+"px"); } /script>
這樣,卷簾的效果就實(shí)現(xiàn)了。源代碼如下:
style.css
.beforeafter{ width: 940px; height: 529px; } #after{ position: absolute; top: 0px; left: 0px; background-image: url(../images/24.jpg); width: 940px; height: 529px; background-repeat: no-repeat; } #before{ position: absolute; top: 0px; left: 0px; border-right: 3px solid #f00; background-image: url(../images/23.jpg); width: 433px; height: 529px; background-repeat: no-repeat; max-width: 940px; }
test.html
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"><head> <title>日本地震災(zāi)區(qū)前后對(duì)比</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-CN"> <link href="css/roll.css" type="text/css" rel="stylesheet"> <script src="../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function RollImage(evt){ <strong>var x=evt.pageX; $("#before").css("width",x+"px");</strong> } </script> </head> <body> <div class="beforeafter" onmousemove="RollImage(event)"> <div id="after"></div> <div id="before"> </div> </div> </body> </html>
- js圖片卷簾門導(dǎo)航菜單特效代碼分享
- js實(shí)現(xiàn)選項(xiàng)卡內(nèi)容切換以及折疊和展開效果【推薦】
- JS實(shí)現(xiàn)可展開折疊層的鼠標(biāo)拖曳效果
- JS+CSS實(shí)現(xiàn)的簡單折疊展開多級(jí)菜單效果
- js實(shí)現(xiàn)可折疊展開的手風(fēng)琴菜單效果
- JS實(shí)現(xiàn)鼠標(biāo)滑過折疊與展開菜單效果代碼
- js實(shí)現(xiàn)簡單折疊、展開菜單的方法
- js實(shí)現(xiàn)超簡單的展開、折疊目錄代碼
- Js操作樹節(jié)點(diǎn)自動(dòng)折疊展開的幾種方法
- 原生Js與jquery的多組處理, 僅展開一個(gè)區(qū)塊的折疊效果
- JS+DIV實(shí)現(xiàn)的卷簾效果示例
相關(guān)文章
JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】
本文結(jié)合Bootstrap table的父子表和行列調(diào)序的用法再來介紹下它稍微高級(jí)點(diǎn)的用法。對(duì)bootstrap表格組件相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-05-05JavaScript前端開發(fā)之實(shí)現(xiàn)二進(jìn)制讀寫操作
這篇文章主要介紹了JavaScript前端開發(fā)之實(shí)現(xiàn)二進(jìn)制讀寫操作的相關(guān)資料,需要的朋友可以參考下2015-11-11js bind 函數(shù) 使用閉包保存執(zhí)行上下文
在javascript中,函數(shù)總是在一個(gè)特殊的上下文執(zhí)行(稱為執(zhí)行上下文),如果你將一個(gè)對(duì)象的函數(shù)賦值給另外一個(gè)變量的話,這個(gè)函數(shù)的執(zhí)行上下文就變?yōu)檫@個(gè)變量的上下文了。下面的一個(gè)例子能很好的說明這個(gè)問題2011-12-12微信小程序?qū)W習(xí)總結(jié)(三)條件、模板、文件引用實(shí)例分析
這篇文章主要介紹了微信小程序條件、模板、文件引用,結(jié)合實(shí)例形式分析了微信小程序if條件判斷、模板調(diào)用、wxss文件引用等相關(guān)操作技巧,需要的朋友可以參考下2020-06-06XML文件轉(zhuǎn)化成NSData對(duì)象的方法
這篇文章主要介紹了XML文件轉(zhuǎn)化成NSData對(duì)象的方法,需要的朋友可以參考下2015-08-08從零開始用electron手?jǐn)]一個(gè)截屏工具的示例代碼
這篇文章主要介紹了從零開始用electron手?jǐn)]一個(gè)截屏工具的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10使用json來定義函數(shù),在里面可以定義多個(gè)函數(shù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄褂胘son來定義函數(shù),在里面可以定義多個(gè)函數(shù)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10IntersectionObserver判斷是否在可視區(qū)域詳解
這篇文章主要為大家介紹了IntersectionObserver判斷是否在可視區(qū)域詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10javascript 實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄實(shí)例詳解
這篇文章主要介紹了javascript 實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊欄實(shí)例詳解的相關(guān)資料,并附實(shí)例代碼,幫助大家學(xué)習(xí)理解,需要的朋友可以參考下2016-11-11Three.js實(shí)現(xiàn)3D機(jī)房效果
這篇文章主要為大家詳細(xì)介紹了Three.js實(shí)現(xiàn)3D機(jī)房效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12