快捷導(dǎo)航

javascript圖片滑動(dòng)效果實(shí)現(xiàn)

更新時(shí)間：2021年01月28日 16:25:47 作者：小平果118

這篇文章主要介紹了超實(shí)用的javascript圖片滑動(dòng)效果實(shí)現(xiàn)方法,實(shí)例分析了javascript通過(guò)對(duì)頁(yè)面元素與相關(guān)屬性的操作實(shí)現(xiàn)滑動(dòng)菜單效果的相關(guān)技巧，具有一定參考借鑒價(jià)值，需要的朋友可以參考下

本文為大家分享了javascript圖片滑動(dòng)效果實(shí)現(xiàn)方法，具體內(nèi)容如下，先看一下效果圖：

鼠標(biāo)滑過(guò)那張圖，顯示完整的哪張圖，移除則復(fù)位：

簡(jiǎn)單的CSS加JS操作DOM實(shí)現(xiàn)：

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>sliding doors</title>
 <link rel="stylesheet" href="styles/reset.css" />
 <link rel="stylesheet" href="styles/slidingdoors.css" />
 <script src="scripts/slidingdoors.js"></script>
 </head>
 <body>
 <div id='container'>
 <img src="images/door1.png" alt="1080P神器" title="1080P神器" />
 <img src="images/door2.png" alt="5.5寸四核" title="5.5寸四核" />
 <img src="images/door3.png" alt="四核5寸" title="四核5寸" />
 <img src="images/door4.png" alt="5.7寸機(jī)皇" title="5.7寸機(jī)皇" />
 </div>
 </body>
</html>

css:

#container {
 height: 477px;
 margin: 0 auto;
 border-right: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 overflow: hidden;
 position: relative;
}

#container img {
 position: absolute;
 display: block;
 left: 0;
 border-left: 1px solid #ccc;
}

js操作：

window.onload = function() {
 //容器對(duì)象
 var box = document.getElementById('container');

 //獲得圖片NodeList對(duì)象集合
 var imgs = box.getElementsByTagName('img');

 //單張圖片的寬度
 var imgWidth = imgs[0].offsetWidth;

 //設(shè)置掩藏門體露出的寬度
 var exposeWidth = 180;

 //設(shè)置容器總寬度
 var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth;
 box.style.width = boxWidth + 'px';

 //設(shè)置每道門的初始位置
 function setImgsPos() {
 for (var i = 1, len = imgs.length; i < len; i++) {
 imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + 'px';
 }
 }
 setImgsPos();

 //計(jì)算每道門打開(kāi)時(shí)應(yīng)移動(dòng)的距離
 var translate = imgWidth - exposeWidth;

 //為每道門綁定事件
 for (var i = 0, len = imgs.length; i < len; i++) {
 //使用立即調(diào)用的函數(shù)表答式，為了獲得不同的i值
 (function(i) {
 imgs[i].onmouseover = function() {
 //先將每道門復(fù)位
 setImgsPos();
 //打開(kāi)門
 for (var j = 1; j <= i; j++) {
  imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + 'px';
  //imgs[j].style.left = j*exposeWidth +"px";
 }
 };
 imgs[i].onmouseout = function(){
 setImgPos();
 };
 })(i);
 }
};

更多關(guān)于滑動(dòng)效果的專題，請(qǐng)點(diǎn)擊下方鏈接查看：

javascript滑動(dòng)操作匯總

jquery滑動(dòng)操作匯總

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: