js實現(xiàn)簡單手風琴效果

更新時間：2021年09月26日 09:01:39 作者：段嘉許..！

這篇文章主要為大家詳細介紹了js實現(xiàn)簡單手風琴效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)手風琴效果的具體代碼，供大家參考，具體內(nèi)容如下

效果：

實現(xiàn)代碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   *{
    margin:0;
    padding:0;
   }
   ul,li{
    list-style:none;
   }
   .box{
    width:1200px;
    height:260px;
    margin:50px auto 0;
    overflow: hidden;
   }
   .list{
    width:2000px;
    height:260px;
   }
   .list>li{
    width:200px;
    height:260px;
    float:left;
    background-image:url(images/1.jpg);
    background-position:center center;
    background-repeat:no-repeat;
   }
   .list>li:nth-child(2){
    background-image:url(images/2.jpg);
   }
   .list>li:nth-child(3){
    background-image:url(images/3.jpg);
   }
   .list>li:nth-child(4){
    background-image:url(images/4.jpg);
   }
   .list>li:nth-child(5){
    background-image:url(images/5.jpg);
   }
   .list>li:nth-child(6){
    background-image:url(images/6.jpg);
   }
  </style>
 </head>
 <body>
  
  <div class="box">
   <ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  </div>
  
  <script src="js/startmove.js"></script>
  <script>
   
   var oLis = document.getElementsByClassName("list")[0].children;
   
   for(var i = 0; i < oLis.length; i++){
    oLis[i].onmouseover = function(){
     for(var j = 0; j < oLis.length; j++){
      startMove(oLis[j],{
       width:160
      },50)
     }
     startMove(this,{
      width:400
     },50)
    }
    oLis[i].onmouseout = function(){
     
     for(var j = 0; j < oLis.length; j++){
      startMove(oLis[j],{
       width:200
      },10)
     }
    }
   }
   
   
  </script>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
手風琴

js保留兩位小數(shù)方法總結(jié)
本篇文章給大家總結(jié)了js保留兩位小數(shù)的各種方法以及每種方法的實例代碼分析，如果大家對此有需要，一起來學習下js保留兩位小數(shù)的方法吧。
2018-01-01
window.print()局部打印三種方式(小結(jié))
本文主要介紹了window.print()局部打印三種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06
JS中的算法與數(shù)據(jù)結(jié)構(gòu)之二叉查找樹（Binary Sort Tree）實例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之二叉查找樹（Binary Sort Tree）,結(jié)合實例形式詳細分析了二叉查找樹（Binary Sort Tree）的原理、定義、遍歷、查找、插入、刪除等常見操作技巧,需要的朋友可以參考下
2019-08-08
Js 回車換行處理的辦法及replace方法應用
當我們在文本框里輸入文字敲下回車后，希望在提交后網(wǎng)頁也顯示是換行的效果,可往往并不能如愿以償啊，實在是憤怒啊自己寫了一個回車換行處理的函數(shù)，感興趣的朋友可以了解下啊，希望本文對你有所幫助
2013-01-01
JavaScript 中調(diào)用 Kotlin 方法實例詳解
這篇文章主要介紹了JavaScript 中調(diào)用 Kotlin 方法實例詳解的相關資料,需要的朋友可以參考下
2017-06-06
JavaScript實現(xiàn)秒殺時鐘倒計時
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)秒殺時鐘倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
實現(xiàn)非常簡單的js雙向數(shù)據(jù)綁定
Angular實現(xiàn)了雙向綁定機制。所謂的雙向綁定，無非是從界面的操作能實時反映到數(shù)據(jù)，數(shù)據(jù)的變更能實時展現(xiàn)到界面。本文給大家詳細介紹js雙向數(shù)據(jù)綁定，感興趣的朋友參考下
2015-11-11
基于JS簡單實現(xiàn)手持彈幕功能+文字抖動特效代碼
這篇文章主要介紹了基于JS簡單實現(xiàn)手持彈幕功能+文字抖動特效代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-03-03
JS組件Form表單驗證神器BootstrapValidator
做Web開發(fā)的我們，表單驗證是再常見不過的需求了。友好的錯誤提示能增加用戶體驗。今天就來看看bootstrapvalidator如何使用，感興趣的小伙伴們可以參考一下
2016-01-01
微信小程序分享海報生成的實現(xiàn)方法
為了吸引更多的用戶，設計好一個分享海報還是很有必要的，這篇文章主要介紹了微信小程序分享海報生成的實現(xiàn)方法，非常具有實用價值，需要的朋友可以參考下
2018-12-12