简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  Pelaksanaan kemahiran javascript picture sliding effect_javascript

Pelaksanaan kemahiran javascript picture sliding effect_javascript

WBOY
WBOYasal
2016-05-16 15:32:432000semak imbas

Artikel ini berkongsi dengan anda cara melaksanakan kesan gelongsor imej JavaScript Kandungan khusus adalah seperti berikut

Tetikus pada gambar itu untuk memaparkan gambar yang lengkap Jika anda mengalih keluarnya, ia akan ditetapkan semula:

Pelaksanaan DOM operasi CSS dan JS ringkas: 

<!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="Pelaksanaan kemahiran javascript picture sliding effect_javascript" title="Pelaksanaan kemahiran javascript picture sliding effect_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>

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

operasi 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);
 }
};
Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js imej kod pelaksanaan kesan karusel kemahiran javascriptArtikel seterusnya：js imej kod pelaksanaan kesan karusel kemahiran javascript

Artikel berkaitan

Lihat lagi