基于JavaScript實現(xiàn)滑動門效果
更新時間：2017年03月16日 11:37:31 作者：劉小妞
這篇文章主要為大家詳細介紹了js實現(xiàn)滑動門效果的相關代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了滑動門效果的具體代碼，供大家參考，具體內容如下
滑動門效果：
原理：
一共四道門，初始情況下，第一道門打開，其他三道門關閉，如第一個圖所示。
假設圖片的寬度是120px，其他三道門露出的寬度是80px。
初始狀態(tài)下，
第二道門左邊的距離是120px,
第三道門左邊的距離是200px,
第四道門左邊的距離是280px。
當第二道門打開時，
第二道門左邊的距離是80px，為（120-40）px
第三道和第四道門左邊的距離不變。
當第三道門打開時，
第二道門左邊的距離是80px，
第三道門左邊的距離是160px。（200-40）px
第四道門不變
因此每道門打開，是圖片的寬度減去露出的寬度，就是需要向左移動的距離。第三道門打開，第二道門需要先做移動，然后第三道門移動。每道門移動的距離都是圖片的寬度減去露出來的寬度。
程序：
<script type="text/javascript">
window.onload = function() {
var container = document.getElementById("container");
var imgs = container.getElementsByTagName("img");//獲取圖像
var imgWidth = imgs[0].offsetWidth;//圖片的寬度
var exposeWidth = 200;//露出的寬度
var containerWidth = imgWidth + exposeWidth * (imgs.length - 1); //外部盒子的總寬度
container.style.width = containerWidth + "px";
function Initial() {
for(var i = 1; i < imgs.length; i++) {
imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + "px";
}
}
Initial();
var translateWidth = imgWidth - exposeWidth;//移動的距離
for(var i = 0; i < imgs.length; i++) {
(function(i) {
imgs[i].onmouseover = function() {
Initial(); //鼠標經過圖片時，首先設置到初始狀態(tài)
for (var j=1;j<=i;j++) { //之前的圖片都移動相同的距離
imgs[j].style.left=parseInt(imgs[j].style.left)-translateWidth+"px";
}
}
})(i);
}
}
</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于使用Echarts設置地圖并觸發(fā)點擊事件的的相關資料,ECharts是一款基于JavaScript的數據可視化庫,可以用于創(chuàng)建各種類型的交互式圖表,包括地圖,需要的朋友可以參考下2023-09-09
javascript實現(xiàn)促銷倒計時+fixed固定在底部
一個不錯的示例使用javascript實現(xiàn)的促銷倒計時且同時擁有fixed固定在底部，而且兼容ie6，喜歡的朋友可以參考下2013-09-09
下面小編就為大家?guī)硪黄猨s刪除數組元素、清空數組的簡單方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
自己剛寫的一個小程序，寫得滿一般的，不過這個接口還成，感興趣的朋友可以參考下哈，希望對你學習js知識有所幫助2013-04-04
本文介紹了利用Javascript在網頁上計算當前月份的剩余天數的方法，大家參考使用吧2014-01-01
這篇文章主要介紹了學習JavaScript編程語言的8張思維導圖分享,本文給出了javascript變量、javascript運算符、javascript數組、javascript流程語句、javascript字符串函數、javascript函數基礎、javascript基礎DOM操作、javascript正則表達式的思維導圖,需要的可以參考下2015-03-03
這篇文章介紹了今天是星期幾的4種JS代碼寫法，有需要的朋友可以參考一下2013-09-09
自適應布局meta標簽中viewport、content、width、initial-scale、minimum-sca
這篇文章主要介紹了移動客戶端手機頁面布局時各標簽元素作用和適用情景，通過詳解幾種屬性讓讀者更明確自適應布局的注意點，具體操作步驟大家可查看下文的詳細講解，感興趣的小伙伴們可以參考一下。2017-08-08
JavaScript實現(xiàn)指定數量的并發(fā)限制的示例代碼
這篇文章主要介紹了JavaScript實現(xiàn)指定數量的并發(fā)限制的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了JavaScript生成指定范圍隨機數和隨機序列,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05