快捷導(dǎo)航

js實(shí)現(xiàn)簡(jiǎn)單手風(fēng)琴效果

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

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

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

效果：

實(shí)現(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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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