Javascript+CSS實現(xiàn)影像卷簾效果思路及代碼
用過Arcgis的筒子們對于Arcmap里面的一個卷簾效果肯定記憶很深刻,想把它搬到自己的WebGIS系統(tǒng)中去,抱著同樣的想法,我也對這種比較炫的卷簾效果做了一下研究,吼吼,出來了,給大家匯報一下成果
看到這樣的效果,你是不是小雞動了一下,嘿嘿,別急,聽我慢慢道來。
首先,容器。分別用兩個DIV來顯示兩個不同時期的影像。接下來設(shè)置兩個容器的樣式,代碼:
#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上顯示出來了。
接下來實現(xiàn)卷簾效果。實現(xiàn)卷簾,最主要的是設(shè)置before的寬度,如何去設(shè)置呢,就是獲取鼠標的位置,代碼如下:
function RollImage(evt){ var x=evt.pageX; console.log(x); $("#before").css("width",x+"px"); } /script>
這樣,卷簾的效果就實現(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ū)前后對比</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>
相關(guān)文章
JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】
本文結(jié)合Bootstrap table的父子表和行列調(diào)序的用法再來介紹下它稍微高級點的用法。對bootstrap表格組件相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-05-05JavaScript前端開發(fā)之實現(xiàn)二進制讀寫操作
這篇文章主要介紹了JavaScript前端開發(fā)之實現(xiàn)二進制讀寫操作的相關(guān)資料,需要的朋友可以參考下2015-11-11js bind 函數(shù) 使用閉包保存執(zhí)行上下文
在javascript中,函數(shù)總是在一個特殊的上下文執(zhí)行(稱為執(zhí)行上下文),如果你將一個對象的函數(shù)賦值給另外一個變量的話,這個函數(shù)的執(zhí)行上下文就變?yōu)檫@個變量的上下文了。下面的一個例子能很好的說明這個問題2011-12-12微信小程序?qū)W習(xí)總結(jié)(三)條件、模板、文件引用實例分析
這篇文章主要介紹了微信小程序條件、模板、文件引用,結(jié)合實例形式分析了微信小程序if條件判斷、模板調(diào)用、wxss文件引用等相關(guān)操作技巧,需要的朋友可以參考下2020-06-06使用json來定義函數(shù),在里面可以定義多個函數(shù)的實現(xiàn)方法
下面小編就為大家?guī)硪黄褂胘son來定義函數(shù),在里面可以定義多個函數(shù)的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10IntersectionObserver判斷是否在可視區(qū)域詳解
這篇文章主要為大家介紹了IntersectionObserver判斷是否在可視區(qū)域詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10javascript 實現(xiàn)動態(tài)側(cè)邊欄實例詳解
這篇文章主要介紹了javascript 實現(xiàn)動態(tài)側(cè)邊欄實例詳解的相關(guān)資料,并附實例代碼,幫助大家學(xué)習(xí)理解,需要的朋友可以參考下2016-11-11