Implémentation des compétences javascript d'effet de glissement d'image

Implémentation des compétences javascript d'effet de glissement d'image_javascript

WBOY

Libérer： 2016-05-16 15:32:43

original

2001 Les gens l'ont consulté

Cet article explique avec vous comment implémenter l'effet de glissement d'image JavaScript. Le contenu spécifique est le suivant. Jetons d'abord un coup d'œil au rendu :

Passez la souris sur cette image pour afficher l'image complète. Si vous la supprimez, elle sera réinitialisée :

Implémentation DOM simple des opérations CSS et JS :

<!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="Implémentation des compétences javascript deffet de glissement dimage_javascript" title="Implémentation des compétences javascript deffet de glissement dimage_javascript" />
   <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寸机皇" title="5.7寸机皇" />
  </div>
 </body>
</html>

Copier après la connexion

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;
}

Copier après la connexion

Opération js :

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

 //获得图片NodeList对象集合
 var imgs = box.getElementsByTagName('img');

 //单张图片的宽度
 var imgWidth = imgs[0].offsetWidth;

 //设置掩藏门体露出的宽度
 var exposeWidth = 180;

 //设置容器总宽度
 var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth;
 box.style.width = boxWidth + 'px';

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

 //计算每道门打开时应移动的距离
 var translate = imgWidth - exposeWidth;

 //为每道门绑定事件
 for (var i = 0, len = imgs.length; i < len; i++) {
  //使用立即调用的函数表答式，为了获得不同的i值
  (function(i) {
   imgs[i].onmouseover = function() {
    //先将每道门复位
    setImgsPos();
    //打开门
    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);
 }
};

Copier après la connexion

J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Implémentation des compétences javascript d'effet de glissement d'image_javascript